DialogFragment使用小結

前言

DialogFragment什么鬼？什么DialogFragment，不就是Dialog和Fragment配合的使用么？哎，還真像那回事！！！
我們進入正題：Android 官方推薦使用 DialogFragment 來代替 Dialog ，可以讓它具有更高的可復用性（降低耦合）和更好的便利性（很好的處理屏幕翻轉的情況）。

用法以及優(yōu)缺點

創(chuàng)建 DialogFragment 有兩種方式：
覆寫其 onCreateDialog 方法 — ① 利用AlertDialog或者Dialog創(chuàng)建出Dialog。
覆寫其 onCreateView 方法 — ② 使用定義的xml布局文件展示Dialog。
雖然這兩種方式都能實現相同的效果，但是它們各有自己適合的應用場景：
方法 ①，一般用于創(chuàng)建替代傳統(tǒng)的 Dialog 對話框的場景，UI 簡單，功能單一。
方法 ②，一般用于創(chuàng)建復雜內容彈窗或全屏展示效果的場景，UI 復雜，功能復雜，一般有網絡請求等異步操作。
另外它又是Fragment，所以當旋轉屏幕和按下后退鍵時可以更好的管理其聲明周期，它和Fragment有著基本一致的聲明周期。

詳細的使用分析

1.覆寫其 onCreateDialog 方法

我們來創(chuàng)建一個最簡單的AlertDialog來完成這里的操作。寫一個MyAlertDialogFragment實現都在這個里面。

public class MyAlertDialogFragment extends DialogFragment {
    public MyAlertDialogFragment() {
    }

    public static MyAlertDialogFragment newInstance(String tittle) {
        MyAlertDialogFragment fragment = new MyAlertDialogFragment();
        Bundle bundle = new Bundle();
        bundle.putString("tittle", tittle);
        fragment.setArguments(bundle);
        return fragment;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        String tittle = getArguments().getString("tittle");
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle(tittle);
        builder.setMessage("刪除歌曲？");
        builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(getContext(), "確定", Toast.LENGTH_SHORT).show();

            }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(getContext(), "取消", Toast.LENGTH_SHORT).show();
            }
        });
        return builder.create();
    }
}

然后在MainActivity里面進行相應的操作，代碼如下：

MyAlertDialogFragment fragment = MyAlertDialogFragment.newInstance("你的樣子");
fragment.show(getSupportFragmentManager(), "myAlert");

實現效果如下：


onCreateDialog的實現

2.覆寫其 onCreateView 方法

首先新建一個布局文件res/layout/fragment_edit_name.xml,詳細布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/lbl_your_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your name" />
    <EditText
        android:id="@+id/txt_your_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionDone"
        android:inputType="text" />
</LinearLayout>

用EditNameDialogFragment實現相應的代碼。

public class EditNameDialogFragment extends DialogFragment {
    public EditNameDialogFragment() {
    }

    public static EditNameDialogFragment newInstance(String tittle) {
        EditNameDialogFragment fragment = new EditNameDialogFragment();
        Bundle bundle = new Bundle();
        bundle.putString("tittle", tittle);
        fragment.setArguments(bundle);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_edit_name, container, false);
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        String tittle = getArguments().getString("tittle");
        ((EditText) view.findViewById(R.id.txt_your_name)).setText(tittle);
        super.onViewCreated(view, savedInstanceState);
    }
}

然后在MainActivity里面進行相應的操作，代碼如下：

EditNameDialogFragment editNameDialogFragment = EditNameDialogFragment.newInstance("名字");
editNameDialogFragment.show(getSupportFragmentManager(), "edit");

實現效果如下：


onCreateView 的實現效果

這個效果讓我不太滿意啊??！

3.全屏效果

我說了上面的效果我不太滿意。那怎么辦？？
首先在onResume里面處理

    @Override
    public void onResume() {
        ViewGroup.LayoutParams params = getDialog().getWindow().getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.MATCH_PARENT;
        getDialog().getWindow().setAttributes((WindowManager.LayoutParams) params);
        super.onResume();
    }

然后運行APP得到下面的樣子，沒有全屏?。?br>

全屏效果

我們繼續(xù)處理：我們處理一下padding和background，在文件res\values\styles.xml中添加下面的代碼：

    <style name="Dialog.FullScreen" parent="Theme.AppCompat.Dialog">
        <item name="android:padding">0dp</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

然后在MainActivity里面進行相應的操作，代碼如下：

EditNameDialogFragment editNameDialogFragment = EditNameDialogFragment.newInstance("名字");
editNameDialogFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.Dialog_FullScreen);
editNameDialogFragment.show(getSupportFragmentManager(), "edit");

得到的結果如下圖：

全屏的效果

下面我們來修改一下MyAlertDialogFragment里面的代碼，實現對話框在下面并且是寬度全屏的效果，代碼如下：

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        String tittle = getArguments().getString("tittle");
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle(tittle);
        builder.setMessage("刪除歌曲？");
        builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(getContext(), "確定", Toast.LENGTH_SHORT).show();

            }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(getContext(), "取消", Toast.LENGTH_SHORT).show();
            }
        });

        AlertDialog alertDialog = builder.create();
        // 設置寬度為屏寬、位置在屏幕底部
        Window window = alertDialog.getWindow();
        window.setBackgroundDrawableResource(android.R.color.white);
        window.getDecorView().setPadding(0, 0, 0, 0);
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        wlp.height = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(wlp);
        return alertDialog ;
    }

我們只需要修改onCreateDialog里面的方法就能滿足需求。得到的結果如下圖所示：

屏寬、位置在屏幕底部

除了上面的全屏之外，我們還可以指定對話框的大小,代碼如下：

    int width = getResources().getDimensionPixelSize(R.dimen.popup_width);
    int height = getResources().getDimensionPixelSize(R.dimen.popup_height);        
    getDialog().getWindow().setLayout(width, height);
    //最主要的就是 setLayout(width, height)，在合適的時機處理相應的大小。

4.傳遞數據給Activity

我們使用接口的方式進行傳值。我們在MyAlertDialogFragment進行相應的處理，具體的代碼如下：

public class MyAlertDialogFragment extends DialogFragment {
    public MyAlertDialogFragment() {
    }

    public interface ConfirmListener {
        void onClickComplete(String tittle);
    }


    public static MyAlertDialogFragment newInstance(String tittle) {
        MyAlertDialogFragment fragment = new MyAlertDialogFragment();
        Bundle bundle = new Bundle();
        bundle.putString("tittle", tittle);
        fragment.setArguments(bundle);
        return fragment;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        final String tittle = getArguments().getString("tittle");
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle(tittle);
        builder.setMessage("刪除歌曲？");
        builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                ConfirmListener confirmListener = (ConfirmListener) getActivity();
                confirmListener.onClickComplete(tittle);
            }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });

        AlertDialog alertDialog = builder.create();
        // 設置寬度為屏寬、位置靠近屏幕底部
        Window window = alertDialog.getWindow();
        window.setBackgroundDrawableResource(android.R.color.white);
        window.getDecorView().setPadding(0, 0, 0, 0);
        WindowManager.LayoutParams wlp = window.getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        wlp.height = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(wlp);
        return alertDialog;
    }
}

在MianActivity要實現ConfirmListener接口，部分代碼如下：

public class MainActivity extends AppCompatActivity implements  MyAlertDialogFragment.ConfirmListener {

    ..............

    @Override
    public void onClickComplete(String tittle) {
        Toast.makeText(this, "標題：" + tittle, Toast.LENGTH_SHORT).show();
    }
}

上面的代碼就可以把值傳遞給Activity。

5.屏幕旋轉的問題

屏幕旋轉前

屏幕旋轉后

上面的圖就可以解答所有的疑惑，我們沒有做任何的特殊處理，上面的tittle，就是我們從Activity傳過來的。

6.Styling Dialogs 樣式對話框

Styling Custom Dialog 下面的來自android_guides,感興趣的可以去看這一篇文章。寫的非一般的感覺?。?！

    <style name="AppThemeDialog" parent="Theme.AppCompat.Light">
        <!-- Apply default style for dialogs -->
        <item name="android:dialogTheme">@style/AppDialogTheme</item>
        <!-- Apply default style for alert dialogs -->
        <item name="android:alertDialogTheme">@style/AppAlertTheme</item>
    </style>

    <!-- Define your custom dialog theme here extending from base -->
    <style name="AppDialogTheme" parent="Theme.AppCompat.Light.Dialog">
        <!-- Define color properties as desired -->
        <item name="colorPrimary">@color/dark_blue</item>
        <item name="colorAccent">@color/dark_blue</item>
        <item name="colorPrimaryDark">#000</item>
        <item name="colorControlNormal">@color/dark_blue</item>
        <item name="android:textColorHighlight">@color/light_blue</item>
        <!-- Define window properties as desired -->
        <!--是否顯示title-->
        <item name="android:windowNoTitle">false</item>
        <!--是否是全屏-->
        <item name="android:windowFullscreen">false</item>
        <!--背景顏色-->
        <item name="android:windowBackground">@color/medium_green</item>
        <!--是否浮現在activity之上-->
        <item name="android:windowIsFloating">true</item>
        <!--點擊空白是否消失-->
        <item name="android:windowCloseOnTouchOutside">true</item>
    </style>

    <!-- Define your custom alert theme here extending from base -->
    <style name="AppAlertTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorPrimary">@color/dark_blue</item>
        <item name="colorAccent">@color/dark_blue</item>
        <item name="colorPrimaryDark">#000</item>
        <item name="colorControlNormal">@color/dark_blue</item>
        <item name="android:textColorHighlight">@color/light_blue</item>
    </style>

對話框中Titlebar的樣式使用"android:windowTitleStyle"屬性，代碼如下：

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Apply default style for dialogs -->
    <item name="android:dialogTheme">@style/AppDialogTheme</item>
    <!-- Apply default style for alert dialogs -->
    <item name="android:alertDialogTheme">@style/AppAlertTheme</item>
</style>

<style name="AppDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:windowTitleStyle">@style/DialogWindowTitle</item>
    <!-- ...other stuff here... -->
</style>

<style name="AppAlertTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowTitleStyle">@style/DialogWindowTitle</item>
    <!-- ...other stuff here... -->
</style>

<!--下面是詳細的使用-->
<style name="DialogWindowTitle" parent="Base.DialogWindowTitle.AppCompat">
    <item name="android:background">@color/light_green</item>
    <item name="android:gravity">center</item>
    <item name="android:textAppearance">@style/DialogWindowTitleText</item>
</style>

<style name="DialogWindowTitleText" parent="@android:style/TextAppearance.DialogWindowTitle">
    <item name="android:textSize">24sp</item>
</style>

移除標題欄：

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    // request a window without the title
    dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
    return dialog;
}
//或者如下的代碼：
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(DialogFragment.STYLE_NO_TITLE,R.style.AppTheme);
}

6.軟鍵盤尺寸的調整

首先在AndroidManifest.xml進行處理，代碼如下：

        <activity android:name=".MainActivity"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

接下來是Fragment里面的操作：

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle bundle) {
        // Set to adjust screen height automatically, when soft keyboard appears on screen 
        getDialog().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        return inflater.inflate(R.layout.fragment_edit_name, container);
    }
    //或者是下面的代碼
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        ......
        AlertDialog alertDialog = builder.create();
        alertDialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        return alertDialog;
    }

總結

上面的文章寫的我認為一般般，但是基本可以滿足相應的需求。

參考文章：
https://github.com/codepath/android_guides/wiki/Using-DialogFragment
https://likfe.com/2016/10/27/dialog-fragment/
https://blog.csdn.net/lmj623565791/article/details/37815413

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 上周看到一篇文章在分析簡書 我的主頁[http://www.lxweimin.com/users/c5327...
    anyesu閱讀 38,813評論 23贊 35
  • Sublime Text：一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不僅具有華麗的界面，還支持插...
    xiaotao123閱讀 9,515評論 0贊 27
  • 基本用法 Glide 的一個完整的請求至少需要三個參數，代碼如下： context: 需要的上下文，可以傳Acti...
    Zc0716閱讀 4,203評論 0贊 0
  • 這幾天有空，學習了CSS浮動和定位，和大家分享幾個問題，希望對學習CSS浮動和定位的同學有所幫助。 一、文檔流的概...
    betterwlf閱讀 10,086評論 13贊 45
  • 早於2013年，美國麻省幼兒教育及照顧部門就指出一至四歲孩子的腦部對數學及邏輯特別敏感，容易接收，提示STEM教育...
    Bonny天恩閱讀 315評論 0贊 0