底部动作条（BottomSheet）
- 底部动作条是一个从屏幕底部边缘向上滑出的面板，常见与高德地图里，你选中某个地点后，会从底部弹出相关信息，很好用。
- 关于BotoomSheet沉浸式显示参考这篇文章BottomSheetDialog沉浸式
使用步骤：
- 添加MaterialDesign依赖：
//保持与编译版本号一致
implementation 'com.android.support:design:30.0.0-alpha1'
1、BottomSheetBehavior用法：
- MainActivity布局,注意：必须是CoordinatorLayout布局，否则会报错
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/content_main"/>
<include layout="@layout/content_bottom_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
- 主界面内容，content_main.xml布局，就是几个按钮监听
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorBack"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主界面"
android:layout_gravity="center_horizontal"
android:textColor="@color/colorPrimary"
/>
<Button
android:id="@+id/hide_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="隐藏"
android:layout_gravity="center"
/>
<Button
android:id="@+id/hide_all_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="完全隐藏"
android:layout_gravity="center"
/>
<Button
android:id="@+id/show_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="显示"
android:layout_gravity="center"
/>
</LinearLayout>
- 底层动作条布局，以及相关属性解释
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/ll_bottom_sheet"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable = "true"
app:behavior_peekHeight = "60dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="12345"
android:textSize="20sp"
android:gravity="center"
android:textColor="@color/colorWhite"
android:background="@color/color1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="12345"
android:textSize="20sp"
android:gravity="center"
android:textColor="@color/colorWhite"
android:background="@color/color2"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="12345"
android:textSize="20sp"
android:gravity="center"
android:textColor="@color/colorWhite"
android:background="@color/color3"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="12345"
android:textSize="20sp"
android:gravity="center"
android:textColor="@color/colorWhite"
android:background="@color/color4"
/>
</LinerLayout>
- app:behavior_hideable = "true",代表底部布局可以完全隐藏，false代表不隐藏
- app:behavior_peekHeight = "60dp"，代表底层动作条布局的折叠高度
- app:layout_behavior="@string/bottom_sheet_behavior",代表这是底层动作条布局，必不可少
- 这种方式的优点:不会出现蒙层效果，所有条目均可以点击；
- 实现代码：
public class MainActivity extends AppCompatActivity {
private BottomSheetBehavior bottomSheetBehavior;
private LinearLayout llContentBottomSheet;
private Button hide_btn, show_btn, hide_all_btn;
//底部弹框显示2种效果：1.BottomSheetBehavior、2.BottomSheetDialog
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initBottomSheetBehavior()
}
//第一种方式
private void initBottomSheetBehavior(){
//第一种：BottomSheetBehavior，不会出现蒙层，可以点击
hide_btn = findViewById(R.id.hide_btn);
hide_all_btn = findViewById(R.id.hide_all_btn);
show_btn = findViewById(R.id.show_btn);
llContentBottomSheet = findViewById(R.id.ll_bottom_sheet);
bottomSheetBehavior = BottomSheetBehavior.from(llContentBottomSheet);
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View view, int state) {
switch (state) {
case BottomSheetBehavior.STATE_COLLAPSED:
//折叠 ，可手动设置折叠高度，属性值为：peekHeight
break;
case BottomSheetBehavior.STATE_DRAGGING:
//拖动
break;
case BottomSheetBehavior.STATE_EXPANDED:
//完全显示
break;
case BottomSheetBehavior.STATE_HIDDEN:
//完全隐藏
break;
case BottomSheetBehavior.STATE_SETTLING:
//视图自由滑动
break;
}
}
@Override
public void onSlide(@NonNull View view, float v) {
}
});
//折叠
hide_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
});
//完全展示
show_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
});
//完全隐藏
hide_all_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
});
}
}
最终效果如下:
result.gif
1、BottomSheetBehavior用法：
- 与一般Dialog使用方式差不多，有蒙层效果,代码如下：
//第二种
private void initBottomSheetDialog(){
//第二种：BottomSheetDialog，会出现蒙层，不可以点击，类似于常见的Dialog
if (bottomSheetDialog == null){
bottomSheetDialog = new BottomSheetDialog(this);
}
bottomSheetDialog.setCancelable(false);
bottomSheetDialog.setCanceledOnTouchOutside(true);
View view = LayoutInflater.from(this).inflate(R.layout.content_bottom_sheet,null);
bottomSheetDialog.setContentView(view);
bottomSheetDialog.show();
}
效果如下:
result1.gif
在此做个记录，方便后面查询使用。
网友评论