查看: 1471|回复: 41

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

[复制链接]
  • TA的每日心情
    无聊
    6 小时前
  • 签到天数: 42 天

    [LV.5]常住居民I

    151

    主题

    208

    帖子

    4825

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    4825

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    发表于 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

    帖子地址: 

  • TA的每日心情
    奋斗
    2019-8-5 12:14
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    12

    帖子

    127

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    127
    发表于 2018-11-19 10:33:17 | 显示全部楼层
    1v1飘过
    回复

    使用道具 举报

  • TA的每日心情

    2019-10-6 08:35
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    13

    帖子

    133

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    133
    发表于 2018-11-19 10:33:21 | 显示全部楼层
    围观楼主。。。。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    3 小时前
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    15

    帖子

    128

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    128
    发表于 2018-11-19 10:43:59 | 显示全部楼层
    春节人少,我冒充水王,现在水王来了,我走……
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2019-9-18 22:57
  • 签到天数: 2 天

    [LV.1]初来乍到

    0

    主题

    12

    帖子

    131

    积分

    尊贵vip会员

    Rank: 5Rank: 5

    积分
    131
    发表于 2018-11-19 10:44:05 | 显示全部楼层
    呵呵,低调,低调!
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2019-8-26 11:20
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    7

    帖子

    122

    积分

    尊贵vip会员

    Rank: 5Rank: 5

    积分
    122
    发表于 2018-11-19 10:44:56 | 显示全部楼层
    前排支持下
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    11

    帖子

    113

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    113
    发表于 2018-11-19 10:54:53 | 显示全部楼层
    元芳你怎么看?
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    7

    帖子

    113

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    113
    发表于 2018-11-19 11:01:56 | 显示全部楼层
    看起来不错
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    8

    帖子

    113

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    113
    发表于 2018-11-19 11:04:50 | 显示全部楼层
    顶起出售广告位
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2019-9-23 17:32
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    15

    帖子

    130

    积分

    Lv 2:论坛新兵

    Rank: 1

    积分
    130
    发表于 2018-11-19 11:08:49 | 显示全部楼层
    不错 支持一个了
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /2 下一条

    快速回复 返回顶部 返回列表