用BottomSheetDialog作为底部弹出窗时，去除默认背

（赶时间的同学可直接跳到最后“结论”部分。）

背景

底部弹出窗是比较常见的交互，一般封装起来也不困难。谷歌已经提供了一个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();

效果是这样的：

1.jpg
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();

效果如图：

2.jpg

以上。如果有帮到你，记得点赞哦。

关于我：
GitHub: woxingxiao
e-mail: Chauvet910@gmail.com
梯子推荐：点我科学上网
最近打算换工作，若有工作机会，请给我发邮件，坐标成都，谢谢。