前言
最近有個(gè)一個(gè)需求评雌,需要在屏幕底部顯示一個(gè)對(duì)話框氯质,原本是想要用BottomSheetDialogFragment來完成的譬淳,但是因?yàn)椴恍枰郫B效果档址,與需求不符,所以放棄邻梆。因此嘗試用DialogFragment實(shí)現(xiàn)守伸,實(shí)現(xiàn)過程踩到一些坑,現(xiàn)在記錄下來便于以后查閱浦妄。
1. 大小不受控制
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.dialog_bottom, container, false);
}
在Fragment中會(huì)通過類似上面這樣的代碼加載一個(gè)xml的布局文件尼摹,但是這DailogFragment中這樣加載出來視圖大小是不受xml中的layout_height
和 layout_width
控制的。其中的原因很簡(jiǎn)單剂娄,可以查閱下 DialogFragment.show()
方法蠢涝。
public void show(FragmentManager manager, String tag) {
mDismissed = false;
mShownByMe = true;
FragmentTransaction ft = manager.beginTransaction();
ft.add(this, tag);
ft.commit();
}
DialogFragment是通過 FragmentTransac.add()
添加進(jìn)入FragmentManager中的,因此在 onCreateView
階段阅懦,傳遞進(jìn)來的container參數(shù)是 null和二,而 LayoutInflate.inflate()
在 root 為 null 時(shí)不會(huì)設(shè)置LayoutParams,核心代碼如下所示耳胎。
final View temp = createViewFromTag(root, name, inflaterContext, attrs);
ViewGroup.LayoutParams params = null;
if (root != null) {
// Create layout params that match root, if supplied
params = root.generateLayoutParams(attrs);
if (!attachToRoot) {
// Set the layout params for temp if we are not
// attaching. (If we are, we use addView, below)
temp.setLayoutParams(params);
}
}
要想控制顯示的 Dialog 的大小惯吕,只能通過直接設(shè)置 Window 的大小實(shí)現(xiàn)惕它。而且 Window.setLayout
必須在 onActivityCreate
完成后調(diào)用才能生效。下面的代碼設(shè)置Window的大小匹配屏幕的大小废登。
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
Window window = getDialog().getWindow();
if (window != null) {
window.setLayout(MATCH_PARENT, MATCH_PARENT);
}
}
2. Dialog周圍有空隙
按照上面的方法設(shè)置了 Window 的大小之后淹魄,雖然是設(shè)置了 MATCH_PARENT
但在四周還是留下了一些間隙,如下圖所示堡距。
這其實(shí)是因?yàn)镈ialog中默認(rèn)設(shè)置的帶有 padding 的
windowsBackground
照成的甲锡。但是在BottomSheetDialog中并沒有這樣的 padding 效果,那是因?yàn)锽ottomSheetDialog并沒有使用默認(rèn)的主題效果吏颖。
public BottomSheetDialog(@NonNull Context context, @StyleRes int theme) {
super(context, getThemeResId(context, theme));
// We hide the title bar for any style configuration. Otherwise, there will be a gap
// above the bottom sheet when it is expanded.
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
}
private static int getThemeResId(Context context, int themeId) {
if (themeId == 0) {
// If the provided theme is 0, then retrieve the dialogTheme from our theme
TypedValue outValue = new TypedValue();
if (context.getTheme().resolveAttribute(
R.attr.bottomSheetDialogTheme, outValue, true)) {
themeId = outValue.resourceId;
} else {
// bottomSheetDialogTheme is not provided; we default to our light theme
themeId = R.style.Theme_Design_Light_BottomSheetDialog;
}
}
return themeId;
}
所以可以通過自定義一個(gè)主題搔体,添加 <item name="android:windowBackground">@android:color/transparent</item>
使得Dialog中的視圖可以鋪滿整個(gè)屏幕。不過還有一個(gè)更加簡(jiǎn)單的辦法半醉,那就是設(shè)置 DialogFragment 的樣式疚俱,DialogFragment 預(yù)定義好了四種樣式效果,只要設(shè)置為 STYLE_NO_FRAME
就可以實(shí)現(xiàn)視圖鋪滿屏幕的效果缩多,示例代碼:
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(STYLE_NO_FRAME, 0);
}
3. 控制視圖位置
因?yàn)楦晥D與Window大小相同控制不了呆奕,為了更加方便的控制視圖的位置,可以學(xué)習(xí) BottomSheetDialog衬吆,通過在真實(shí)視圖上包裹一層根視圖實(shí)現(xiàn)梁钾,下面是核心代碼截取。
@Override
public void setContentView(@LayoutRes int layoutResId) {
super.setContentView(wrapInBottomSheet(layoutResId, null, null));
}
private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
final FrameLayout container = (FrameLayout) View.inflate(getContext(),
R.layout.design_bottom_sheet_dialog, null);
final CoordinatorLayout coordinator =
(CoordinatorLayout) container.findViewById(R.id.coordinator);
if (layoutResId != 0 && view == null) {
view = getLayoutInflater().inflate(layoutResId, coordinator, false);
}
FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
if (params == null) {
bottomSheet.addView(view);
} else {
bottomSheet.addView(view, params);
}
// We treat the CoordinatorLayout as outside the dialog though it is technically inside
coordinator.findViewById(R.id.touch_outside).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (mCancelable && isShowing() && shouldWindowCloseOnTouchOutside()) {
cancel();
}
}
});
return container;
}
而我們則是選擇在 onCreateView
中操作逊抡。
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
container = new FrameLayout(getContext());
return inflater.inflate(R.layout.dialog_bottom, container, true);
}
這樣只需要在xml中使用 android:layout_gravity="bottom"
即可控制視圖顯示在底部姆泻。