本文的合集已經(jīng)編著成書，高級Android開發(fā)強(qiáng)化實(shí)戰(zhàn)蜕劝，歡迎各位讀友的建議和指導(dǎo)檀头。在京東即可購買：https://item.jd.com/12385680.html
Android對于底部彈窗已經(jīng)在23.2新的實(shí)現(xiàn)方式, 即BottomSheet. 然而對于低版本, 我們?nèi)孕枋褂?strong>DialogFragment. 底部彈窗與普通Dialog不同, 需要緊貼應(yīng)用下部, 但本質(zhì)仍是一個(gè)Fragment, 通過繼承DialogFragment類, 定制不同樣式的Fragment.
本文源碼的GitHub下載地址
定制DialogFragment
底部彈窗, 需要緊貼應(yīng)用下部. 設(shè)置Dialog樣式(Style), 全屏/布局/外部取消. 設(shè)置Dialog位置(LayoutParams), 底部/寬度最大.
@NonNull @Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// 使用不帶Theme的構(gòu)造器, 獲得的dialog邊框距離屏幕仍有幾毫米的縫隙。
Dialog dialog = new Dialog(getActivity(), R.style.BottomDialog);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 設(shè)置Content前設(shè)定
dialog.setContentView(R.layout.fragment_bottom);
dialog.setCanceledOnTouchOutside(true); // 外部點(diǎn)擊取消
// 設(shè)置寬度為屏寬, 靠近屏幕底部岖沛。
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初始化中設(shè)置, 所以選擇綁定Dialog, 因?yàn)槎祭^承自View.
Dialog的樣式. 寬度最大, 高度匹配, 是否浮現(xiàn)于Activity之上, 關(guān)閉背景暗色.
<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>
控制邏輯
初始化控件組, 把圖片\文字\框架組成三個(gè)控件組; 初始化框架點(diǎn)擊事件, 點(diǎn)擊不同的框架, 替換文字顏色與選中圖片. 點(diǎn)擊發(fā)送按鈕mTvSend, 根據(jù)當(dāng)前選中狀態(tài), 動態(tài)更新金幣.
private void initClickTypes() {
initViewArray(); // 初始化控件組
initLayout(); // 初始化框架點(diǎn)擊事件
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 = "學(xué)識豐富";
break;
case 3:
if (countCoins(1200))
typeStr = "博學(xué)多才";
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的縮寫.
初始化布局的點(diǎn)擊事件. 點(diǎn)擊不同布局, 選擇不同類型. mType保存當(dāng)前選中的類型.
private void initLayout() {
chooseRegardsType(mType); // 選擇默認(rèn)類型
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);
}
});
}
}
選擇類型, 根據(jù)選擇類型, 設(shè)置狀態(tài), 通過狀態(tài)控制
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文字的顏色, 隨著狀態(tài)改變.
android:textColor="@color/regard_text_bkg"
默認(rèn)是灰色, 選中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中, 定制布局樣式, 處理邏輯關(guān)系, 使用FragmentManager控制并顯示Dialog, 實(shí)現(xiàn)經(jīng)典的底部彈窗樣式.
OK, that's all! Enjoy it!
