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



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：

Grid：

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