欢迎访问宙启技术站
智能推送

怎么在Android中使用BottomSheetDialog实现一个底部对话框

发布时间:2023-05-13 20:57:56

BottomSheetDialog 是一个自上而下展示的 Dialog。跟传统的 Dialog 不同的是,它只占用了屏幕的一部分,在整个窗口开发中能够给人一种轻盈感,同时也方便了用户进行一些关于底部的操作。

在 Android 中使用 BottomSheetDialog 实现一个底部对话框,可以通过以下步骤来完成:

1. 创建项目和布局文件

* 创建一个新的 Android Studio 项目,并命名为 BottomSheetDialogDemo 。

* 打开 activity_main.xml 布局文件,添加一个 FloatingActionButton 和一个 TextView ,如下所示:

            <?xml version="1.0" encoding="utf-8"?>
            <RelativeLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/activity_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffffff">

                <TextView
                    android:id="@+id/tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World!"
                    android:textSize="21sp"/>

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="20dp"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/ic_add"/>

            </RelativeLayout>
        

2. 添加依赖库

* 打开 app/build.gradle 文件,在 dependencies 中添加以下代码:

            dependencies {
                implementation 'com.google.android.material:material:1.2.0'
            }
        

3. 创建 BottomSheetDialog

* 在 MainActivity.java 文件中,添加以下代码:

            public class MainActivity extends AppCompatActivity {

                private FloatingActionButton fab;
                private TextView tv;

                @Override
                protected void onCreate(Bundle savedInstanceState) {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.activity_main);

                    fab = findViewById(R.id.fab);
                    tv = findViewById(R.id.tv);

                    fab.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
                            View bottomSheetView = LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet, null);
                            bottomSheetDialog.setContentView(bottomSheetView);
                            bottomSheetDialog.show();
                        }
                    });

                }
            }
        

4. 创建 BottomSheetDialog 布局

* 在 res/layout 文件夹中创建一个名为 bottom_sheet.xml 的布局文件,并添加以下代码:

            <?xml version="1.0" encoding="utf-8"?>
            <LinearLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Select an option"
                    android:textSize="18sp"
                    android:textColor="#000000"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Option 1"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Option 2"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Option 3"/>

            </LinearLayout>
        

5. 运行程序

* 运行程序,并点击 FAB,会看到一个底部对话框弹出。

通过以上步骤,你已经成功地在 Android 中使用 BottomSheetDialog 实现了一个底部对话框。同时,你也可以修改 bottom_sheet.xml 布局文件,加入更多的控件,以便满足你的需求。