(赶时间的同学可直接跳到最后“结论”部分。)
背景
底部弹出窗是比较常见的交互,一般封装起来也不困难。谷歌已经提供了一个BottomSheetDialog
,几行代码便可以显示一个底部弹出框,还能优雅地下滑隐藏。
BottomSheetDialog
隶属于BottomSheet
家族,在design包下,在此不再展开。
使用起来非常简单,创建一个实例,动态注入你的界面布局,再添加到该实例的内容布局,最后show出来:
BottomSheetDialog dialog = new BottomSheetDialog(this);
View view = getLayoutInflater().inflate(R.layout.layout_bottom_sheet_options, null);
dialog.setContentView(view);
dialog.show();
效果是这样的:
WTF,系统有个默认的白色背景,真是体贴又多事。
此时开始想办法去掉默认背景。
操作1:有
setContentView()
方法,有没有getContentView()
方法?查看源码一探究竟。通过查看
BottomSheetDialog
的源码,发现没有任何可以获得contentView的方法。通过源码发现其继承自AppCompatDialog
,与AlertDialog
一样。再进到AppCompatDialog
的源码,依然无所获。操作2:Google+Stack Overflow,总能解决90%的问题。
搜出来的几个方案不是无效就是报错,黯然放弃。
不过从源码中看出一点门道,决定自己来了。
源码解析
BottomSheetDialog.setContentView(),共三个重载方法,取其中一个:
@Override
public void setContentView(View view) {
super.setContentView(wrapInBottomSheet(0, view, null));
}
可以看到,我们传入的参数实际是传给BottomSheetDialog
的父类AlertDialog
了,不过传入之前,它自己有一个操作wrapInBottomSheet()
,看看做了什么:
private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
final CoordinatorLayout coordinator = (CoordinatorLayout) View.inflate(getContext(),
R.layout.design_bottom_sheet_dialog, null);
if (layoutResId != 0 && view == null) {
view = getLayoutInflater().inflate(layoutResId, coordinator, false);
}
FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
mBehavior = BottomSheetBehavior.from(bottomSheet);
mBehavior.setBottomSheetCallback(mBottomSheetCallback);
mBehavior.setHideable(mCancelable);
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();
}
}
});
// Handle accessibility events
ViewCompat.setAccessibilityDelegate(bottomSheet, new AccessibilityDelegateCompat() {
@Override
public void onInitializeAccessibilityNodeInfo(View host,
AccessibilityNodeInfoCompat info) {
super.onInitializeAccessibilityNodeInfo(host, info);
if (mCancelable) {
info.addAction(AccessibilityNodeInfoCompat.ACTION_DISMISS);
info.setDismissable(true);
} else {
info.setDismissable(false);
}
}
@Override
public boolean performAccessibilityAction(View host, int action, Bundle args) {
if (action == AccessibilityNodeInfoCompat.ACTION_DISMISS && mCancelable) {
cancel();
return true;
}
return super.performAccessibilityAction(host, action, args);
}
});
return coordinator;
}
重点在前一段,抛开Behavior部分,就明晰了:我们传入的布局xml或者view实际上被添加到design_bottom_sheet_dialog.xml
中,id为design_bottom_sheet
的FrameLayout
中作为子view。
来看看design_bottom_sheet_dialog.xml
的内容:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/touch_outside"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no"
android:soundEffectsEnabled="false"/>
<FrameLayout
android:id="@+id/design_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:clickable="true"
app:layout_behavior="@string/bottom_sheet_behavior"
style="?attr/bottomSheetStyle"/>
</android.support.design.widget.CoordinatorLayout>
根布局是CoordinatorLayout
,这就是能下滑隐藏的原因。包裹了两个View,第一个view是撑满整个屏幕的背景蒙层,以便点击就让Dialog
消失,第二个view就是那个装载用户自定义布局的FrameLayout
。style="?attr/bottomSheetStyle"
应该设置了默认的白色背景。所以解决方案便是:改变容器FrameLayout
的background。
结论
前面已经分析了,没有直接的方法拿到这个FrameLayout
,但是有时候思路需要稍微转换一下,就柳暗花明了。
既然FrameLayout
是我们的自定义view的父控件,那么通过View.getParent()
不就获得FrameLayout
的实例了吗?
验证代码:
final BottomSheetDialog dialog = new BottomSheetDialog(this);
View view = getLayoutInflater().inflate(R.layout.layout_bottom_sheet_options, null);
dialog.setContentView(view);
try {
// hack bg color of the BottomSheetDialog
ViewGroup parent = (ViewGroup) view.getParent();
parent.setBackgroundResource(android.R.color.transparent);
} catch (Exception e) {
e.printStackTrace();
}
dialog.show();
效果如图:
以上。如果有帮到你,记得点赞哦。