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>

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

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;
    }
}

1. 然后，使用自定义 AlertDialogImageAdapter 放置一个方法来创建新的 AlertDialog，并使用网格进行布局。您可以使用 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();
}