Android控件BottomSheet实现底边弹出选择列表

下面是详细讲解 “Android控件BottomSheet实现底边弹出选择列表”的完整攻略。

什么是BottomSheet

BottomSheet是安卓提供的一个UI控件，可以实现在屏幕底部弹出窗口，通常用于展示一些与主要内容相关的操作选项或者附属功能。BottomSheet有两种类型：持续BottomSheet和模态BottomSheet。持续BottomSheet是可以在主UI上同时滚动的，而模态BottomSheet会覆盖主UI的一部分，只有在底部背景上滑动才能关闭。

实现步骤

在XML布局中定义BottomSheet，设置其样式和高度等属性：

<LinearLayout
  android:id="@+id/bottom_sheet"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  app:behavior_hideable="true"
  app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
  app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

  <!-- 在这里添加Bottom Sheet显示的内容 -->

</LinearLayout>

其中app:behavior_hideable是用来控制BottomSheet是否可以隐藏，app:behavior_peekHeight是设置BottomSheet初始高度，app:layout_behavior是BottomSheet在使用时应该绑定的行为。

创建BottomSheetBehavior，绑定BottomSheet：

LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

设置BottomSheetBehavior的相关属性：

bottomSheetBehavior.setPeekHeight(getResources().getDimensionPixelSize(R.dimen.bottom_sheet_peek_height));
bottomSheetBehavior.setHideable(true);
bottomSheetBehavior.setSkipCollapsed(true);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

其中，setPeekHeight()设置卡片最初状态的高度，setHideable()设置是否可以通过手势收缩BottomSheet， setSkipCollapsed()控制当BottomSheet状态为STATE_DRAGGING时，是否跳过折叠状态，直接变成有设置的peek高度状态。

监听BottomSheet的状态改变，对BottomSheet进行相应操作：

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        if (newState == BottomSheetBehavior.STATE_HIDDEN) {
            // BottomSheet已隐藏，执行一些操作
        } else if (newState == BottomSheetBehavior.STATE_EXPANDED) {
            // BottomSheet在完全扩展时执行操作
        } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
            // BottomSheet在折叠状态下执行操作
        } else if (newState == BottomSheetBehavior.STATE_DRAGGING) {
            // BottomSheet在拖拽状态下执行操作
        } else if (newState == BottomSheetBehavior.STATE_SETTLING) {
            // BottomSheet在拖拽后自动设置状态时执行操作
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // 对拖动中的BottomSheet进行操作
    }
});

我们可以在Callback中监听到BottomSheet的各种状态，并相应进行相应操作。

示例

示例1：BottomSheet实现底部菜单

在BottomSheet中定义菜单项，并为其设置点击事件：

<LinearLayout
  android:id="@+id/bottom_sheet"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  app:behavior_hideable="true"
  app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
  app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

  <TextView
    android:id="@+id/menu_item1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/menu_item1"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

  <TextView
    android:id="@+id/menu_item2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/menu_item2"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

</LinearLayout>

然后在代码中为其设置点击事件，并在BottomSheetCallback中监听其状态：

LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

TextView menuItem1 = findViewById(R.id.menu_item1);
menuItem1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 在此处实现点击事件
    }
});

TextView menuItem2 = findViewById(R.id.menu_item2);
menuItem2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 在此处实现点击事件
    }
});

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        if (newState == BottomSheetBehavior.STATE_HIDDEN) {
            // 当BottomSheet隐藏后执行此处代码
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // 当BottomSheet在拖拽中时执行此处代码
    }
});

示例2：BottomSheet实现底部分享选择

在BottomSheet中添加分享渠道，分别定义：

<LinearLayout
  android:id="@+id/bottom_sheet"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  app:behavior_hideable="true"
  app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
  app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

  <TextView
    android:id="@+id/share_wechat"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/share_wechat"
    android:drawableLeft="@drawable/ic_wechat"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

  <TextView
    android:id="@+id/share_qq"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/share_qq"
    android:drawableLeft="@drawable/ic_qq"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

  <TextView
    android:id="@+id/share_weibo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/share_weibo"
    android:drawableLeft="@drawable/ic_weibo"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

  <TextView
    android:id="@+id/cancel_share"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/cancel_share"
    android:textColor="@color/colorPrimary"
    android:padding="16dp"
    android:gravity="center"
    android:background="?android:attr/selectableItemBackground"/>

</LinearLayout>

然后在代码中为其设置点击事件，并在BottomSheetCallback中监听其状态：

LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

TextView shareWechat = findViewById(R.id.share_wechat);
shareWechat.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 在此处实现分享到微信代码
    }
});

TextView shareQQ = findViewById(R.id.share_qq);
shareQQ.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 在此处实现分享到QQ代码
    }
});

TextView shareWeibo = findViewById(R.id.share_weibo);
shareWeibo.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 在此处实现分享到微博代码
    }
});

TextView cancelShare = findViewById(R.id.cancel_share);
cancelShare.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }
});

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        if (newState == BottomSheetBehavior.STATE_HIDDEN) {
            // 当BottomSheet隐藏后执行此处代码
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // 当BottomSheet在拖拽中时执行此处代码
    }
});

当我们点击分享按钮后，BottomSheet被展开，当取消分享时，可以通过设置BottomSheet为隐藏状态来关闭BottomSheet。同时使用setPeekHeight()通过改变BottomSheet的高度，控制BottomSheet的展示状态。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Android控件BottomSheet实现底边弹出选择列表 - Python技术站