【问题标题】:How can I make the corners of my bottom sheet dialog rounded? [duplicate]如何使底部工作表对话框的角变圆? [复制]
【发布时间】:2020-09-17 20:35:18
【问题描述】:

我正在尝试使我的 BottomSheetDialog 的顶角变圆,但我在网上没有任何运气。这就是我想要的样子:

无论我尝试了什么,我都会得到这个:

我已经尝试了here 的方法并使用了 shapeAppearanceLargeComponent(我现在正在使用的)。

这是我的代码:

styles.xml

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    ...
    <item name="shapeAppearanceLargeComponent">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
</style>

底部导航菜单片段:

public class BottomNavMenuFragment extends BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom_nav_drawer, container, false);
    }
}

这就是我展示片段的方式:

BottomNavMenuFragment navFragment = new BottomNavMenuFragment();
navFragment.show(getSupportFragmentManager(), navFragment.getTag());

我似乎没有做任何事情。有人能指出我正确的方向吗?

【问题讨论】:

标签: java android material-design android-bottomsheetdialog


【解决方案1】:

按照以下步骤获得顶部圆角底片:

第 1 步:drawable 文件夹中创建可绘制的 rounded_top_corners.xml 文件

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

第2步:styles.xml中创建以下样式

 <style name="BottomSheetDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/bottomSheetBackground</item>
    </style>

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

第三步:BottomNavMenuFragment类中添加样式

 @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(STYLE_NORMAL, R.style.BottomSheetDialogStyle);
    }

就是这样,样式将应用到底页。

【讨论】:

【解决方案2】:

在弄乱了人们发布的可能解决方案之后,我发现我的代码运行良好,但是我的 NavigationView 的角落遮住了抽屉的圆角。添加一些填充后,圆角显示正确。

【讨论】:

    【解决方案3】:

    你可以在你的drawable中创建以下形状:

    drawable/rounded_corners.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:shape="rectangle">
        <solid android:color="#fff"/>
        <corners 
            android:topLeftRadius="20dp"
            android:topRightRadius="20dp"/>
    </shape>

    然后,对于底部工作表的布局,您可以将此可绘制对象添加为背景属性。

    android:background="@drawable/rounded_corners"
    

    【讨论】:

      【解决方案4】:

      创建一个可绘制对象并将其设置为 setOnShowListener 内的底部表,如下所示。(其中 R.drawable.bottom_sheet_bkg 是我的背景 xml 文件)。

              val dialogBinding = MyBottomSheetDialogBinding.inflate(layoutInflater)
              val bottomSheet = BottomSheetDialog(requireContext())
              bottomSheet.setContentView(dialogBinding.root)
              bottomSheet.setOnShowListener { dia ->
                  val bottomSheetDialog = dia as BottomSheetDialog
                  val bottomSheetInternal: FrameLayout =
                      bottomSheetDialog.findViewById(com.google.android.material.R.id.design_bottom_sheet)!!
                  bottomSheetInternal.setBackgroundResource(R.drawable.bottom_sheet_bkg)
              }
              bottomSheet.setCancelable(true)
              bottomSheet.show()
      

      XML 文件:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-12-25
        • 1970-01-01
        • 2021-11-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-07-24
        • 2023-03-14
        相关资源
        最近更新 更多