BottomSheet - 不正确的设计行为

Question

我一直在尝试设置BottomsheetGoogle 在其应用程序（例如 GOOGLE NEWS 等）中使用的方式，

这就是 Google 的Bottomsheet样子，如下所示

我的Bottomsheet样子如下

马上你会注意到两件事，

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

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

我的BottomSheet.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 小部件创建自定义样式。

样式-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>

样式.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并在其上设置新主题。就是这样！

Answer 2

现在，我用这个

    <!-- Stuff to make the bottom sheet with round top borders -->
    <style name="BottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">16dp</item>
        <item name="cornerSizeTopRight">16dp</item>
    </style>

    <style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
        <item name="shapeAppearance">@style/BottomSheetShapeAppearance</item>
        <item name="behavior_peekHeight">140dp</item>
        <item name="behavior_fitToContents">true</item>
        <item name="behavior_halfExpandedRatio">0.5</item>
    </style>

    <style name="BaseBottomSheetMenu" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item>
        <item name="bottomSheetStyle">@style/BottomSheetModal</item>
        <item name="android:statusBarColor">@android:color/transparent</item>

    </style>

    <style name="BottomSheetMenuTheme" parent="@style/BaseBottomSheetMenu" />

您可以更改深色模式Theme.MaterialComponents.DayNight.BottomSheetDialog扩展 中的一般主题支持Theme.MaterialComponents.DayNight.BottomSheetDialog

在创建 BotomSheet 中加载特定主题

    override fun getTheme(): Int = R.style.BottomSheetMenuTheme