设为首页收藏本站

[Android教程] Android 自定义AlertDialog的实现

[复制链接]
查看2455 | 回复41 | 2018-11-18 18:18:41 | 显示全部楼层 |阅读模式
来自:浮云Cloud 的投稿
Android默认的AlertDialog太单调,我们可以通过继承原生的Dialog来实现自定义的Dialog。
本文的自定义Dialog和原生的AlertDialog的创建方式类似,通过一个静态Builder类来设置Dialog的图标、标题、内容和按钮。

如果想要在Dialog中使用输入框或者其他控件,方法也是类似的,只要写好布局再加载就可以了。
效果:

Android 自定义AlertDialog的实现

Android 自定义AlertDialog的实现
布局文件代码:
(注意这里的根布局的宽高如果用match_parent或者设置为具体的数值都和wrap_conten效果一样,可以通过设置子控件的大小来撑开)

  1. <android.support.constraint.constraintlayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content"
  7.     android:background="#ffffff">

  8.     <linearlayout
  9.         android:id="@+id/dialog_header"
  10.         android:orientation="vertical"
  11.         android:layout_width="220dp"
  12.         android:layout_height="wrap_content"
  13.         android:padding="16dp"
  14.         android:gravity="center"
  15.         android:background="@color/colorGreen"
  16.         app:layout_constraintTop_toTopOf="parent"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintEnd_toEndOf="parent">

  19.         
  20.         <imageview
  21.             android:contentDescription="@id/dialog_title"
  22.             android:id="@+id/dialog_icon"
  23.             android:layout_width="100dp"
  24.             android:layout_height="100dp"
  25.             android:src="@drawable/ic_check_circle" />

  26.         
  27.         <textview
  28.             android:id="@+id/dialog_title"
  29.             android:layout_width="wrap_content"
  30.             android:layout_height="wrap_content"
  31.             android:padding="8dp"
  32.             android:textSize="18sp"
  33.             android:textStyle="bold"
  34.             android:textColor="#ffffff"
  35.             android:visibility="gone" />

  36.    

  37.     <linearlayout
  38.         android:orientation="vertical"
  39.         android:layout_width="wrap_content"
  40.         android:layout_height="wrap_content"
  41.         android:padding="16dp"
  42.         android:gravity="center"
  43.         app:layout_constraintTop_toBottomOf="@+id/dialog_header"
  44.         app:layout_constraintStart_toStartOf="parent"
  45.         app:layout_constraintEnd_toEndOf="parent"
  46.         app:layout_constraintBottom_toBottomOf="parent">

  47.         
  48.         <textview
  49.             android:id="@+id/dialog_message"
  50.             android:layout_width="wrap_content"
  51.             android:layout_height="wrap_content"
  52.             android:padding="8dp"
  53.             tools:text="Dialog Message" />

  54.         <button
  55.             android:id="@+id/dialog_button"
  56.             android:layout_width="100dp"
  57.             android:layout_height="42dp"
  58.             android:layout_marginTop="16dp"
  59.             android:layout_marginBottom="8dp"
  60.             android:background="@drawable/bg_dialog_button"
  61.             android:textColor="#ffffff"
  62.             android:text="@string/dialog_button">

  63.         

  64.    

复制代码
InfoDialog类:
  1. package com.cloud.design.dialog;

  2. import android.app.Dialog;
  3. import android.content.Context;
  4. import android.graphics.Bitmap;
  5. import android.support.annotation.NonNull;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.Button;
  10. import android.widget.ImageView;
  11. import android.widget.TextView;

  12. import com.cloud.design.R;

  13. public class InfoDialog extends Dialog {

  14.     private InfoDialog(Context context, int themeResId) {
  15.         super(context, themeResId);
  16.     }

  17.     public static class Builder {

  18.         private View mLayout;

  19.         private ImageView mIcon;
  20.         private TextView mTitle;
  21.         private TextView mMessage;
  22.         private Button mButton;

  23.         private View.OnClickListener mButtonClickListener;

  24.         private InfoDialog mDialog;

  25.         public Builder(Context context) {
  26.             mDialog = new InfoDialog(context, R.style.Theme_AppCompat_Dialog);
  27.             LayoutInflater inflater =
  28.                     (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  29.             //加载布局文件
  30.             mLayout = inflater.inflate(R.layout.dialog, null, false);
  31.             //添加布局文件到 Dialog
  32.             mDialog.addContentView(mLayout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
  33.                     ViewGroup.LayoutParams.WRAP_CONTENT));

  34.             mIcon = mLayout.findViewById(R.id.dialog_icon);
  35.             mTitle = mLayout.findViewById(R.id.dialog_title);
  36.             mMessage = mLayout.findViewById(R.id.dialog_message);
  37.             mButton = mLayout.findViewById(R.id.dialog_button);
  38.         }

  39.         /**
  40.          * 通过 ID 设置 Dialog 图标
  41.          */
  42.         public Builder setIcon(int resId) {
  43.             mIcon.setImageResource(resId);
  44.             return this;
  45.         }

  46.         /**
  47.          * 用 Bitmap 作为 Dialog 图标
  48.          */
  49.         public Builder setIcon(Bitmap bitmap) {
  50.             mIcon.setImageBitmap(bitmap);
  51.             return this;
  52.         }

  53.         /**
  54.          * 设置 Dialog 标题
  55.          */
  56.         public Builder setTitle(@NonNull String title) {
  57.             mTitle.setText(title);
  58.             mTitle.setVisibility(View.VISIBLE);
  59.             return this;
  60.         }

  61.         /**
  62.          * 设置 Message
  63.          */
  64.         public Builder setMessage(@NonNull String message) {
  65.             mMessage.setText(message);
  66.             return this;
  67.         }

  68.         /**
  69.          * 设置按钮文字和监听
  70.          */
  71.         public Builder setButton(@NonNull String text, View.OnClickListener listener) {
  72.             mButton.setText(text);
  73.             mButtonClickListener = listener;
  74.             return this;
  75.         }

  76.         public InfoDialog create() {
  77.             mButton.setOnClickListener(view -> {
  78.                 mDialog.dismiss();
  79.                 mButtonClickListener.onClick(view);
  80.             });
  81.             mDialog.setContentView(mLayout);
  82.             mDialog.setCancelable(true);                //用户可以点击后退键关闭 Dialog
  83.             mDialog.setCanceledOnTouchOutside(false);   //用户不可以点击外部来关闭 Dialog
  84.             return mDialog;
  85.         }
  86.     }
  87. }
复制代码
弹出:
  1. public class MainActivity extends AppCompatActivity {

  2.     @Override
  3.     protected void onCreate(Bundle savedInstanceState) {
  4.         super.onCreate(savedInstanceState);
  5.         setContentView(R.layout.activity_main);

  6.         findViewById(R.id.button_show_dialog).setOnClickListener(v -> {
  7.             InfoDialog infoDialog = new InfoDialog.Builder(this)
  8.                     .setTitle("Done")
  9.                     .setMessage("Something done")
  10.                     .setButton("OK", view ->
  11.                         Toast.makeText(this, "OK Clicked.", Toast.LENGTH_SHORT).show()
  12.                     ).create();
  13.             infoDialog.show();
  14.         });
  15.     }
  16. }
复制代码




</button
</textview
</linearlayout
</textview
</imageview
</linearlayout
</android.support.constraint.constraintlayout

帖子地址: 

z363046305 | 2018-11-19 10:33:17 | 显示全部楼层
1v1飘过
FENGER106 | 2018-11-19 10:33:21 | 显示全部楼层
围观楼主。。。。
62562001 | 2018-11-19 10:43:59 | 显示全部楼层
春节人少,我冒充水王,现在水王来了,我走……
150550 | 2018-11-19 10:44:05 | 显示全部楼层
呵呵,低调,低调!
rynet | 2018-11-19 10:44:56 | 显示全部楼层
前排支持下
ehNZUcIj | 2018-11-19 10:54:53 | 显示全部楼层
元芳你怎么看?
wangtao123 | 2018-11-19 11:01:56 | 显示全部楼层
看起来不错
NEkYTdbZ | 2018-11-19 11:04:50 | 显示全部楼层
顶起出售广告位
dgd78 | 2018-11-19 11:08:49 | 显示全部楼层
不错 支持一个了
您需要登录后才可以回帖 登录 | 点击加入

本版积分规则