Support Design库中的BottomSheetDialog组件使用

首先来看这个组件使用的经典案例,微信公众号文章操作功能显示:


首先要知道BottomSheetDialog有两种,第一种弹出后不影响主界面交互,第二种弹出后主界面变暗不能交互,这里分别进行使用。

1.首先是普通的BottomSheetDialog:

(1)实现

使用方法是Behavier和CoordingLayout相结合。就像悬浮按钮和ToolBar等一样,这个组件要作为CoordingLayout的直接子组件并且通过设置behavior属性来告知Behavior他想要的特性。BottomSheetDialog没有具体的组件标签,所以这里直接将一个布局文件作为CoordingLayout的子组件:

<include android:id="@+id/sheet"
        layout="@layout/bottom_sheet"/>


然后看这个布局文件:
<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:behavior_hideable="true"
    app:behavior_peekHeight="0dp"
    app:layout_behavior="@string/bottom_sheet_behavior">
    <View
        android:background="#f00"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
    <View
        android:background="#0f0"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
    <View
        android:background="#00f"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
</LinearLayout>
重点就是几个app属性了,behavior就是核心属性了,告知自己是BottomSheet。

这里高度设置不要设置为match_parent,它不像列表的子组件布局一样能够自动调整为自适应。因为父布局CoordingLayout其实是一个FrameLayout,所以如果用match的话确实会铺满布局。

还有位置问题,因为我们想要让他在底部显示,所以这里要把layout_gravity设置为底部,默认是不会定位到底部的。

peekHeight:折叠后剩余的高度,虽然我看有一篇文档上说默认是0,但是如果我在这里不设置的话会出现控制它折叠无效果的情况。(有大神能解答一下?)

还有一个重要的属性hideable,默认是false,表示是否能够控制隐藏。只有设置为真后才能通过代码或者滑动控制折叠。


(2)state:如何对他的状态进行操作:

behavior=BottomSheetBehavior.from(findViewById(R.id.sheet));
        behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

如上,是通过BotomSheetBehavior对象实现的,当然也可以通过getState获取状态。BottomSheetDialog有这样几种状态:

  • STATE_COLLAPSED: 默认的折叠状态

  • STATE_DRAGGING : 过渡状态,此时用户正在向上或者向下拖动bottom sheet

  • STATE_SETTLING: 视图从脱离手指自由滑动到最终停下的这一小段时间

  • STATE_EXPANDED: bottom sheet 处于完全展开的状态

  • STATE_HIDDEN : 默认无此状态(可通过app:behavior_hideable 启用此状态),启用后用户将能通过向下滑动完全隐藏 bottom sheet



2.BottomSheetDialogFragment:

很明显微信的那个效果就是这一种了,弹出后主界面变暗,点击灰色部分底部栏消失(或者通过滑动)。

这种使用起来非常简单,也不需要依赖CoordingLayout了,首先先写一个布局文件(不需要给出behavior属性),然后写一个类继承BottomSheetDialogFragment并加载布局文件:

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.bottom2,null);
        return view;
    }
}

然后想使用的时候实例化这个类并调用show就可以了:

fragment=new CustomBottomSheetDialogFragment();
fragment.show(getSupportFragmentManager(),"dialog");


而且这个对象只有两个状态,就是弹出和隐藏。




发布了132 篇原创文章 · 获赞 55 · 访问量 23万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览