一、简单介绍
这三个不同普通的Dialog,它们都可以通过手势拖动来进行隐藏或显示;
各自的特点:
- bottomDialog
依赖于CoordinatorLayout和BottomSheetBehavior,需要将底部菜单作为CoordinatorLayout的子View,并且需要设置app:layout_behavior="@string/bottom_sheet_behavior",适合固定的底部菜单,但是不够灵活,需要依赖父布局和behavior;
- bottomDialog
- 2.bottomSheetDialog
使用方式类似dialog,布局可以使动态的布局,比如是个Recycler; - 3.bottomSheetDialogFragment
通过继承与BottomSheetFragment来实现底部菜单布局,适用于动态指定的布局,并且根据Fragment的生命周期做较多逻辑操作的情况;
下面介绍下几种状态值:
- 1.STATE_EXPANDED:展开状态,显示完整布局;
- 2.STATE_COLLAPED:折叠状态,显示设置的peekHeight高度,如果peekHeight的高度为0,则全部隐藏,与STATE_HIDDEN状态一样;
- 3.STATE_HIDDEN:隐藏状态,隐藏全部布局;
- 4.STATE_DRAGGING:拖拽时的状态;是个中间状态;
- 5.STATE_SETLLING:释放时的状态;是个中间状态;
前三个状态值时稳定状态,也就是说:释放稳定后,最终会达到前三个某个状态之一;后两种类似ViewPager的SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING两种状态值
需要注意区别的是折叠和隐藏: - 1.折叠
当我们设置收起的高度app:behavior_peekHeight,在折叠的稳定状态时,不会完全隐藏,可以通过拖动这部分布局使它进入展开状态 - 2.隐藏
意味着整个底部菜单完全不可见,但是默认情况下是没有这种状态的,需要设置:app:behavior_hidbehavior_hideable = “true"才会出现这种状态;
图解如下:
二、BottomDialog的详解
bottomDialog依赖于CoordinatorLayout和behavior,我们一般布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.BottomDialogActivity">
<!--底部菜单布局-->
<include layout="@layout/layout_bottom_sheet_linear" />
</android.support.design.widget.CoordinatorLayout>
底部菜单布局如下:父布局必须为CoordinatorLayout,如上布局所示
- 1.使用LinearLayout;
- 2.使用RecyclerView
2.1 使用LinearLayout实现BottomDialog
layout_bottom_sheet_linear.xml布局如下:
**注意:
1.底部菜单必须设置:app:layout_behavior,只有设置了才能拖拽打开或隐藏,否则和普通的布局没什么差别;
2.必须设置peekHeight高度,否则在底部菜单直接用自己的默认的高度;
3.可选设置:是否支持隐藏,如果设置了app:behavior_hideable 为false或者不设置,那么调用etState(BottomSheetBehavior.STATE_HIDDEN)没有效果;
**
<?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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/bottom_sheet_behavior"
app:behavior_hideable = "true"
app:behavior_peekHeight="66dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="@string/app_name" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#999999" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="@string/app_name" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#999999" />
</LinearLayout>
2.2 使用Recycler实现BottomDialog
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.BottomDialogActivity">
<!--底部菜单布局-->
<!--LinearLayout底部布局菜单-->
<!--<include layout="@layout/layout_bottom_sheet_linear" />-->
<!--RecyclerView底部布局菜单-->
<include layout="@layout/layout_bottom_dialog_recycler"/>
</android.support.design.widget.CoordinatorLayout>
底部菜单的布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/bottom_dialog_recyclerview"
xmlns:app = "http://schemas.android.com/apk/res-auto"
app:layout_behavior="@string/bottom_sheet_behavior"
app:behavior_peekHeight = "100dp"
app:behavior_hideable = "true"
>
</android.support.v7.widget.RecyclerView>
当使用这种方式,如果初始时候处于收起状态,那么当手指上滑时,会优先让底部菜单慢慢进入展开状态,当完全进入展开状态之后,开始让列表向底部滚动。而当手指下滑时,优先让列表向顶部滚动,当滚动到顶部之后,让菜单从展开状态慢慢进入到收起状态。
使用和上面的LinearLayout一样,不过注意一点是,在RecyclerView的adapter中的onCreateViewHolder方法中,在inflater item布局时,第二个parent参数必须设置null,否则只会显示一个item项;
@Override
public BottomDialogViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//注意这里的第二个参数必须为null,如果为parent时,由于嵌套的作用,只会显示一个item项
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.bottom_sheet_item, null, false);
return new BottomDialogViewHolder(view);
}
除此之外,我们还可以通过BottomSheetBehavior监听底部菜单各种状态的变化:
//监听底部菜单的状态变化
recyclerViewBottomSheetBehavior = BottomSheetBehavior.from(mRecyclerView);
recyclerViewBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
System.out.println("bottomSheet = [" + bottomSheet + "], newState = [" + newState + "]");
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
System.out.println("bottomSheet = [" + bottomSheet + "], slideOffset = [" + slideOffset + "]");
}
});
第一个回调函数用来监听BottomSheet状态的改变,也就是我们上面所说到的五种状态,而onSlide回调当中的slideOffset则用来监听底部菜单的偏移量:
- 当处于展开状态时,偏移量为1
- 当处于收起状态时,偏移量为0
- 当处于隐藏状态时,偏移量为-1
二、BottomSheetDialog详解
从继承关系看到BottomSheetDialog是support.v7下的扩展类,是Dialog的子类;
当我们通过setContentView方法传入自定义布局的时候,它会将这个布局使用CoordinatorLayout包裹起来,所以当使用BottomSheetDialog的时候,底部菜单和根布局并不属于同一个window;Dialog的根节点其实并不是通过setContentView()传入的View,它实际上是用CoordinatorLayout把它包装了起来,这才实现了拖动展开和隐藏的行为。
二、BottomSheetDialog类简单的使用方式
直接看下代码清晰明了:
private void showSharedDialog() {
if (bottomSheetDialog == null) {
bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setCancelable(true);
bottomSheetDialog.setCanceledOnTouchOutside(true);
//这里的layout是要显示的布局内容,里面可以放RecyclerView等
View view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_share_dialog, null);
bottomSheetDialog.setContentView(view);
bottomSheetDialog.show();
//以下设置是为了解决:下滑隐藏dialog后,再次调用show方法显示时,不能弹出Dialog----在真机测试时不写下面的方法也未发现问题
View delegateView = bottomSheetDialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet);
final BottomSheetBehavior<View> sheetBehavior = BottomSheetBehavior.from(delegateView);
sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
//在下滑隐藏结束时才会触发
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
bottomSheetDialog.dismiss();
sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
//每次滑动都会触发
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
System.out.println("onSlide = [" + bottomSheet + "], slideOffset = [" + slideOffset + "]");
}
});
} else {
bottomSheetDialog.show();
}
}
在代码中能够通过 BottomSheetBehavior.from(delegateView);获得与布局相关联的BottomSheetBehavior,它有五种状态:
- 1.STATE_EXPANDED:展开状态,显示完整布局;
- 2.STATE_COLLAPSED:折叠状态,显示设置peekHeight的高度,如果peekHeight的设置为0,则全部隐藏,与STATE_HIDDEN状态一样;
- 3.STATE_HIDDEN:隐藏状态,隐藏全部布局;
- 4.STATE_DRAGGING:拖拽时的状态;是个中间状态;
- 5.STATE_SETLLING:释放后的状态;是个中间状态;
前三个是稳定的状态,也就是释放后,肯定会达到前三个某个状态;
下面是bottom_sheet_share_dialog.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="?attr/actionBarSize">
<ImageView
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher_round"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:gravity="center"
android:text="条目一"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
三、BottomSheetDialog类复杂用法--里面使用RecyclerView
具体的看代码:
private void showBottomDialog() {
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
View view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_layout, null);
handleList(view);
bottomSheetDialog.setContentView(view);
bottomSheetDialog.setCancelable(true);
bottomSheetDialog.setCanceledOnTouchOutside(true);
bottomSheetDialog.show();
}
private void handleList(View view) {
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
MyRecyclerAdapter adapter = new MyRecyclerAdapter();
recyclerView.setAdapter(adapter);
adapter.setData(getDatas());
adapter.notifyDataSetChanged();
}
private List<String> getDatas() {
List<String> list = new ArrayList<>();
for (int i = 0 ;i<30 ;i++) {
list.add("android:"+i);
}
return list;
}
public static class MyRecyclerAdapter extends RecyclerView.Adapter{
private List<String> mData ;
public void setData(List<String> list) {
mData = list ;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.bottom_sheet_item,null));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
MyViewHolder myViewHolder = (MyViewHolder) holder;
myViewHolder.index.setText(mData.get(position)+"");
myViewHolder.name.setText(mData.get(position)+"");
}
@Override
public int getItemCount() {
return mData == null ? 0 :mData.size();
}
public static class MyViewHolder extends RecyclerView.ViewHolder{
private TextView name ;
private TextView index ;
public MyViewHolder(View itemView) {
super(itemView);
name = (TextView) itemView.findViewById(R.id.bottom_sheet_dialog_item_name);
index = (TextView) itemView.findViewById(R.id.bottom_sheet_dialog_item_index);
}
}
}
//下面是recycler.xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="?attr/actionBarSize">
<TextView
android:text="收藏全部"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView
android:text="播放列表(20)"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView
android:text="清空"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:background="@android:color/black"
android:layout_height="1dp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="@+id/recycler"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>
三、BottomSheetDialogFragment详解
首先看下系统源码:继承与AppCompatDialogFragment,而AppCompatDialogFragment继承与DialogFragment;系统重写了onCreateDialog方法,返回一个与上面分析的BottomSheetDialog一样,具体的使用用法和DialogFragment一样;
/**
* Modal bottom sheet. This is a version of {@link DialogFragment} that shows a bottom sheet
* using {@link BottomSheetDialog} instead of a floating dialog.
*/
public class BottomSheetDialogFragment extends AppCompatDialogFragment {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
return new BottomSheetDialog(getContext(), getTheme());
}
}
下面是具体使用:
首先定义一个Fragment继承BottomSheetDialogFragment,如下:
/**
* Created by serenitynanian on 2017/5/26.
*/
public class DemoBottomSheetDialogFragment extends BottomSheetDialogFragment {
public static DemoBottomSheetDialogFragment newInstance() {
Bundle args = new Bundle();
DemoBottomSheetDialogFragment fragment = new DemoBottomSheetDialogFragment();
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//填充自己的想要的布局
View view = inflater.inflate(R.layout.layout_bottom_sheet_linear, container, false);
return view;
}
}
弹出和隐藏的的实现:
public class BottomDialogFragmentActivity extends AppCompatActivity {
private DemoBottomSheetDialogFragment demoBottomSheetDialogFragment ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_dialog_fragment);
demoBottomSheetDialogFragment = DemoBottomSheetDialogFragment.newInstance();
//显示dialogFragment
showBottomSheetDialogFragment();
}
public void showdialog(View view) {
showBottomSheetDialogFragment();
}
public void hidedialog(View view) {
//隐藏dialogFragment
hideBottomSheetDialogFragment();
}
/**
* 显示BottomSheetDialogFragment
*/
private void hideBottomSheetDialogFragment() {
if (demoBottomSheetDialogFragment == null) {
demoBottomSheetDialogFragment.dismiss();
}
}
/**
* 显示BottomSheetDialogFragment
*/
private void showBottomSheetDialogFragment() {
demoBottomSheetDialogFragment.show(getSupportFragmentManager(),"bottomSheetDialogFragment");
}
}
四 、总结
1.其实核心就是使用CoordinatorLayout+bottom_sheet_behavior来实现拖拽;
2.使用BottomDialog时,必须使用CoordinatorLayout作为其父布局,并且需要设置bottom_sheet_behavior;
3.BottomSheetDialog和BottomSheetDialogFragment,只需要我们提供一个底部菜单的布局,在它们内部的实现当中,它再把我们传入的布局放入到CoordinatorLayout当中,之后再把这一整个包装好的布局作为Dialog的布局。