Android BottomSheet：List列表或Grid网格展示（3）

待我称王封你为后i 2023-10-17 05:17 13阅读 0赞

**Android BottomSheet：List列表或Grid网格展示（3）**

BottomSheet可以显示多种样式的底部弹出面板风格，比如常见的List列表样式或者Grid网格样式，以一个例子说明。  
先写一个布局，该布局作为Activity的布局加载，BottomSheet将从此Activity的底部弹出弹入。布局中只有两个button按钮，分别触发List或者Grid面板：

<?xml version="1.0" encoding="utf-8"?>
    <com.flipboard.bottomsheet.BottomSheetLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/bottomsheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/root"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="end"
            android:orientation="vertical"
            android:padding="16dp">
    
            <Button
                android:id="@+id/list_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/list_button" />
    
            <Button
                android:id="@+id/grid_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/grid_button" />
    
        </LinearLayout>
    
    </com.flipboard.bottomsheet.BottomSheetLayout>

上层Java代码：

package com.flipboard.bottomsheet.sample;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.Toast;
    
    import com.flipboard.bottomsheet.BottomSheetLayout;
    import com.flipboard.bottomsheet.R;
    import com.flipboard.bottomsheet.commons.MenuSheetView;
    
    /**
     * Activity demonstrating the use of {@link MenuSheetView}
     */
    public class MenuActivity extends AppCompatActivity {
    
        protected BottomSheetLayout bottomSheetLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_menu);
            bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
            bottomSheetLayout.setPeekOnDismiss(true);
            findViewById(R.id.list_button).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //显示列表样式菜单
                    //传入一个MenuSheetView.MenuType.LIST的值，标明弹出面板样式
                    showMenuSheet(MenuSheetView.MenuType.LIST);
                }
            });
            findViewById(R.id.grid_button).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //弹出网格样式的面板
                    showMenuSheet(MenuSheetView.MenuType.GRID);
                }
            });
        }
    
        private void showMenuSheet(final MenuSheetView.MenuType menuType) {
            MenuSheetView menuSheetView =
                    new MenuSheetView(MenuActivity.this, menuType, "请选择...", new MenuSheetView.OnMenuItemClickListener() {
                        @Override
                        public boolean onMenuItemClick(MenuItem item) {
                            Toast.makeText(MenuActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
    
                            //因为点击了面板中的某一项，关闭这个面板
                            if (bottomSheetLayout.isSheetShowing()) {
                                bottomSheetLayout.dismissSheet();
                            }
    
                            //假设用户选择以另外一种方式打开
                            //则重新切换样式
                            if (item.getItemId() == R.id.reopen) {
                                showMenuSheet(menuType == MenuSheetView.MenuType.LIST ? MenuSheetView.MenuType.GRID : MenuSheetView.MenuType.LIST);
                            }
    
                            return true;
                        }
                    });
    
            //此处构造展示出来的面板选项条目的数据源
            //从menu菜单的数据创建
            //类似适配器
            menuSheetView.inflateMenu(R.menu.create);
    
            //不要忘记这段代码，否则显示不出来
            bottomSheetLayout.showWithSheetView(menuSheetView);
        }
    }

BottomSheet的数据源是从res/menu/下给出的菜单数据构造item。本例中用到的res/menu/create.xml：

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:icon="@mipmap/ic_launcher"
            android:title="@string/document" />
        <item
            android:icon="@mipmap/ic_launcher"
            android:title="@string/spreadsheet" />
        <item
            android:icon="@mipmap/ic_launcher"
            android:title="@string/folder" />
    
        <item
            android:id="@+id/menu_subheader"
            android:title="子菜单">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_1"
                    android:icon="@mipmap/ic_launcher"
                    android:title="@string/upload_photos" />
                <item
                    android:id="@+id/navigation_sub_item_2"
                    android:icon="@mipmap/ic_launcher"
                    android:title="@string/use_camera" />
            </menu>
        </item>
        <item
            android:id="@+id/reopen"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/reopen" />
    
    </menu>

代码运行结果->  
List：

![Center][]

Grid：

![Center 1][]

附录文章：  
1，《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址：[http://blog.csdn.net/zhangphil/article/details/51444509][http_blog.csdn.net_zhangphil_article_details_51444509]  
2，《Android音乐、视频类APP常用控件：DraggablePanel（1）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51566860][http_blog.csdn.net_zhangphil_article_details_51566860]  
3，《Android音乐、视频类APP常用控件：DraggablePanel（2）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51578665][http_blog.csdn.net_zhangphil_article_details_51578665]  
4，《Android图片加载与缓存开源框架：Android Glide》链接地址[http://blog.csdn.net/zhangphil/article/details/45535693][http_blog.csdn.net_zhangphil_article_details_45535693] ：  
5，《Android BottomSheet：便捷易用的底部滑出面板（1）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51775955][http_blog.csdn.net_zhangphil_article_details_51775955]  
6，《Android BottomSheet：以选取图片为例（2）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51776408][http_blog.csdn.net_zhangphil_article_details_51776408]

[Center]: https://img-blog.csdn.net/20160629112348828?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160629112402066?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_51444509]: http://blog.csdn.net/zhangphil/article/details/51444509
[http_blog.csdn.net_zhangphil_article_details_51566860]: http://blog.csdn.net/zhangphil/article/details/51566860
[http_blog.csdn.net_zhangphil_article_details_51578665]: http://blog.csdn.net/zhangphil/article/details/51578665
[http_blog.csdn.net_zhangphil_article_details_45535693]: http://blog.csdn.net/zhangphil/article/details/45535693
[http_blog.csdn.net_zhangphil_article_details_51775955]: http://blog.csdn.net/zhangphil/article/details/51775955
[http_blog.csdn.net_zhangphil_article_details_51776408]: http://blog.csdn.net/zhangphil/article/details/51776408