Android 自定义单选 Dialog 的使用与实现

在 Android 开发中,Dialog 是一种常用的界面元素,它们可以帮助我们与用户进行交互。其中,单选 Dialog 常用于需要让用户在多个选项中选择一个的场景。虽然 Android 本身提供了简单的 AlertDialog,但在某些情况下,我们希望自定义更复杂的 UI 来满足特定需求。本文将介绍如何在 Android 中实现一个自定义单选 Dialog。

1. 自定义单选 Dialog 的基本思路

自定义单选 Dialog 的基本思路是使用 Dialog 类并提供一个自定义布局。可以通过设置 RecyclerView 来展示选项,并监听用户的选择。这里我们将分几个步骤来实现它。

2. 步骤细分

2.1 创建布局文件

首先,我们需要为 Dialog 创建一个自定义布局。创建一个新的 XML 文件 dialog_single_choice.xml,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选择一个选项"
        android:textSize="18sp"
        android:textStyle="bold" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp" />

    <Button
        android:id="@+id/button_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确认"
        android:layout_gravity="end"
        android:layout_marginTop="16dp"/>
</LinearLayout>

2.2 创建 RecyclerView 适配器

其次,我们需要创建一个 RecyclerView 适配器,用于显示选项列表。代码如下:

public class ChoiceAdapter extends RecyclerView.Adapter<ChoiceAdapter.ViewHolder> {
    private List<String> choices;
    private int selectedIndex = -1;

    public ChoiceAdapter(List<String> choices) {
        this.choices = choices;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_single_choice, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.bind(choices.get(position), position);
    }

    @Override
    public int getItemCount() {
        return choices.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(android.R.id.text1);
            itemView.setOnClickListener(v -> {
                selectedIndex = getAdapterPosition();
                notifyDataSetChanged();
            });
        }

        public void bind(String choice, int position) {
            textView.setText(choice);
            itemView.setBackgroundColor(selectedIndex == position ? Color.LTGRAY : Color.TRANSPARENT);
        }
    }

    public int getSelectedIndex() {
        return selectedIndex;
    }
}

2.3 显示 Dialog

接着,我们需要创建一个方法来显示 Dialog。代码如下:

public void showSingleChoiceDialog(Context context, List<String> choices, DialogInterface.OnClickListener listener) {
    Dialog dialog = new Dialog(context);
    dialog.setContentView(R.layout.dialog_single_choice);
    
    RecyclerView recyclerView = dialog.findViewById(R.id.recycler_view);
    Button buttonConfirm = dialog.findViewById(R.id.button_confirm);

    ChoiceAdapter adapter = new ChoiceAdapter(choices);
    recyclerView.setLayoutManager(new LinearLayoutManager(context));
    recyclerView.setAdapter(adapter);

    buttonConfirm.setOnClickListener(v -> {
        int selectedPosition = adapter.getSelectedIndex();
        if (selectedPosition >= 0) {
            listener.onClick(dialog, selectedPosition);
            dialog.dismiss();
        } else {
            Toast.makeText(context, "请做出选择", Toast.LENGTH_SHORT).show();
        }
    });

    dialog.show();
}

2.4 使用 Dialog

最后,我们可以在 Activity 或 Fragment 中调用上述方法来显示 Dialog,示例代码如下:

List<String> options = Arrays.asList("选项1", "选项2", "选项3");
showSingleChoiceDialog(this, options, (dialog, which) -> {
    // 处理用户选择
    Toast.makeText(this, "选择了: " + options.get(which), Toast.LENGTH_SHORT).show();
});

3. 流程图和序列图

我们可以使用 Mermaid 语法绘制一个简单的甘特图和序列图来帮助理解这个过程。

3.1 甘特图

gantt
    title 自定义单选 Dialog 实现流程
    section 创建布局
    创建 dialog_single_choice.xml: 2023-10-01, 1d
    section 创建适配器
    实现 ChoiceAdapter: 2023-10-02, 2d
    section 显示 Dialog
    在 Activity 中调用方法: 2023-10-04, 1d

3.2 序列图

sequenceDiagram
    participant U 用户
    participant A Activity
    participant D Dialog
    U->>A: 点击按钮
    A->>D: 显示自定义单选 Dialog
    D->>U: 显示选项列表
    U->>D: 选择选项
    U->>D: 点击确认
    D->>A: 返回选择的选项
    A->>U: 显示选择结果

结尾

自定义单选 Dialog 可以为用户提供更友好的交互体验。通过以上步骤,我们实现了一个简单的单选 Dialog,并展示了如何使用 RecyclerView 适配器展示选项。这样的实现可以在需要更高自定义性的 UI 时发挥巨大作用,希望本文能够对你们的 Android 开发之旅有所帮助。如果您有任何疑问或建议,请随时提出!