在 Android 中創建優雅的底部選項彈窗 (BottomSheetDialogFragment) 📱

在現代安卓應用中，底部彈窗 (BottomSheet) 是一種非常常見且用戶友好的交互方式，通常用于展示“更多選項”、“分享”或“操作列表”等場景。BottomSheetDialogFragment 是 Material Components 庫提供的一個標準實現，可以讓我們輕松創建這種效果。

這篇指南將帶你一步步創建一個功能完整的底部選項彈窗。

第一步：設計底部彈窗的布局 🎨

首先，我們需要為彈窗創建一個 XML 布局文件。這個文件定義了彈窗的外觀和內容。

我們將創建 bottom_sheet_layout.xml 文件，其中包含“舉報”和“分享”兩個選項。

res/layout/bottom_sheet_layout.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:paddingVertical="8dp"><LinearLayoutandroid:id="@+id/option_report"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"android:clickable="true"android:focusable="true"android:background="?attr/selectableItemBackground"android:paddingHorizontal="16dp"android:minHeight="48dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_report"android:contentDescription="@string/report_description" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:text="@string/report_text"android:textAppearance="?attr/textAppearanceBody1" /></LinearLayout><LinearLayoutandroid:id="@+id/option_share"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"android:clickable="true"android:focusable="true"android:background="?attr/selectableItemBackground"android:paddingHorizontal="16dp"android:minHeight="48dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_share"android:contentDescription="@string/share_description" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:text="@string/share_text"android:textAppearance="?attr/textAppearanceBody1" /></LinearLayout></LinearLayout>

? 優化點說明:

• android:paddingVertical: 使用 paddingVertical 和 paddingHorizontal 替代 paddingTop/Bottom 和 paddingStart/End，使代碼更簡潔。
• ?attr/selectableItemBackground: 這是一個非常實用的屬性，它能為列表項提供一個標準的、帶波紋效果的點擊反饋，增強用戶體驗。
• 字符串資源: 建議將所有硬編碼的文本（如 “舉報”）和內容描述提取到 strings.xml 文件中，便于國際化和維護。

---

第二步：創建 BottomSheetDialogFragment 類 ??

接下來，我們創建一個繼承自 BottomSheetDialogFragment 的 Java 類。這個類負責將上一步創建的布局加載到彈窗中，并處理其內部的交互邏輯。

MoreOptionsBottomSheetDialogFragment.java

/** Copyright (c) 2025 Yan Zhizhong* All rights reserved.*/package top.mryan2005.CantoneseLanguageDictionary.App;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.google.android.material.bottomsheet.BottomSheetDialogFragment;public class MoreOptionsBottomSheetDialogFragment extends BottomSheetDialogFragment {@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {// 加載布局文件return inflater.inflate(R.layout.bottom_sheet_layout, container, false);}@Overridepublic void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);// 獲取布局中的視圖LinearLayout reportOption = view.findViewById(R.id.option_report);LinearLayout shareOption = view.findViewById(R.id.option_share);// 為“舉報”選項設置點擊事件reportOption.setOnClickListener(v -> {// 在這里處理舉報邏輯Toast.makeText(getContext(), "已舉報", Toast.LENGTH_SHORT).show();dismiss(); // 點擊后關閉彈窗});// 為“分享”選項設置點擊事件shareOption.setOnClickListener(v -> {// 在這里處理分享邏輯Toast.makeText(getContext(), "分享...", Toast.LENGTH_SHORT).show();dismiss(); // 點擊后關閉彈窗});}
}

? 優化點說明:

• onViewCreated(): 這是處理 Fragment 視圖中控件的最佳位置。在 onCreateView() 返回視圖后，系統會立即調用此方法。
• 事件處理: 我們在這里為“舉報”和“分享”選項添加了點擊監聽器。當用戶點擊某個選項時，可以執行相應的操作（例如彈出一個 Toast 提示），并通過調用 dismiss() 方法來關閉底部彈窗。

---

第三步：觸發并顯示底部彈窗 🚀

最后一步是在你的 Activity 或 Fragment 中，通過點擊一個按鈕或其他交互來顯示我們剛剛創建的底部彈窗。

假設你有一個名為 moreButton 的按鈕，可以這樣設置它的點擊事件：

// 在你的 Activity 或 Fragment 中
moreButton.setOnClickListener(v -> {MoreOptionsBottomSheetDialogFragment bottomSheet = new MoreOptionsBottomSheetDialogFragment();bottomSheet.show(getSupportFragmentManager(), "MoreOptionsBottomSheetDialogFragmentTag");
});

? 代碼說明:

• getSupportFragmentManager(): 獲取用于管理 Fragment 的 FragmentManager 實例。
• bottomSheet.show(...): 這個方法會負責將 BottomSheetDialogFragment 添加到屏幕上并以動畫形式滑出。
• Tag: 第二個參數是一個唯一的字符串標簽（Tag），用于在需要時通過 FragmentManager 找到這個 Fragment 實例。

通過以上三個步驟，你就成功地在你的應用中集成了一個美觀且功能完備的底部選項彈窗！