BottomSheets是一个底部可操作的布局,包含有BottomSheet,BottomSheetDialog,BottomSheetDialogFragment.可以拖拽滑动,可以做菜单,对话框,现在用到这个的还不多。项目中用到这个东西,简单的做个总结,碰到的问题也记一下。
碰到的问题就是,需要改变弹窗的高度!解决方法看下面2代码,注释很清楚。
1.Bottomsheet使用
引入desigin包,配合CoordinatorLayout空间使用
效果如下:
实现代码:
布局文件
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coor"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true">
<!--app:behavior_hideable="true" hideable当我们拖拽下拉的时候 bottomsheet是否可以全部隐藏-->
<!--app:behavior_peekHeight="50dp" 当dialog关闭的时候底部可看到的高度 默认为0-->
<!--app:layout_behavior="@string/bottom_sheet_behavior" 代表这是一个bottom sheet-->
<Button android:layout_width="match_parent" android:layout_height="wrap_content"
android:onClick="SheetClick"
android:text="bottomSheet展示"/>
<android.support.v4.widget.NestedScrollView android:id="@+id/bootom_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">
<TextView android:layout_width="match_parent" android:layout_height="50dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="你好啊"/>
<ImageView android:layout_width="match_parent" android:layout_height="200dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在代码中使用:
根据CoordinatorLayout布局,获取到BottomSheetBehavior,可以点击按钮改变bottomsheet的显示状态,可以做监听等
BottomSheet的状态:
STATE_HIDDEN: 隐藏状态。默认是false,可通过app:behavior_hideable属性设置。
STATE_COLLAPSED: 折叠关闭状态。可通过app:behavior_peekHeight来设置显示的高度,peekHeight默认是0。
STATE_DRAGGING: 被拖拽状态
STATE_SETTLING: 拖拽松开之后到达终点位置(collapsed or expanded)前的状态。
STATE_EXPANDED: 完全展开的状态。
BottomSheetBehavior mBehavior;
//按钮改变现实隐藏
public void SheetClick(View view) {
if (mBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
mBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else {
mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bottomsheet);
View bottomSheet = findViewById(R.id.bootom_sheet);
mBehavior = BottomSheetBehavior.from(bottomSheet);
mBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
//bottomsheet状态改变
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
//bottomsheet滑动拖拽改变slideoffest做动画
}
});
}
2.BottomSheetDialog使用
BottomSheetDialog的使用很简单,直接创建BottomSheetDialog,调用setContentView()绑定布局,最后显示调用show()方法;
但是有一个坑,很多情况下弹窗都可以完全展示出来,如果弹窗布局很高的话,官方默认的是256dp,就会展示不全。
简单实用的代码,resetLp是解决显示不全的代码。
BottomSheetDialog dialog = new BottomSheetDialog(this);
View v = getLayoutInflater().inflate(R.layout.bottom_sheet_dialog, null);
dialog.setContentView(v);
resetLp(v);
dialog.show();
/**
* 问题,bottomsheetdialog默认显示高度256dp,不完全显示,如果想要完全显示,处理的办法
* 1.通过bottomsheetdialog中contentview得到parentView,通过parentview得到bottomsheetbehavior
* 2.测量bottomsheetdialog布局中的content的高度,设置peekhight
* 3.设置bottomsheetdialog的contentview对应的父布局coordinatorlayout的grivity为gravity top gravity horizontal
*/
public void resetLp(View v) {
View parent = (View) v.getParent();
BottomSheetBehavior behavior = BottomSheetBehavior.from(parent);
v.measure(0, 0);
behavior.setPeekHeight(v.getMeasuredHeight());
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) parent.getLayoutParams();
lp.gravity = Gravity.TOP | Gravity.CENTER_HORIZONTAL;
parent.setLayoutParams(lp);
}
3.BottomSheetDialogFragment使用
BottomSheetDialogFragment内部实现实际是BottomSheetDialog,不多说。
/**
* 这里有一个坑,如果在这个方法里面创建一个dialog对象返回,
* 然而在此fragment中oncreateview方法中加载布局,布局并不能完全展示的话,
* 人为去改变peekheight就会出现一个问题,拿到的布局是空的,
* 想要动手脚,须在oncreateDialog方法中实现
* 其实使用BottomDialogFragment和BottomDialog是一样的道理,
* BottomDialogFragment内部是使用的BottomDialog实现的
* <p>
* Modal bottom sheet. This is a version of {@link DialogFragment} that shows a bottom sheet
* using {@link BottomSheetDialog} instead of a floating dialog.
*/
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
View view = View.inflate(getContext(), R.layout.bottom_sheet_dialog_fragment, null);//默认词布局为CoordinatorLayout的子布局
dialog.setContentView(view);
mBehavior = BottomSheetBehavior.from((View) view.getParent());//
return dialog;
}
同样如果在这个dialog布局中有editText输入框的话,点击输入框会出现软键盘遮挡弹窗的问题,这个问题解决需要改变弹窗的高度的,第二步中的resetLp();试过改变软键盘状态无效。
效果与BottomSheetDialog类似。
Demo下载