当前位置： 移动技术网 > IT编程>移动开发>Android > Android控件BottomSheet实现底边弹出选择列表

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

任聪聪,信中国节目什么时候播,江志丰七天

底边弹出一个选择列表这是一个比较常用的选择条件或跳转的很好的方法，可以很好的隐藏各个选项。在需要使用时在底边弹出。而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文件夹中创建一个menu文件夹，在其下创建列表的布局xml文件，如下创建一个 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和关联的布局sheet，然后点击监听
        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（）出来

 
      }
    });




  }
}

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网