BottomSheets使用总结

BottomSheets是一个底部可操作的布局,包含有BottomSheet,BottomSheetDialog,BottomSheetDialogFragment.可以拖拽滑动,可以做菜单,对话框,现在用到这个的还不多。项目中用到这个东西,简单的做个总结,碰到的问题也记一下。

碰到的问题就是,需要改变弹窗的高度!解决方法看下面2代码,注释很清楚。
1.Bottomsheet使用
引入desigin包,配合CoordinatorLayout空间使用
效果如下:

Untitled.gif

实现代码:
布局文件

<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下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容