Question

我一直在设置Bottomsheet Google在他们的应用中使用的方式，例如GOOGLE NEWS等，

这就是Google的Bottomsheet如下所示

我的Bottomsheet如下所示

你会发现两件事，

没有圆角
底部的导航未混合

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

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

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用于黑暗模式

在创建BotoomSheet时加载特定主题

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

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

BottomSheet - 不正确的设计行为

3 个答案: