In practical application development, it is almost impossible to use the system dialog box. According to the development process, UI engineers will give each popover style, so in actual development are custom popover. Even if the use of the place is not much, but we also need to understand and skilled use of it, the following for you to provide a variety of system dialog box implementation.

directory

Several types and realization of system dialog box

In the actual development of the project, almost no system dialog box is used. The reasons are as follows:

  • The style is too simple to meet the needs of most real projects.
  • The style of the dialog box will vary depending on the phone’s operating system. A unified style cannot be achieved.
  • What can be done is too simple.

Here, attach the string.xml file where the text appears in the code below.

<string name="dialog_normal_content"> I am a normal dialog</string> <string </string> <string name="dialog_btn_confirm_text"> Confirm </string> <string name="dialog_btn_cancel_text"> Cancel </string> <string name="dialog_btn_neutral_text"> Ignore </string> <string Name =" dialog_bTN_confirm_hint_TEXT "> You clicked on the OK button </string> <string name=" dialog_bTN_cancel_hint_TEXT "> You clicked on the cancel button </string> <string name="dialog_btn_neutral_hint_text"> You clicked the ignore button </string>Copy the code

1. Common dialog box

In actual project development, this type of dialog is used more than other types of dialog. But considering the UI unification issue, it will be used very rarely.

Run screenshot:

Code:

Private void showNormalDialog(){normalDialog = new Alertdialog.builder (this); // setTitle normaldialog.settitle (getString(r.string.dialog_normal_text)); // setIcon normaldialog.seticon (r.map.ic_launcher_round); Normaldialog.setmessage (getString(r.string.dialog_normal_content)); / / set button normalDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this,getString(R.string.dialog_btn_confirm_hint_text) ,Toast.LENGTH_SHORT).show(); dialog.dismiss(); }}); // Create and display normaldialog.create ().show(); }Copy the code

All system dialogs support chain calls, for example:

    new AlertDialog.Builder(this)
            .setTitle(getString(R.string.dialog_normal_text))
            .setIcon(R.mipmap.ic_launcher_round)
            .setMessage(getString(R.string.dialog_normal_content))
            .setPositiveButton(getString(R.string.dialog_btn_confirm_text)
                    , new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    Toast.makeText(DialogActivity.this,getString(R.string.dialog_btn_confirm_hint_text)
                            ,Toast.LENGTH_SHORT).show();
                    dialog.dismiss();
                }
            })
            .create()
            .show();
Copy the code

The following code can be called using the chain, so it is not shown here.

2. Normal dialog box (multi-button)

A maximum of three buttons can appear in the system dialog box, PositiveButton (OK), NegativeButton (cancel), and NeutralButton (ignore).

Run screenshot:

Code:

private void showNormalMoreButtonDialog(){ AlertDialog.Builder normalMoreButtonDialog = new AlertDialog.Builder(this); normalMoreButtonDialog.setTitle(getString(R.string.dialog_normal_more_button_text)); normalMoreButtonDialog.setIcon(R.mipmap.ic_launcher_round); normalMoreButtonDialog.setMessage(getString(R.string.dialog_normal_more_button_content)); / / set button normalMoreButtonDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this ,getString(R.string.dialog_btn_confirm_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); }}); normalMoreButtonDialog.setNegativeButton(getString(R.string.dialog_btn_cancel_text) , new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this, getString(R.string.dialog_btn_cancel_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); }}); normalMoreButtonDialog.setNeutralButton(getString(R.string.dialog_btn_neutral_text) , new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this, getString(R.string.dialog_btn_neutral_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); }}); normalMoreButtonDialog.create().show(); }Copy the code

You can also use the following implementation, and the above code is the same effect.

private void showNormalMoreButtonDialog(){ DialogInterface.OnClickListener setListener = null; AlertDialog.Builder normalMoreButtonDialog = new AlertDialog.Builder(this); normalMoreButtonDialog.setTitle(getString(R.string.dialog_normal_more_button_text)); normalMoreButtonDialog.setIcon(R.mipmap.ic_launcher_round); normalMoreButtonDialog.setMessage(getString(R.string.dialog_normal_more_button_content)); setListener = new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { switch (which){ case DialogInterface.BUTTON_POSITIVE: Toast.makeText(DialogActivity.this, getString(R.string.dialog_btn_confirm_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); break; case DialogInterface.BUTTON_NEUTRAL: Toast.makeText(DialogActivity.this ,getString(R.string.dialog_btn_neutral_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); break; case DialogInterface.BUTTON_NEGATIVE: Toast.makeText(DialogActivity.this ,getString(R.string.dialog_btn_cancel_hint_text),Toast.LENGTH_SHORT).show(); dialog.dismiss(); break; }}}; normalMoreButtonDialog.setPositiveButton(getString(R.string.dialog_btn_confirm_text),setListener); normalMoreButtonDialog.setNegativeButton(getString(R.string.dialog_btn_cancel_text),setListener); normalMoreButtonDialog.setNeutralButton(getString(R.string.dialog_btn_neutral_text),setListener); normalMoreButtonDialog.create().show(); }Copy the code

3. General list dialog box

This type of dialog box can implement simple lists.

Run screenshot:

Code:

Private void showListDialog(){final String listItems[] = new String[]{"listItems1","listItems2","listItems3", "listItems4","listItems5","listItems6"}; AlertDialog.Builder listDialog = new AlertDialog.Builder(this); listDialog.setTitle(getString(R.string.dialog_list_text)); listDialog.setIcon(R.mipmap.ic_launcher_round); /* setMessage() cannot be used to setItems: ListItems [] - > array listener list item - > callback interface * / listDialog setItems (listItems, new DialogInterface. An OnClickListener () {@ Override  public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this,listItems[which],Toast.LENGTH_SHORT).show(); }}); / / set button listDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); }}); listDialog.create().show(); }Copy the code

4. Radio dialog box

Run screenshot:

Code:

private void showRadioDialog(){ final String radioItems[] = new String[]{"radioItem1","radioItem1","radioItem1","radioItem1"}; AlertDialog.Builder radioDialog = new AlertDialog.Builder(this); radioDialog.setTitle(getString(R.string.dialog_radio_text)); radioDialog.setIcon(R.mipmap.ic_launcher_round); SetMessage () setSingleChoiceItems items: radioItems[] -> array of radio options checkItem: 0 - > the default selected item listener - > callback interface * / radioDialog setSingleChoiceItems (radioItems, 0, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this,radioItems[which],Toast.LENGTH_SHORT).show(); }}); / / set button radioDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); }}); radioDialog.create().show(); }Copy the code

5. Multiple Selection dialog box

Run screenshot:

Private void showCheckBoxDialog(){private void showCheckBoxDialog(){

final String checkBoxItems[] = new String[]{"checkBoxItems1","checkBoxItems2", "checkBoxItems3","checkBoxItems4"}; final boolean isCheck[] = new boolean[]{false,true,true,false}; AlertDialog.Builder checkBoxDialog = new AlertDialog.Builder(this); checkBoxDialog.setTitle(getString(R.string.dialog_check_box_text)); checkBoxDialog.setIcon(R.mipmap.ic_launcher_round); SetMessage () setMultiChoiceItems items: radioItems[] -> array of checkItems: Whether isCheck [] - > select the array listener - > callback interface * / checkBoxDialog. SetMultiChoiceItems (checkBoxItems, isCheck, new DialogInterface.OnMultiChoiceClickListener() { @Override public void onClick(DialogInterface dialog, int which, boolean isChecked) { if (isChecked){ Toast.makeText(DialogActivity.this, CheckBoxItems [which] + "select ", toast.length_short).show(); }else {toast.makeText (dialogActivity. this, checkBoxItems[which] + "unselected ", toast.length_short).show(); }}}); / / set button checkBoxDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); }}); checkBoxDialog.create().show(); }Copy the code

6. Popover with input box

Run screenshot:

Private void showEditDialog(){

final EditText edit = new EditText(this); AlertDialog.Builder editDialog = new AlertDialog.Builder(this); editDialog.setTitle(getString(R.string.dialog_edit_text)); editDialog.setIcon(R.mipmap.ic_launcher_round); // Set the dialog layout editdialog.setView (edit); / / set button editDialog. SetPositiveButton (get string (R.s tring. Dialog_btn_confirm_text), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(DialogActivity.this, edit.getText().toString().trim(),Toast.LENGTH_SHORT).show(); dialog.dismiss(); }}); editDialog.create().show(); }Copy the code

7, custom layout dialog box

Dialogs of this type are used in more areas than prompt dialogs in actual project development, but are almost always custom dialogs on projects…

Run screenshot:

Layout file: custom_dialog_layout.xml

<TextView android:id="@+id/dialog_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="15sp" android:textColor="@color/colorPrimary" android:gravity="center" android:padding="12dp"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <Button android:id="@+id/dialog_btn_confirm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/colorAccent" android:textSize="15sp" android:text="@string/dialog_btn_confirm_text" android:layout_centerHorizontal="true"/> <Button android:id="@+id/dialog_btn_cancel" android:layout_width="wrap_content"  android:layout_height="wrap_content" android:textColor="@color/colorAccent" android:textSize="15sp" android:text="@string/dialog_btn_cancel_text" android:layout_centerHorizontal="true" android:layout_alignParentRight="true"/> </RelativeLayout> </LinearLayout>Copy the code

Code:

Private void showLayoutDialog() {// Load layout and initialize component View dialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog_layout,null); TextView dialogText = (TextView) dialogView.findViewById(R.id.dialog_text); Button dialogBtnConfirm = (Button) dialogView.findViewById(R.id.dialog_btn_confirm); Button dialogBtnCancel = (Button) dialogView.findViewById(R.id.dialog_btn_cancel); final AlertDialog.Builder layoutDialog = new AlertDialog.Builder(this); layoutDialog.setTitle(getString(R.string.dialog_custom_layout_text)); layoutDialog.setIcon(R.mipmap.ic_launcher_round); layoutDialog.setView(dialogView); // Set the component dialogText.setText(" I am a custom layout popover!!" ); dialogBtnConfirm .setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toasts. MakeText (dialogActivity. this," I am a custom layout popover!!" ,Toast.LENGTH_SHORT).show(); }}); dialogBtnConfirm .setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { layoutDialog.setOnDismissListener(new DialogInterface.OnDismissListener() { @Override public void onDismiss(DialogInterface dialog) { dialog.dismiss(); }}); }}); layoutDialog.create().show(); }Copy the code

The above is the Android system popover several ways to achieve, almost cover can solve a variety of simple requirements. The way of custom layout laid the basic implementation of custom popover.

The tail language

You can see that each of the above implementations is implemented through the AlertDialog class. Interested can see the Android source code in the AlertDialog class implementation.