Bottom Sheets（底部动作条）使用介绍

最新推荐文章于 2024-08-12 08:42:20 发布

liyx2018

最新推荐文章于 2024-08-12 08:42:20 发布

阅读量2.5k

点赞数

分类专栏： Android新特性文章标签： AndroidStudio BottomSheets

本文链接：https://blog.csdn.net/liyx2018/article/details/51450858

版权

Android新特性专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Bottom Sheets是Android Support Library 23.2出现的新特性，Github在这之前就有开源的BottomSheet效果，感兴趣的可以搜索研究下。

下边是整合BottomSheets的一些知识点：

底部动作条

底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

使用

底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。

底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。宫格布局可以增加视觉的清晰度。

你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作，比如做为进入其他 app 的入口(通过 app 的 icon 进入)。

Bottom Sheet 一共有五个状态回调：

STATE_COLLAPSED
折叠状态。可通过app:behavior_peekHeight来设置默认显示的高度。
STATE_SETTING
拖拽松开之后到达终点位置（collapsed or expanded）前的状态。
STATE_EXPANDED
完全展开的状态。
STATE_HIDDEN
隐藏状态。默认是false，可通过app:behavior_hideable属性设置。
STATE_DRAGGING
被拖拽状态

BottomSheet的使用：

1、在AndroidStudio的build.gradle文件下，依赖 compile'com.android.support:design:23.2.0'

2、新建activity_main.xml布局文件；此处需要注意的是必须在CoordinatorLayout视图下添加一个View属性是 app:layout_behavior="android.support.design.widget.BottomSheetBehavior"的控件。这个控件可以是NestedScrollView，也可以是RecyclerView。

<span style="font-size:18px;"><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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <Button
                android:id="@+id/button_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="STATE_EXPANDED"
                android:padding="16dp"
                android:layout_margin="8dp"
                android:textColor="@android:color/white"
                android:background="#ff669900"/>

            <Button
                android:id="@+id/button_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:layout_margin="8dp"
                android:text="STATE_COLLAPSED"
                android:textColor="@android:color/white"
                android:background="#ff33b5e5"/>

            <Button
                android:id="@+id/button_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:layout_margin="8dp"
                android:text="BottomSheetDialog"
                android:textColor="@android:color/white"
                android:background="#ffcc0000"/>

        </LinearLayout>

    </ScrollView>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:clipToPadding="true"
        android:background="#ffffbb33"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        >
        <!--此处用于填充BottomSheets的自定义样式-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。宫格布局可以增加视觉的清晰度。你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作，比如做为进入其他 app 的入口(通过 app 的 icon 进入)。"
            android:padding="16dp"
            android:textSize="16sp"/>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout></span>

3、然后就是MAinActivity的代码，直接粘贴过来，里边也有BottomSheets的用法：

package com.glodon.bottomsheetsdemo;

import android.os.Bundle;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private BottomSheetBehavior<View> mBottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View bottomSheet = findViewById( R.id.bottom_sheet );
        Button button1 = (Button) findViewById( R.id.button_1 );
        Button button2 = (Button) findViewById( R.id.button_2 );
        Button button3 = (Button) findViewById( R.id.button_3 );

        button1.setOnClickListener(this);
        button2.setOnClickListener(this);
        button3.setOnClickListener(this);

        mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        mBottomSheetBehavior.setPeekHeight(300);//设置内容栏默认高度
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

        mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    mBottomSheetBehavior.setPeekHeight(0);//设置内容栏默认高度为0，即用户看不到
                }
            }

            @Override
            public void onSlide(View bottomSheet, float slideOffset) {
            }
        });

    }

    @Override
    public void onClick(View v) {
        switch( v.getId() ) {
            case R.id.button_1: {
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                break;
            }
            case R.id.button_2: {
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                break;
            }
            case R.id.button_3: {
                final BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity.this);
                bottomSheetDialog.setContentView(R.layout.bottom_sheet_dialog_layout);
                bottomSheetDialog.findViewById(R.id.tv_dialog_cancel).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        bottomSheetDialog.dismiss();
                    }
                });
                bottomSheetDialog.show();
                break;
            }
        }
    }
}

效果图：