对于安卓BottomSheet的应用,大家都应该比较熟悉,底部弹出的分享框等等都是典型的应用,今天我就来分享如何制作一个BottomSheet控件。

一般的BottomSheet有两种类型,一种是以图标为主,一行有几个大图标,而另一种基本是小图标加辅助文字的列表形式,所以我们要实现的BottomSheet也要能同时能够实现这两种类型,并由使用者来选择创建哪一种类型的BottomSheet。分别名为grid类型与list类型。
首先要编写两种类型的xml文件,基本是大同小异的,区别的对待会在recycleview的item中体现。
bottomsheetbuilder_sheet_list.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <View android:id="@+id/fakeShadow" android:layout_width="match_parent" android:layout_height="2dp" android:background="@drawable/bottom_sheet_shadow" /> <include layout="@layout/bottomsheetbuilder_list_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/bottomsheet_title_vertical_margin" android:visibility="gone" /> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" android:clipToPadding="false" android:paddingBottom="@dimen/bottomsheet_vertical_margin" android:paddingTop="@dimen/bottomsheet_vertical_margin" /></LinearLayout>bottomsheetbuilder_sheet_grid.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <View android:id="@+id/fakeShadow" android:layout_width="match_parent" android:layout_height="2dp" android:background="@drawable/bottom_sheet_shadow" /> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" android:clipToPadding="false" android:paddingBottom="@dimen/bottomsheet_grid_padding_bottom" android:paddingEnd="@dimen/bottomsheet_grid_horizontal_margin" android:paddingLeft="@dimen/bottomsheet_grid_horizontal_margin" android:paddingRight="@dimen/bottomsheet_grid_horizontal_margin" android:paddingStart="@dimen/bottomsheet_grid_horizontal_margin" /></LinearLayout>两者的区别还有一项是,list类型一般会有个标题,所以可以看到我在xml中include了个header文件
bottomsheetbuilder_list_header.xml<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/bottomsheet_vertical_margin" android:ellipsize="end" android:maxLines="1" android:paddingBottom="@dimen/bottomsheet_title_vertical_margin" android:paddingEnd="@dimen/bottomsheet_horizontal_margin" android:paddingLeft="@dimen/bottomsheet_horizontal_margin" android:paddingRight="@dimen/bottomsheet_horizontal_margin" android:paddingStart="@dimen/bottomsheet_horizontal_margin" android:textColor="@color/colorSheetTitle" android:textSize="@dimen/bottomsheet_title_size" />这样大体的布局就完成了。再来看看子项的布局,子项的布局也不用多说,gird类型的基本是一个大图标下方有名称,而list类型是左边一个小图标右边接着名称,对于list类型还要处理的一点是分隔符,因为文字直接如果不用比如一条细线来分隔开来,还是很难分辨项与项之间的分隔。
bottomsheetbuilder_grid_adapter.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/bottomsheet_grid_margin_top" android:background="?android:attr/selectableItemBackground" android:clickable="true" android:gravity="center" android:orientation="vertical"> <android.support.v7.widget.AppCompatImageView android:id="@+id/imageView" android:layout_width="@dimen/bottomsheet_list_item_height" android:layout_height="@dimen/bottomsheet_list_item_height" android:scaleType="fitXY" android:layout_gravity="center" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="4dp" android:ellipsize="end" android:maxLines="1" android:textSize="12sp" android:textColor="@color/colorSheetTitle" /></LinearLayout>bottomsheetbuilder_list_adapter.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/bottomsheet_list_item_height" android:background="?android:attr/selectableItemBackground" android:paddingEnd="@dimen/bottomsheet_horizontal_margin" android:paddingLeft="@dimen/bottomsheet_horizontal_margin" android:paddingRight="@dimen/bottomsheet_horizontal_margin" android:paddingStart="@dimen/bottomsheet_horizontal_margin" android:clickable="true" android:gravity="center_vertical" android:orientation="horizontal"> <android.support.v7.widget.AppCompatImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/bottomsheet_horizontal_margin" android:layout_marginRight="@dimen/bottomsheet_horizontal_margin" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/bottomsheet_horizontal_margin" android:layout_marginStart="@dimen/bottomsheet_horizontal_margin" android:ellipsize="end" android:maxLines="1" android:gravity="center_vertical" android:textSize="@dimen/bottomsheet_item_textsize" android:textColor="@color/colorSheetText" /></LinearLayout>bottomsheetbuilder_list_divider.xml<View xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/titleTextView" android:layout_width="wrap_content" android:layout_height="1dp" android:layout_marginBottom="@dimen/bottomsheet_vertical_margin" android:layout_marginTop="@dimen/bottomsheet_vertical_margin" android:background="@color/colorSheetDivider" />这样的话,基本的xml文件我们都定义完了。
新闻热点
疑难解答