Android控件BottomSheet實現(xiàn)底邊彈出選擇列表

更新時間：2020年08月26日 14:52:11 作者：Dream_JK

這篇文章主要介紹了Android控件BottomSheet實現(xiàn)底邊彈出選擇列表，比較常用的選擇條件或跳轉(zhuǎn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

底邊彈出一個選擇列表這是一個比較常用的選擇條件或跳轉(zhuǎn)的很好的方法，可以很好的隱藏各個選項。在需要使用時在底邊彈出。而BottomSheet就是這樣的一個控件。

使用

1.導入build

compile 'com.cocosw:bottomsheet:1.3.0'

2.在res/values/colors.xml文件中添加以下代碼：

<!--首頁item文字顏色-->
<color name="colorSubtitle">#999</color>

<!--列表文字顏色-->
<color name="colorTitle">#666</color>


<color name="colorWhite">#ffffffff</color>

<!--首頁分割線-->

<color name="colorLine">#EBEBEB</color>

3.在res/values/styles.xml中添加以下style

<style name="BottomSheet.StyleDialog" parent="BottomSheet.Dialog">
 <item name="android:backgroundDimAmount">0.5</item>
 <item name="android:windowAnimationStyle">@style/BottomSheet.Animation</item>
 <item name="android:textColorPrimary">@color/colorTitle</item>
 <item name="android:textColorSecondary">@color/colorSubtitle</item>
 <item name="android:textSize">15sp</item>
 <item name="android:textColorHint">#42ffffff</item>
 <item name="bs_dialogBackground">@color/colorWhite</item>
 <item name="bs_dividerColor">@color/colorLine</item>
 <item name="bs_numColumns">5</item>
 <item name="bs_listStyle">@style/BottomSheet.List</item>
</style>

4.在res文件夾中創(chuàng)建一個menu文件夾，在其下創(chuàng)建列表的布局xml文件，如下創(chuàng)建一個 gank_bottomsheet.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto">
 <item
  android:id="@+id/gank_all"
  android:icon="@drawable/gank_icon_category"
  android:title="列表" />
 <item
  android:id="@+id/gank_ios"
  android:icon="@drawable/gank_icon_collect"
  android:title="收藏" />
 <item
  android:id="@+id/gank_app"
  android:icon="@drawable/gank_icon_ewm"
  android:title="二維碼" />
 <item
  android:id="@+id/gank_qian"
  android:icon="@drawable/gank_icon_girl"
  android:title="女孩" />

</menu>

5.布局xml中：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_bottom_sheet"
 android:layout_width="match_parent"
 android:orientation="vertical"
 android:layout_height="match_parent"
 >
 <Button
  android:layout_marginTop="80dp"
  android:layout_gravity="center_horizontal"
  android:id="@+id/BS_bt"
  android:background="@android:drawable/dialog_holo_light_frame"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="點擊顯示底部列表" />

</LinearLayout>

6.java文件中的使用：

 public class BottomSheetActivity extends AppCompatActivity {
 private Button button;
 private Context context;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_bottom_sheet);
  getSupportActionBar().hide();
  context=this;
  button=(Button)findViewById(R.id.BS_bt);

  button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    //當點擊Button時，就會顯示底邊欄，需要new出來讓后把BottomSheet的style和標題title和關聯(lián)的布局sheet，然后點擊監(jiān)聽
    new BottomSheet.Builder(context, R.style.BottomSheet_StyleDialog).title("選擇分類").sheet(R.menu.gank_bottomsheet).listener(new DialogInterface.OnClickListener(){
     @Override
     public void onClick(DialogInterface dialog, int which) {

      switch (which){
       case R.id.gank_app:
        Toast.makeText(context,"列表",Toast.LENGTH_SHORT).show();
        break;
       case R.id.gank_all:
        Toast.makeText(context,"收藏",Toast.LENGTH_SHORT).show();
        break;
       case R.id.gank_ios:
        Toast.makeText(context,"二維碼",Toast.LENGTH_SHORT).show();
        break;
       case R.id.gank_qian:
        Toast.makeText(context,"女孩",Toast.LENGTH_SHORT).show();
        break;
      }

     }
    }).show();
    //記得一定要show（）出來

 
   }
  });




 }
}

效果圖：