底部工作表 - 不正确的设计行为

Question

我一直在尝试设置Bottomsheet，就像谷歌在他们的应用程序中使用的那样，例如GOOGLE NEWS等。

这是谷歌的Bottomsheet的外观

而我的Bottomsheet的外观如下所示

您会立即注意到两件事，

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);

如何实现圆角并确保底部导航不透明？

- Ali

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

- Abhi

---

非常感谢您的回复，我尝试了您提供的不同方法，但是我完全迷失了方向。所以，基本上，我首先尝试实现圆角，但是失败了。另外，您所说的“扩展BottomSheetDialogFragment”是什么意思？ - Ali

抱歉，我错过了您之前关于疑问的评论。很高兴它起作用了！ - Abhi

没问题 :) 感谢你的帮助，它现在看起来像谷歌一样漂亮.. 干杯 - Ali

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来更改通用主题支持。

在创建BottomSheet时加载指定的主题。

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

- Codelaby

Answer 3

尝试使用以下代码。

View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
((View) view.getParent()).setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) ((View) view.getParent())
                .getLayoutParams();
((View) view.getParent()).setLayoutParams(layoutParams);

- himangi