使用DialogFragment實現底部彈窗佈局

歡迎Follow我的GitHub, 關注我的CSDN.

本文的合集已經編著成書，高級Android開發強化實戰，歡迎各位讀友的建議和指導。在京東即可購買：https://item.jd.com/12385680.html

Android對於底部彈窗已經在23.2新的實現方式, 即BottomSheet. 然而對於低版本, 我們仍需使用DialogFragment. 底部彈窗與普通Dialog不同, 需要緊貼應用下部, 但本質仍是一個Fragment, 通過繼承DialogFragment類, 定製不同樣式的Fragment.

本文源碼的GitHub下載地址

定製DialogFragment

底部彈窗, 需要緊貼應用下部. 設置Dialog樣式(Style), 全屏/佈局/外部取消. 設置Dialog位置(LayoutParams), 底部/寬度最大.

@NonNull @Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    // 使用不帶Theme的構造器, 獲得的dialog邊框距離屏幕仍有幾毫米的縫隙。
    Dialog dialog = new Dialog(getActivity(), R.style.BottomDialog);

    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 設置Content前設定
    dialog.setContentView(R.layout.fragment_bottom);
    dialog.setCanceledOnTouchOutside(true); // 外部點擊取消

    // 設置寬度爲屏寬, 靠近屏幕底部。
    Window window = dialog.getWindow();
    WindowManager.LayoutParams lp = window.getAttributes();
    lp.gravity = Gravity.BOTTOM; // 緊貼底部
    lp.width = WindowManager.LayoutParams.MATCH_PARENT; // 寬度持平
    window.setAttributes(lp);

    ButterKnife.bind(this, dialog); // Dialog即View

    initClickTypes();

    return dialog;
}

ButterKnife綁定View, 但是Layout佈局在Dialog初始化中設置, 所以選擇綁定Dialog, 因爲都繼承自View.

Dialog的樣式. 寬度最大, 高度匹配, 是否浮現於Activity之上, 關閉背景暗色.

<style name="BottomDialog" parent="@style/AppTheme">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

---

控制邏輯

初始化控件組, 把圖片\文字\框架組成三個控件組; 初始化框架點擊事件, 點擊不同的框架, 替換文字顏色與選中圖片. 點擊發送按鈕mTvSend, 根據當前選中狀態, 動態更新金幣.

private void initClickTypes() {
    initViewArray(); // 初始化控件組
    initLayout(); // 初始化框架點擊事件

    mTvSend.setOnClickListener(new View.OnClickListener() {
        @Override public void onClick(View v) {
            String typeStr = "金幣不足";
            switch (mType) {
                case 0:
                    if (countCoins(100))
                        typeStr = "一字之師";
                    break;
                case 1:
                    if (countCoins(200))
                        typeStr = "妙語連珠";
                    break;
                case 2:
                    if (countCoins(800))
                        typeStr = "學識豐富";
                    break;
                case 3:
                    if (countCoins(1200))
                        typeStr = "博學多才";
                    break;
                default:
                    break;
            }
            Toast.makeText(getContext(), typeStr, Toast.LENGTH_SHORT).show();
        }
    });
}

初始化控件組, 框架, 文字與圖片.

private void initViewArray() {
    mLayouts = new ArrayList<>();
    mTvTypes = new ArrayList<>();
    mIvTypes = new ArrayList<>();

    mLayouts.add(mLlFirstContainer);
    mLayouts.add(mLlSecondContainer);
    mLayouts.add(mLlThirdContainer);
    mLayouts.add(mLlForthContainer);

    mTvTypes.add(mTv100Coins);
    mTvTypes.add(mTv2Yuan);
    mTvTypes.add(mTv8Yuan);
    mTvTypes.add(mTv12Yuan);

    mIvTypes.add(mIv100Coins);
    mIvTypes.add(mIv2Yuan);
    mIvTypes.add(mIv8Yuan);
    mIvTypes.add(mIv12Yuan);
}

Tv代表TextView的縮寫, Iv代表ImageView的縮寫.

初始化佈局的點擊事件. 點擊不同佈局, 選擇不同類型. mType保存當前選中的類型.

private void initLayout() {
    chooseRegardsType(mType); // 選擇默認類型

    for (int i = 0; i < mLayouts.size(); i++) {
        final int tmp = i;
        LinearLayout ll = mLayouts.get(i);
        ll.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                mType = tmp;
                chooseRegardsType(mType);
            }
        });
    }
}

選擇類型, 根據選擇類型, 設置狀態, 通過狀態控制

private void chooseRegardsType(int type) {
    int size = mTvTypes.size();
    for (int i = 0; i < size; ++i) {
        if (i != type) {
            mTvTypes.get(i).setEnabled(true);
            mIvTypes.get(i).setEnabled(true);
        } else {
            mTvTypes.get(i).setEnabled(false);
            mIvTypes.get(i).setEnabled(false);
        }
    }
}

例如, Text文字的顏色, 隨着狀態改變.

android:textColor="@color/regard_text_bkg"

默認是灰色, 選中enable是false, 顏色是白色.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#848484" android:state_enabled="true"/>
    <item android:color="#FFFFFF" android:state_enabled="false"/>
</selector>

---

啓動Dialog

通過FragmentManager, 使用DialogFragment的show方法, 顯示Dialog.

public void showBottomDialog(View view) {
    FragmentManager fm = getSupportFragmentManager();
    BottomDialogFragment editNameDialog = new BottomDialogFragment();
    editNameDialog.show(fm, "fragment_bottom_dialog");
}

---

效果

在DialogFragment中, 定製佈局樣式, 處理邏輯關係, 使用FragmentManager控制並顯示Dialog, 實現經典的底部彈窗樣式.

OK, that’s all! Enjoy it!