Android 中的模态底页及示例

在 Android 应用开发中，模态底页（Modal Bottom Sheet）是一种常用的 UI 设计元素。它通常以卡片形式出现在屏幕底部，可以显示和隐藏，提供一些操作或选择的选项。本文将介绍 Android 中如何实现模态底页及示例。

实现模态底页的方式

自定义布局

自定义布局是一种实现模态底页的方式。首先，在布局文件中定义底页的布局，然后在代码中使用 BottomSheetDialog 将布局作为参数传入即可实现。例如：

<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="确定要删除吗？"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_delete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="删除" />

</LinearLayout>

BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(context);
bottomSheetDialog.setContentView(R.layout.bottom_sheet_layout);
bottomSheetDialog.show();

使用系统提供的布局

Android 也提供了一些预定义的底页布局，例如 BottomSheetMenu 和 BottomSheetDialogFragment。使用这些布局可以更快速地实现模态底页，同时还提供了一些默认的交互效果。例如：

BottomSheetMenuDialog bottomSheetMenuDialog = new BottomSheetMenuDialog.Builder(context)
        .setTitle("选择性别")
        .addMenu("男")
        .addMenu("女")
        .setListener(new BottomSheetMenuDialog.OnClickListener() {
            @Override
            public void onClick(String text) {
                // 处理选择结果
            }
        })
        .create();
bottomSheetMenuDialog.show();

示例代码

下面是一个完整的示例代码，演示了如何使用自定义布局实现模态底页。首先在布局文件中定义底页布局 bottom_sheet_layout.xml，然后在代码中使用 BottomSheetDialog 将其作为参数传入。同时还添加了底页隐藏后自动销毁的逻辑，避免了内存泄漏问题。

布局文件：bottom_sheet_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="确定要删除吗？"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_delete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="删除" />

</LinearLayout>

Java 代码：

public class MainActivity extends AppCompatActivity {

    private BottomSheetDialog bottomSheetDialog;

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

        Button btnShowBottomSheet = findViewById(R.id.btn_show_bottom_sheet);
        btnShowBottomSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showBottomSheet();
            }
        });
    }

    private void showBottomSheet() {
        View bottomSheetView = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_layout, null);
        bottomSheetDialog = new BottomSheetDialog(this);
        bottomSheetDialog.setContentView(bottomSheetView);
        bottomSheetDialog.show();

        Button btnDelete = bottomSheetView.findViewById(R.id.btn_delete);
        btnDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 处理删除操作
                bottomSheetDialog.dismiss();
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 销毁底页，避免内存泄漏
        if (bottomSheetDialog != null) {
            bottomSheetDialog.dismiss();
            bottomSheetDialog = null;
        }
    }
}

以上就是关于 Android 中模态底页的实现和示例代码的介绍。通过自定义布局和系统提供的布局，我们可以快速实现模态底页，并提供一些交互效果，提升应用的用户体验。