简单使用BottomSheetBehavior实现底部弹窗

简介: 这次带来的是BottomSheetBehavior的简单使用,BottomSheetBehavior是Android Support Library23.2中引入的,它可以轻松实现底部动作条功能。

这次带来的是BottomSheetBehavior的简单使用,BottomSheetBehavior是Android Support Library23.2中引入的,它可以轻松实现底部动作条功能。

img_6852dae42410c0530bba63e561e5672b.gif

使用方法

●xml布局

<?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=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        //按钮要使用布局包裹否则会浮在BottomSheetBehavior之上
        <Button
            android:layout_width="wrap_content"
            android:text="打开"
            android:id="@+id/bt"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/design_bottom_sheet1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" //这个高度决定了BottomSheetBehavior的总高度
        android:background="@color/colorAccent"
        app:behavior_hideable="true" //可以隐藏
        app:behavior_peekHeight="300dp" //设置弹出时的高度
        android:orientation="vertical"
        app:elevation="6dp"
        app:layout_behavior="@string/bottom_sheet_behavior" //这一句固定要加>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher"
            android:layout_marginTop="20dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

●Activity代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final BottomSheetBehavior bottomSheetBehavior=BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet1));
        //设置默认先隐藏
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        findViewById(R.id.bt).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            //根据状态不同显示隐藏
                if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }
            }
        });
        //设置监听事件   
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //拖动
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //状态变化
            }
        });
    }
}

扩展(BottomSheetDialogFragment实现底部弹窗)

img_f81033b34d1545a7097183953d7e98cf.gif

●xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher"
        android:layout_height="200dp" />
</RelativeLayout>

●BottomSheetDialogFragment代码

public class BottomSheetDialogFragmenttest extends BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.test,container,false);
    }
}

●Activity代码

findViewById(R.id.bt).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                BottomSheetDialogFragmenttest bottomSheetDialogFragmenttest=new BottomSheetDialogFragmenttest();
               bottomSheetDialogFragmenttest.show(getSupportFragmentManager(),BottomSheetDialogFragmenttest.class.getSimpleName());
            }
        });
目录
相关文章
|
6月前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
518 1
uniapp中间加号点击弹窗怎么实现?完整教程
|
小程序 前端开发 JavaScript
小程序点击按钮出现和隐藏遮罩层
小程序点击按钮出现和隐藏遮罩层
212 0
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
168 0
|
1月前
|
API C#
C#实现Winform程序右下角弹窗消息提示
C#实现Winform程序右下角弹窗消息提示
82 0
|
4月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
98 1
|
5月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
小程序 JavaScript
小程序底部动画弹框
小程序底部动画弹框
76 0
|
JSON 小程序 JavaScript
小程序地图插入图标后 怎么实现点击图标弹出窗口
小程序地图插入图标后 怎么实现点击图标弹出窗口
102 0
|
iOS开发
iOS开发- 点击通知栏回到顶部的动画效果
iOS开发- 点击通知栏回到顶部的动画效果
142 0
iOS开发- 点击通知栏回到顶部的动画效果