使用DialogFragment定義自己的Dialog

weixin_34146805發表於2018-09-02
Fragment

版權宣告：本文為博主原創文章，未經博主允許不得轉載。

以前的專案在需要自己定義一個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方法即可顯示出來。效果如下：

1904793-1643ff0578707b70.png
image.png

相關文章