Android 对话框系列——类似IOS风格的对话框

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Luck_Nie/article/details/78014862

Android 对话框系列——类似IOS风格的对话框

分享一个简单的常用的对话框类,按照国际惯例,先上图

这里写图片描述

布局简单,先上布局。一个标题,一个内容,两个按钮

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/shape_diglog_bg"
        android:orientation="vertical">

        <TextView
            android:id="@+id/dialog_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:text="这里是标题"
            android:textColor="#333333"
            android:textSize="19sp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/dialog_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="30dp"
            android:text="这里是内容"
            android:textColor="#333333"
            android:textSize="17sp"
            android:textStyle="bold" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="18sp"
            android:background="#f1f1f1" />

        <LinearLayout
            android:id="@+id/ll_button"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">


            <Button
                android:id="@+id/dialog_cancel"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:text="取消"
                android:textColor="#006DFF"
                android:textSize="17sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#f1f1f1" />

            <Button
                android:id="@+id/dialog_ensure"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:text="确定"
                android:textColor="#006DFF"
                android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

接着就是自定义类!

首先,新建类继承Dialog
public class CommonDialog extends Dialog
接着是构造函数,在构造函数中定义样式
public CommonDialog(@NonNull Context context) {
        super(context, R.style.dialog_Common);
        mContext = context;
        setContentView(R.layout.dialog_common);
        ButterKnife.bind(this);
    }
其中,在style中定义对话框属性
<style name="dialog_Common" parent="android:style/Theme.Dialog">
        <!--说明提示框是否有边框-->
        <item name="android:windowFrame">@null</item>
        <!--说明提示框是否有标题-->
        <item name="android:windowNoTitle">true</item>
        <!--设置提示框的背景颜色是什么-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!--是否浮现在activity之上-->
        <item name="android:windowIsFloating">true</item>
        <!--是否有遮盖-->
        <item name="android:windowContentOverlay">@null</item>
        <!--说明提示框是滞是透明的-->
        <item name="android:windowIsTranslucent">true</item>
        <!--说明是否充许对话框的背景变暗。为true则充许变暗-->
        <item name="android:backgroundDimEnabled">true</item>
        <!--设置背景透明度-->
        <item name="android:backgroundDimAmount">0.4</item>
    </style>
紧接着,提供四个变量来存储设置的标题、内容以及两个按钮的文字
private String title;
private String content;
private String cancel;
private String ensure;
现在需要提供能够设置标题、内容以及两个按钮的文字的方法
    /*
     * 设置标题 默认没有标题
     *
     * @param title
     */ 
    public void setTitle(String title) {
        this.title = title;
    }

    /**
     * 设置内容    默认为空
     *
     * @param content
     */
    public void setContent(String content) {
        this.content = content;
    }

    /**
     * 设置确定按钮内容 默认为确定
     *
     * @param ensure
     */
    public void setEnsure(String ensure) {
        this.ensure = ensure;
    }

    /**
     * 设置取消按钮内容  默认为取消
     *
     * @param cancel
     */
    public void setCancel(String cancel) {
        this.cancel = cancel;
    }
现在,处理按钮的点击事件
 /**
     * 确定按钮事件监听 默认是dismiss对话框
     *
     * @param onEnsureClickListener
     */
    public void setOnEnsureClickListener(View.OnClickListener onEnsureClickListener) {
        this.onEnsureClickListener = onEnsureClickListener;
    }

    /**
     * 取消按钮事件监听 默认是dismiss对话框
     *
     * @param onCabcelClickListener
     */
    public void setOnCancelClickListener(View.OnClickListener onCabcelClickListener) {
        this.onCancelClickListener = onCabcelClickListener;
    }
默认的是点击对话框消失
     /**
     * 默认点击事件,点击弹框消失
     */
    private View.OnClickListener onClickListenerDismiss = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dismiss();
        }
    };

最后,重写父类的show方法,将展示之前设置的各种信息

/**
     * 重写show方法
     */
    @Override
    public void show() {
        if (TextUtils.isEmpty(title)) {
          //默认没有标题
            dialogTitle.setVisibility(View.GONE);
        } else {
          //默认不设置内容,则内容太为空
            dialogTitle.setVisibility(View.VISIBLE);
            setTextViewTxt(dialogTitle, title);
        }
        if (TextUtils.isEmpty(cancel)) {
          //默认取消按钮文字为"取消"
            cancel = mContext.getString(R.string.cancel);
        }
        if (TextUtils.isEmpty(ensure)) {
          //默认确认按钮文字为"确认"
            ensure = mContext.getString(R.string.ensure);
        }
        //设置文字信息
        setTextViewTxt(dialogContent, content);
        setTextViewTxt(dialogCancel, cancel);
        setTextViewTxt(dialogEnsure, ensure);
         //设置点击事件
        setButtonOnClickListener(dialogCancel, onCancelClickListener);
        setButtonOnClickListener(dialogEnsure, onEnsureClickListener);
        super.show();
    }

最最后,献上在Activity中如何使用该对话框的方法的代码

public class MainActivity extends AppCompatActivity {


    @BindView(R.id.btn_demo_haveTitle)
    Button btnDemoHaveTitle;
    @BindView(R.id.btn_demo_noTitle)
    Button btnDemoNoTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick({R.id.btn_demo_haveTitle, R.id.btn_demo_noTitle})
    public void onClick(View view) {
        switch (view.getId()) {
            //没有标题的对话框
            case R.id.btn_demo_haveTitle:
                final CommonDialog dialog1 = new CommonDialog(this);
                dialog1.setTitle("提示");
                dialog1.setContent("是否确认退出?");
                dialog1.setOnEnsureClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"点击了确认",Toast.LENGTH_SHORT).show();
                        // TODO: 2017/9/17 这里写你的代码
                        dialog1.dismiss();
                    }
                });
                dialog1.show();
                break;
            //有标题的对话框
            case R.id.btn_demo_noTitle:
                final CommonDialog dialog2 = new CommonDialog(this);
                //不设置标题默认没有标题
                dialog2.setContent("是否确认退出?");
                dialog2.setOnEnsureClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"点击了确认",Toast.LENGTH_SHORT).show();
                        // TODO: 2017/9/17 这里写你的代码
                        dialog2.dismiss();
                    }
                });
                dialog2.show();
                break;
        }
    }
}

到这里,一个简单常用的对话框就完成了,希望对各位有所帮助!

代码奉上

猜你喜欢

转载自blog.csdn.net/Luck_Nie/article/details/78014862
今日推荐