BottomSheet使用详解
Android Support Library 23.2里的 Design Support Library新加了一个Bottom Sheets控件,Bottom Sheets顾名思义就是底部操作控件，用于在屏幕底部创建一个可滑动关闭的视图，可以替代对话框和菜单。其中包含BottomSheets、BottomSheetDialog和BottomSheetDialogFragment三种可以使用。
BottomSheets常见的效果如图,并且在国内的知乎、百度地图上也是可以看到效果。
图片.png图片.png
首先我们学习使用BottomSheets，BottomSheets其实也是依赖于Behavior机制的使用。
先引用依赖,最新的design包已经到24了
compile 'com.android.support:design:24.2.1'
BottomSheets
在布局文件xml中的使用,BottomSheets需要配合CoordinatorLayout控件
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:id="@+id/cl" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.v4.widget.NestedScrollView android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" app:behavior_hideable="true" app:behavior_peekHeight="50dp" app:layout_behavior="@string/bottom_sheet_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- 你自己的代码--> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
其中包含三个属性
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior"
app:behavior_peekHeight="50dp" peekHeight是当Bottom Sheets关闭的时候，底部我们能看到的高度,默认是0不可见。
app:behavior_hideable="true" hideable是当我们拖拽下拉的时候，bottom sheet是否能全部隐藏。
layout_behavior指向bottom_sheet_behavior,代表这是一个bottom Sheets
在java代码中的使用
BottomSheetBehavior behavior; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bottom_sheet); View bottomSheet = findViewById(R.id.bottom_sheet); behavior = BottomSheetBehavior.from(bottomSheet); behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { //这里是bottomSheet状态的改变 } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { //这里是拖拽中的回调，根据slideOffset可以做一些动画 } }); }
behavior_hideable对应代码 behavior.setHideable(false);
behavior_peekHeight对应代码 behavior.setPeekHeight(50);
setBottomSheetCallback可以监听回调的状态,onStateChanged监听状态的改变,onSlide是拖拽的回调,onStateChanged可以监听到的回调一共有5种:
- STATE_HIDDEN: 隐藏状态。默认是false，可通过app:behavior_hideable属性设置。
- STATE_COLLAPSED: 折叠关闭状态。可通过app:behavior_peekHeight来设置显示的高度,peekHeight默认是0。
- STATE_DRAGGING: 被拖拽状态
- STATE_SETTLING: 拖拽松开之后到达终点位置（collapsed or expanded）前的状态。
STATE_EXPANDED: 完全展开的状态。
BottomSheets控件配合NestedScrollView、RecyclerView使用效果会更好,合理的使用让APP逼格满满。
我们需要在按钮按钮上添加对BottomSheets的显示和隐藏
if(behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) { behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); }else { behavior.setState(BottomSheetBehavior.STATE_EXPANDED); }
效果如图:
图片.png
design24.2.1的BottomSheets和23.2.0的BottomSheet有很大的区别,design23.2.0的包中如果你使用了BottomSheet,可以在屏幕外任何位置上拉即可拉出来布局,在24.2.1中没有了这个效果。
BottomSheetDialog
BottomSheetDialog应该是最实用的控件,也是使用率非常高的控件。它可以替代大多数网格显示和列表展示的dialog和popupwindow，默认宽度撑满，并且在BottomSheetDialog 区域中向下滑动也让对话框消失。
首先写一个dialog展示的xml，dialog中xml可以不用被CoordinatorLayout包裹，但是还是推荐实用推荐的滑动控件NestedScrollView
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:onClick="doclick" android:layout_width="match_parent" android:layout_height="100dp" android:background="@color/colorPrimary" android:gravity="center" android:text="啦啦啦啦啦啦啦啦啦" android:textColor="@color/white" android:textSize="18sp"/> <ImageView android:onClick="doclick" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/banner"/> </LinearLayout> </android.support.v4.widget.NestedScrollView>
编写java代码
BottomSheetDialog dialog = new BottomSheetDialog(this); View view = getLayoutInflater().inflate(R.layout.dialog_bottom_sheet, null); dialog.setContentView(view); dialog.show();
只需要四行我们就可以展示BottomSheets效果的dialog,高度为你设置的behavior_peekHeight或者默认高度，宽度撑满。在很多情况底部显示dialog的时候，都可以考虑实用BottomSheetDialog来实现。
效果如图:
BottomSheetDialogFragment
BottomSheetDialogFragment可以帮助我们实现全屏的BottomSheet展示效果。新建一个类继承BottomSheetDialogFragment
xml使用BottomSheetDialog的布局样式,我们直接看java代码
public class FullSheetDialogFragment extends BottomSheetDialogFragment { private BottomSheetBehavior mBehavior; @Override public Dialog onCreateDialog(Bundle savedInstanceState) { BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState); View view = View.inflate(getContext(), R.layout.dialog_bottom_sheet, null); dialog.setContentView(view); mBehavior = BottomSheetBehavior.from((View) view.getParent()); return dialog; } @Override public void onStart() { super.onStart(); //默认全屏展开 mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); } public void doclick(View v) { //点击任意布局关闭 mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN); } }
调用BottomSheetDialogFragment展示
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");
BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根据情况选择。
效果如图:
图片.png
BottomSheetDialog就介绍到此，如果有错误请指出，谢谢。