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

2019-10-22 18:30:30

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

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

使用

1.導(dǎo)入build

compile 'com.cocosw:bottomsheet:1.3.0'

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

<!--首頁(yè)item文字顏色--><color name="colorSubtitle">#999</color><!--列表文字顏色--><color name="colorTitle">#666</color><color name="colorWhite">#ffffffff</color><!--首頁(yè)分割線--><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)建一個(gè)menu文件夾，在其下創(chuàng)建列表的布局xml文件，如下創(chuàng)建一個(gè) 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="點(diǎn)擊顯示底部列表" /></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) {        //當(dāng)點(diǎn)擊Button時(shí)，就會(huì)顯示底邊欄，需要new出來(lái)讓后把BottomSheet的style和標(biāo)題title和關(guān)聯(lián)的布局sheet，然后點(diǎn)擊監(jiān)聽(tīng)        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（）出來(lái)       }    });  }}

效果圖：

Android,BottomSheet,底邊彈出