使用DialogFragment定义自己的Dialog

版权声明:本文为博主原创文章,未经博主允许不得转载。

以前的项目在需要自己定义一个dialog时候,都是写一个类直接继承Dialog类,殊不知谷歌官方很早就推出了一个类,专门供大家自定义dialog,这就是—DialogFragment。

Android 官方推荐使用 DialogFragment 来代替 Dialog ,可以让它具有更高的可复用性(降低耦合)和更好的便利性(很好的处理屏幕翻转的情况)。
DialogFragment不像Dialog使用的时候,例如横竖屏的切换(Activity的生命周期会改变),就造成了dialog会消失 ,DialogFragment则不会,只有Activity消失他才会消失。

先尝试写了一个各种dialog的基类 完成一些基本dialog的配置。

public class BaseDialog extends DialogFragment {

    public FragmentActivity activity;

    protected View rootView;

    private boolean canCancel = true;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_TITLE, R.style.Dialog);
        if(!canCancel){
            setCancelable(false);
        }

    }


    @Override
    public void onStart() {
        WindowManager.LayoutParams layoutParams = getDialog().getWindow().getAttributes();
        layoutParams.width= ScreenUtils.getScreenWidth(activity)/3*2;
        layoutParams.height= WindowManager.LayoutParams.WRAP_CONTENT;
        layoutParams.gravity = Gravity.CENTER;

        getDialog().getWindow().setAttributes(layoutParams);
        super.onStart();
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        getDialog().getWindow().getAttributes().windowAnimations = R.style.dialogAnim;
        if(!canCancel){
            getDialog().setCancelable(false);
            getDialog().setCanceledOnTouchOutside(false);
        }

        super.onActivityCreated(savedInstanceState);
    }


    public void show(final FragmentActivity activity) {
        this.activity = activity;
        show(activity.getSupportFragmentManager(),"");
    }

    public interface OnSelectDialogClickListener {
        /**
         * 左侧按钮点击事件
         */
        public void OnLeftClicked(BaseDialog dialog);
        /**
         * 右侧按钮点击事件
         */
        public void OnRightClicked(BaseDialog dialog);
    }

    public BaseDialog setCanCancel(boolean canCancel) {
        this.canCancel = canCancel;
        return this;
    }

如上面代码 继承onCreate方法为dialog设定样式 。canCancel 变量则标志了该dialog点击外部区域是否可以消失。重新 onStart()方法来设置整个dialog的宽高,注意宽高并不能在onCreate里面设置,因为此时view都还没有被measure和layout。在onActivityCreated中根据canCancel 设置相应的方法。

现在就来继承这个BaseDialog,来实现一个有两个选择按钮的对话框。

public class SelectDialog extends BaseDialog {

    private TextView tvMessage;

    private TextView tvLeftBtn;

    private TextView tvRightBtn;

    private OnSelectDialogClickListener selectDialogClickListener;

    public static SelectDialog newInstance(String message, String leftBtnText, String
            rightBtnText, OnSelectDialogClickListener selectDialogClickListener) {
        SelectDialog selectDialog = new SelectDialog();
        Bundle bundle = new Bundle();
        bundle.putString("message", message);
        bundle.putString("leftBtnText", leftBtnText);
        bundle.putString("rightBtnText", rightBtnText);
        //传入值,跟Fragment传值方法一样
        selectDialog.setArguments(bundle);
        selectDialog.selectDialogClickListener = selectDialogClickListener;
        return selectDialog;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        rootView = inflater.inflate(R.layout.dialog_select, container);
        tvMessage = (TextView) rootView.findViewById(R.id.tv_message);
        tvLeftBtn = (TextView) rootView.findViewById(R.id.tv_leftBtn);
        tvRightBtn = (TextView) rootView.findViewById(R.id.tv_rightBtn);
        if(getArguments()!=null){
            tvLeftBtn.setText(getArguments().getString("leftBtnText"));
            tvRightBtn.setText(getArguments().getString("rightBtnText"));
            tvMessage.setText(getArguments().getString("message"));
        }
        ViewTreeObserver observer = tvMessage.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                ViewTreeObserver obs = tvMessage.getViewTreeObserver();
                obs.removeGlobalOnLayoutListener(this);
//如果只有一行就居中,多行就居左
                if (tvMessage.getLineCount() == 1) {
                    tvMessage.setGravity(Gravity.CENTER_HORIZONTAL);
                } else {
                    tvMessage.setGravity(Gravity.LEFT);
                }
            }
        });
        if (selectDialogClickListener != null) {
            tvLeftBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dismiss();
                    selectDialogClickListener.OnLeftClicked(SelectDialog.this);
                }
            });
            tvRightBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dismiss();
                    selectDialogClickListener.OnRightClicked(SelectDialog.this);
                }
            });


        }
        return rootView;

    }
}

在newInstance方法中传入了dialog要显示的一些变量,创建了SelectDialog的一个实例。这里也可以写成单例模式。
用DialogFragment来定义dialog一般有两种方式。一是重写其 onCreateDialog方法 。二是重写 onCreateView 方法 。方法一,一般用于创建替代传统的 Dialog 对话框的场景,UI 简单,功能单一。而方法二,一般用于创建复杂内容弹窗或全屏展示效果的场景,UI 复杂,功能复杂,一般有网络请求等异步操作。在此我重写了onCreateView方法,加载了自定义的dialog布局。布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/rootView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:background="@drawable/background_select_dialog_light">


        <TextView
            android:id="@+id/tv_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="20dp"
            android:ellipsize="end"
            android:gravity="left"
            android:includeFontPadding="false"
            android:lineSpacingExtra="3dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:textSize="16dp"
            android:textColor="@color/Blk_1"/>

        <View
            android:id="@+id/divider_line1"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/Blk_10"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="43.5dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_leftBtn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:singleLine="true"
                android:textSize="16dp"
                android:textColor="@color/Blk_1"
                android:background="@drawable/dialog_leftbtn_background_light"/>

            <View
                android:id="@+id/divider_line2"
                android:layout_width="0.5dp"
                android:layout_height="match_parent"
                android:background="@color/Blk_10"/>

            <TextView
                android:id="@+id/tv_rightBtn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:singleLine="true"
                android:textSize="16dp"
                android:textColor="@color/Ylw_2"
                android:background="@drawable/dialog_rightbtn_background_light"/>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

下面一个继承DialogFragment的对话框就完成了。调用BaseDialog的show方法即可显示出来。效果如下:

image.png

推荐阅读更多精彩内容