Android BottomSheetDialog使用实现底部拖动弹窗

2020-09-25 13:27:45 浏览数 (1)

为了不浪费你的时间,先看一下效果图。

然后进入实际操作环节。

  平时我们使用其他APP时对于评论这快,通常都是点击之后底部弹窗一个窗口,高度是各不相同,而且如果没有占满屏幕的话还可以往上拖,直到吸附在顶部,感觉是挺有意思的,但其实做起来没有那么难,这篇文章就是以一个新手刚接触这个功能的视觉来写的,好了,新建一个项目吧。

BottomDialogDemo建好之后先在app下的build.gradle中添加一个依赖

代码语言:javascript复制
implementation 'com.google.android.material:material:1.0.0'

添加位置如下图所示,添加只有记得右上角Sync一下,否则不生效的。

然后创建一个弹窗的dialog_bottom_new.xml布局。 代码如下:

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/shape_dialog_bg">


    <TextView
        android:text="弹窗标题"
        android:gravity="center"
        android:textColor="#000"
        android:textSize="16sp"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <View
        android:layout_width="match_parent"
        android:background="#000"
        android:layout_height="0.4dp"/>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="vertical"

            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:src="@drawable/code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
            <ImageView
                android:src="@drawable/code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>



</LinearLayout>

里面的圆角背景shape_dialog_bg.xml是这个

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp" />
    <solid android:color="#fff" />
</shape>

里面的图片是这个

然后修改activity_main.xml布局代码,增加一个Button

代码语言:javascript复制
<Button
        android:id="@ id/botton_new_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="doClick"
        android:text="New Bottom" />

然后在MainActivity中写入一个方法:

代码语言:javascript复制
	public void doClick(View view) {
        BottomSheetDialog mBottomSheetDialog = new BottomSheetDialog(this);
        View view1 = getLayoutInflater().inflate(R.layout.dialog_bottom_new, null);
        mBottomSheetDialog.setContentView(view1);
        mBottomSheetDialog.getWindow().findViewById(R.id.design_bottom_sheet).setBackgroundColor(Color.TRANSPARENT);
        mBottomSheetDialog.show();
    }

运行一下:

拜拜~

0 人点赞