android - BottomSheet - 不正确的设计行为

Question

我一直在尝试设置 Bottomsheet Google 在他们的应用程序(例如 GOOGLE NEWS 等)中使用的方式，

This is how Google's Bottomsheet looks like the following

Where my Bottomsheet looks like the following

马上你会注意到两件事，

1. 没有圆角
2. 底部导航未混合

我的 bottomsheet 代码如下(为了简单起见，我删除了控件)

MyBottomSheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:elevation="10dp"
    android:minHeight="300dp"
    app:behavior_peekHeight="120dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginBottom="30dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">           
              <!--controls here-->
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

我在我的代码中调用它如下

View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);

如何获得圆角并确保底部导航不透明？

Answer 1

要获得 Google 的模态 BottomSheet 设计，请按以下方式实现它。首先创建一个形状可绘制对象，它将用作底部工作表的背景:

bg_bottomsheet.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="@dimen/bottom_sheet_corner_radius"
        android:topRightRadius="@dimen/bottom_sheet_corner_radius" />
    <padding android:top="@dimen/bottom_sheet_top_padding" />
<solid android:color="@color/white" />

现在为 BottomSheet 小部件创建自定义样式。

style-v21.xml

<resources>

    <style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@color/white</item>
    </style>

</resources>

styles.xml

<resources>

    <style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/bg_bottom_sheet_dialog_fragment</item>
    </style>

    <style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item>
        <item name="bottomSheetStyle">@style/BottomSheet</item>
    </style>

    <style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

</resources>

现在，扩展 BottomSheetDialogFragment 并在其上设置新主题。就是这样!