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