android - 我怎样才能在android中制作这样的对话框？

Question

我想实现这样的对话框

用户点击“图标”按钮，此对话框打开，用户通过按下它选择适当的图标，然后对话框关闭并返回给我这个图标的 ID。

我怎么能做到？

谢谢。

Answer 1

您想创建一个包含自定义网格的 alertDialog。在我的回答中，我假设 OP 一般想知道如何创建这样的对话框。因此我使用的是普通风格。如果您想使用深色样式，请创建自定义样式并将其用于您的AlertDialog.Builder：

AlertDialog.Builder builder = new AlertDialog.Builder(context, <YourCustomStyle>);

结果：

1. 为单个条目创建布局。由于 OP 只显示图标，我只使用ImageView. 例如，如果图标下面应该有文本，您只需在其TextView下方创建一个并用您的文本填充它。

view_icon_chooser_entry.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<ImageView
    android:id="@+id/image_choose_icon_entry"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:contentDescription="@null"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

2. 创建一个可以处理数据并创建布局的适配器。在我的示例中，我从 a 扩展，BaseAdapter因为这很容易做到。更现代一点的是使用 aRecyclerView并为其创建自己的自定义适配器。

AlertDialogImageAdapter.java：

public class AlertDialogImageAdapter extends BaseAdapter {
    private LayoutInflater layoutInflater;

    AlertDialogImageAdapter(Context context) {
        layoutInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return iconList.length;
    }

    @Override
    public Object getItem(int position) {
        return iconList[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @SuppressLint("InflateParams")
    @NonNull
    public View getView(int position, View convertView, @NonNull ViewGroup parent) {
        AlertDialogViewHolder alertDialogViewHolder;

        if (convertView == null) {
            // This is an alertDialog, therefore it has no root
            convertView = layoutInflater.inflate(R.layout.view_icon_chooser_entry, null);

            DisplayMetrics metrics = convertView.getResources().getDisplayMetrics();
            int screenWidth = metrics.widthPixels;

            convertView.setLayoutParams(new GridView.LayoutParams(screenWidth / 6, screenWidth / 6));
            alertDialogViewHolder = new AlertDialogViewHolder();
            alertDialogViewHolder.icon = convertView.findViewById(R.id.image_choose_icon_entry);
            convertView.setTag(alertDialogViewHolder);
        } else {
            alertDialogViewHolder = (AlertDialogViewHolder) convertView.getTag();
        }

        alertDialogViewHolder.icon.setAdjustViewBounds(true);
        alertDialogViewHolder.icon.setScaleType(ImageView.ScaleType.CENTER_CROP);
        alertDialogViewHolder.icon.setPadding(8, 8, 8, 8);
        alertDialogViewHolder.icon.setImageResource(iconList[position]);
        return convertView;
    }

    // This is your source for your icons, fill it with your own
    private Integer[] iconList = {
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda,
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda,
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda
    };

    private class AlertDialogViewHolder {
        ImageView icon;
    }
}

3. 然后，放置一种方法来AlertDialog使用您的自定义创建一个新方法，AlertDialogImageAdapter并使用网格进行布局。您可以使用 更改您拥有的列数setNumColumns(4)。

将此方法放在要显示警报对话框的位置并简单地调用它：

private void showAlertDialog(Context context) {
    GridView gridView = new GridView(context);
    gridView.setAdapter(new AlertDialogImageAdapter(context));
    gridView.setNumColumns(4);
    gridView.setGravity(Gravity.CENTER);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // TODO: Implement
            Toast.makeText(view.getContext(), "Clicked position is: " + position, Toast.LENGTH_LONG).show();
        }
    });

    AlertDialog.Builder builder = new AlertDialog.Builder(context);
    builder.setView(gridView);
    builder.setTitle(R.string.title_chose_icon);
    builder.show();
}

Answer 2

查看 API 演示应用程序中的片段部分。您可以使用一些对话框

Answer 3

我会建议你“模仿”对话框，而不是使用 android 的。为此，您可以创建第二个布局，其中包含深灰色背景和所有可点击的图标。当您调用对话框时，将调光设置为主布局并将带有图标的布局放在顶部。

我在我的应用程序中使用它。我将在 10 分钟内为您提供一些代码。