我有一个自定义的bittomsheetdialogfragment,我想在底部视图的顶部有圆角

这是我的自定义类,它膨胀了我想要从底部显示的布局

View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    mView = inflater.inflate(R.layout.charge_layout, container, false);
    initChargeLayoutViews();
    return mView;
}

我还有这个XML资源文件作为背景:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:topRightRadius="35dp"
        android:topLeftRadius="35dp"
        />
    <solid android:color="@color/white"/>

    <padding android:top="10dp"
        android:bottom="10dp"
        android:right="16dp"
        android:left="16dp"/>
</shape>

问题是,当我把这个资源文件设置为我的布局的根元素的背景,角仍然不是圆角。

我不能使用以下代码:

this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

因为它覆盖了底部对话框的默认背景,底部视图上方不会有任何半透明的灰色。


当前回答

首先,你应该创建一个可绘制的XML文件,其中包含一个顶部圆角的形状,任何你想要的名称。 我将其命名为bottom rounded_top_shape.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="@android:color/white" />
<corners
    android:topLeftRadius="16dp"
    android:topRightRadius="16dp"
    />

然后在style.xml中添加这个

<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

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

然后在你的应用主题中添加如下所示的行

 <style name="MyAppTheme" parent="Theme.MaterialComponents.Light.Bridge">
    <!-- this line -->
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

其他回答

创建一个名为rounded_corners_shape的形状

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>
    <solid android:color="@color/white"/>

</shape>

定义一个样式

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

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

在你的自定义BottomSheetDialogFragment上使用这种风格,它会工作的!

 public class CustomDialogFragment extends BottomSheetDialogFragment {
      @Override
      public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(STYLE_NORMAL, R.style. AppBottomSheetDialogTheme);
      }

      ...
    }

这对我很管用。

创建一个背景绘图(例如命名为shape_rounded_dialog):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="@color/color_white" />
    <corners android:topLeftRadius="16dp"
             android:topRightRadius="16dp" />
</shape>

添加下面的样式:

<style name="AppBottomSheetDialogTheme" 
       parent="Theme.MaterialComponents.Light.BottomSheetDialog">

    <item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>

<style name="CustomBottomSheetStyle" 
       parent="Widget.Design.BottomSheet.Modal">

    <item name="android:background">@drawable/shape_rounded_dialog</item>
</style>

在你的DialogFragment中,重写getTheme()方法来返回你的样式。

@Override
public int getTheme() {
    return R.style.AppBottomSheetDialogTheme;
}

正如在其他答案中指出的,当state为BottomSheetBehavior时。STATE_EXPANDED角将被压平。

你可以通过设置BottomSheetBehavior的peekHeight属性并使用自定义样式来克服这个问题。

abstract class BaseBottomSheetFragment : BottomSheetDialogFragment(){

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    
        if (state == BottomSheetBehavior.STATE_EXPANDED) {
            val displayMetrics = DisplayMetrics()
            requireActivity().windowManager!!.defaultDisplay!!.getMetrics(displayMetrics)
            (dialog as BottomSheetDialog).behavior.peekHeight = displayMetrics.heightPixels
        } else {
            (dialog as BottomSheetDialog).behavior.state = state
        }
    }

    override fun getTheme(): Int {
        return R.style.CustomBottomSheetDialog
    }
}

CustomBottomSheetDialog风格

<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheet</item>
    <item name="materialButtonStyle">@style/CustomMaterialButtonStyle</item>
</style>

<style name="CustomMaterialButtonStyle" parent="@style/Widget.MaterialComponents.Button">
    <item name="cornerRadius">@dimen/dialog_bottom_radius</item>
</style>

<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="android:background">@android:color/transparent</item>
    <item name="backgroundTint">@android:color/transparent</item>
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">@dimen/dialog_bottom_radius</item>
    <item name="cornerSizeTopLeft">@dimen/dialog_bottom_radius</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

如果你需要setFitContents=true,我尝试了通过钩子onStateChanged解决方案,但一旦对话框达到扩展状态,它就会从直角闪烁到圆角。这很烦人。

有一种替代的解决方案,它不会导致闪烁,不需要使用私有api,而且更易于阅读(恕我冒犯)。

查看BottomSheetBehavior的代码,我们发现:

  /** True if Behavior has a non-null value for the @shapeAppearance attribute */
  private boolean shapeThemingEnabled;

事实证明,如果形状主题被禁用,MaterialShapeDrawable将不会被使用。我们在BottomSheetBehavior.onLayout()中找到了这个:

// Only set MaterialShapeDrawable as background if shapeTheming is enabled, otherwise will
// default to android:background declared in styles or layout.
if (shapeThemingEnabled && materialShapeDrawable != null) {
  ViewCompat.setBackground(child, materialShapeDrawable);
}

默认为android:background正是我们所需要的,因为这意味着完全控制如何渲染背景。

我们可以通过创建一个单独的样式来禁用材质主题,并将shapeAppearance和shapeAppearance overlay设置为null:

<style name="Theme.YourApp.NoShapeBottomSheetDialog" parent="Theme.MaterialComponents.BottomSheetDialog">
  <item name="bottomSheetStyle">@style/Theme.YourApp.NoShapeButtonSheet</item>
</style>

<style name="Theme.YourApp.NoShapeButtonSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
  <item name="shapeAppearance">@null</item>
  <item name="shapeAppearanceOverlay">@null</item>
</style>

扩展BottomSheetDialogFragment和覆盖onCreateDialog:

public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
  return new BottomSheetDialog(requireContext(),
                R.style.Theme_Grupin_NoShapeBottomSheetDialog);
}

下面的表格现在是裸露的,没有任何背景。所以我们可以添加任何我们想要的背景,没有动画将被触发。

底页对话框具有弯曲的形状和偷看高度

    <!-- BottomSheet Dialog -->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheet</item>

</style>


<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
    <item name="behavior_peekHeight">420dp</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">20dp</item>
    <item name="cornerSizeTopLeft">20dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>

</style>