美文网首页Android UIMaterialDesign4Appsupport design
BottomSheet、BottomSheetDialog使用详

BottomSheet、BottomSheetDialog使用详

作者: 丿歌吟有梦 | 来源:发表于2016-10-31 11:37 被阅读10768次

BottomSheet使用详解

Android Support Library 23.2里的 Design Support Library新加了一个Bottom Sheets控件,Bottom Sheets顾名思义就是底部操作控件,用于在屏幕底部创建一个可滑动关闭的视图,可以替代对话框和菜单。其中包含BottomSheets、BottomSheetDialog和BottomSheetDialogFragment三种可以使用。

BottomSheets常见的效果如图,并且在国内的知乎、百度地图上也是可以看到效果。

这里写图片描述 这里写图片描述

首先我们学习使用BottomSheets,BottomSheets其实也是依赖于Behavior机制的使用。
先引用依赖,最新的design包已经到24了

    compile 'com.android.support:design:24.2.1'

BottomSheets

在布局文件xml中的使用,BottomSheets需要配合CoordinatorLayout控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/cl"
    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"
    android:fitsSystemWindows="true">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_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">
            <!-- 你自己的代码-->
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

其中包含三个属性

app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior"

app:behavior_peekHeight="50dp" peekHeight是当Bottom Sheets关闭的时候,底部我们能看到的高度,默认是0不可见。

app:behavior_hideable="true" hideable是当我们拖拽下拉的时候,bottom sheet是否能全部隐藏。

layout_behavior指向bottom_sheet_behavior,代表这是一个bottom Sheets

在java代码中的使用

BottomSheetBehavior behavior;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);
        View bottomSheet = findViewById(R.id.bottom_sheet);
        behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState)
            {
                //这里是bottomSheet状态的改变
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset)
            {
                //这里是拖拽中的回调,根据slideOffset可以做一些动画
            }
        });
    }

behavior_hideable对应代码 behavior.setHideable(false);
behavior_peekHeight对应代码 behavior.setPeekHeight(50);

setBottomSheetCallback可以监听回调的状态,onStateChanged监听状态的改变,onSlide是拖拽的回调,onStateChanged可以监听到的回调一共有5种:

  • STATE_HIDDEN: 隐藏状态。默认是false,可通过app:behavior_hideable属性设置。
  • STATE_COLLAPSED: 折叠关闭状态。可通过app:behavior_peekHeight来设置显示的高度,peekHeight默认是0。
  • STATE_DRAGGING: 被拖拽状态
  • STATE_SETTLING: 拖拽松开之后到达终点位置(collapsed or expanded)前的状态。
  • STATE_EXPANDED: 完全展开的状态。
    BottomSheets控件配合NestedScrollView、RecyclerView使用效果会更好,合理的使用让APP逼格满满。

我们需要在按钮按钮上添加对BottomSheets的显示和隐藏

if(behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}else {
    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}

效果如图:


效果图

design24.2.1的BottomSheets和23.2.0的BottomSheet有很大的区别,design23.2.0的包中如果你使用了BottomSheet,可以在屏幕外任何位置上拉即可拉出来布局,在24.2.1中没有了这个效果。

BottomSheetDialog

BottomSheetDialog应该是最实用的控件,也是使用率非常高的控件。它可以替代大多数网格显示和列表展示的dialog和popupwindow,默认宽度撑满,并且在BottomSheetDialog 区域中向下滑动也让对话框消失。

首先写一个dialog展示的xml,dialog中xml可以不用被CoordinatorLayout包裹,但是还是推荐实用推荐的滑动控件NestedScrollView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:onClick="doclick"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="啦啦啦啦啦啦啦啦啦"
            android:textColor="@color/white"
            android:textSize="18sp"/>

        <ImageView
            android:onClick="doclick"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/banner"/>
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

编写java代码

BottomSheetDialog dialog = new BottomSheetDialog(this);
View view = getLayoutInflater().inflate(R.layout.dialog_bottom_sheet, null);
dialog.setContentView(view);
dialog.show();

只需要四行我们就可以展示BottomSheets效果的dialog,高度为你设置的behavior_peekHeight或者默认高度,宽度撑满。在很多情况底部显示dialog的时候,都可以考虑实用BottomSheetDialog来实现。
效果如图:


这里写图片描述

BottomSheetDialogFragment

BottomSheetDialogFragment可以帮助我们实现全屏的BottomSheet展示效果。新建一个类继承BottomSheetDialogFragment

xml使用BottomSheetDialog的布局样式,我们直接看java代码

public class FullSheetDialogFragment extends BottomSheetDialogFragment {
    private BottomSheetBehavior mBehavior;
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState)
    {
        BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
        View view = View.inflate(getContext(), R.layout.dialog_bottom_sheet, null);
        dialog.setContentView(view);
        mBehavior = BottomSheetBehavior.from((View) view.getParent());
        return dialog;
    }

    @Override
    public void onStart()
    {
        super.onStart();
        //默认全屏展开
        mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }

    public void doclick(View v)
    {
        //点击任意布局关闭
        mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }
}

调用BottomSheetDialogFragment展示

new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");

BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根据情况选择。
效果如图:


这里写图片描述

BottomSheetDialog就介绍到此,如果有错误请指出,谢谢。

Demo下载
https://github.com/itdais/MaterialDesignDing

参考:
泡在网上的日子BottomSheets的使用

个人网站 歌吟有梦 itdais.com

更多内容可以关注我的公众号:丁军伟Dev(或者搜索DingAndroid)


丁军伟Dev

相关文章

网友评论

  • freddyyao:使用 BottomSheetDialog 的时候,为啥推荐 顶层嵌套NestedScrollView
  • 叶落无痕52:请问能不能做到允许下拉关闭,但是禁止上拉呢?
  • 彼岸青园:能不能不全屏展开啊,之展开到指定高度,然后就可以滚动Dialog 内部的RecyclerView呢
  • Txy_d1d2:BottomSheetDialog 能否关闭半透明的阴影效果呢?
    4e8aa76d12ec:mBottomSheetDialog.getWindow().setBackgroundDrawable(new ColorDrawable());
  • MugWorld:BottomSheetDialog在全屏状态下弹出,状态栏也一起显示,怎么解决,求帮助~
    Txy_d1d2:BottomSheetDialog能否关闭半透明阴影的效果?
    MugWorld:原来是和那个黑色的问题一样,不过又出现别的问题了,我再看看...
  • 双鱼大猫:这种效果看起来项目里用的不多
  • lygttpod:用BottomSheetDialog的时候顶部状态栏变黑了,这个问题怎么处理
    丿歌吟有梦:@lygttpod 这个问题确实存在,解决方法可以看这篇博客:
    解决使用BottomSheetDialog时状态栏变黑的问题 (http://www.jianshu.com/p/8d43c222b551)
  • 安静的学点东西:如果我不想让他拖动,怎么做? 点击外部隐藏!
    丿歌吟有梦:@安静的学点东西 如果不想拖动 还是直接用Dialog更好。
  • 迷失的小白:恶魔摸摸摸😚😉😜😜😉😘😘😁😝😁😁🐷🐦🐠🐠🐟🐟🐟🌴🎄🍙🍙🍙
  • songdehuai:github里面有惊喜!
    丿歌吟有梦:@别叫我技术帝 有啥惊喜!

本文标题:BottomSheet、BottomSheetDialog使用详

本文链接:https://www.haomeiwen.com/subject/srqputtx.html