我有一个自定义的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);

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


当前回答

你必须改变底部的主题,以实现顶部圆形布局

创建一个自定义绘制background_bottom_sheet_dialog_fragment.xml:

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

然后在styles.xml上使用drawable作为背景覆盖bottomSheetDialogTheme:

<!--Bottom sheet-->
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
    <item 
    name="android:background">@drawable/background_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" />

这将改变你的底页的背景布局

BottomSheetDialog

class SheetFragment() : BottomSheetDialogFragment() {

    lateinit var binding: SheetFragmentBinding;

  override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog;
    val view = View.inflate(context, R.layout.fragment_bottom_sheet, null);

    binding = DataBindingUtil.bind(view)!!;
    binding.viewModel = SheetFragmentVM();

    dialog.setContentView(view);

    var bottomSheetBehavior = BottomSheetBehavior.from(view.parent as View);
    bottomSheetBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO);

    bottomSheetBehavior.setBottomSheetCallback(object : 
     BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            if (BottomSheetBehavior.STATE_EXPANDED == newState) {
               // do on STATE_EXPANDED
            }
            if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
                // do on STATE_COLLAPSED
            }

            if (BottomSheetBehavior.STATE_HIDDEN == newState) {
                dismiss()

            }
        }

        override fun onSlide(bottomSheet: View, slideOffset: Float) {
           // do on slide
        }
    })

    return dialog
}

其他回答

完整的解决方案:

将下面的样式属性添加到style.xml。

<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/bottom_sheet_background</item>
</style>

然后使用AppBottomSheetDialogTheme从您的代码创建一个底部表对话框。

private fun openBottomSheetTermsCondition() {
    val mBottomSheetDialog = BottomSheetDialog(requireContext(),R.style.AppBottomSheetDialogTheme)
    val sheetView = layoutInflater.inflate(R.layout.bottom_sheet_travel_advice_terms, null)
    mBottomSheetDialog.setContentView(sheetView)
    sheetView.tv_head.setOnClickListener {
        mBottomSheetDialog.dismiss()
    }

    sheetView.webView.loadDataWithBaseURL(null,getString(R.string.privacy_policy_body_html),"text/html", "utf-8", null)
    mBottomSheetDialog.show()
}

我使用下面的绘图来圆底稿背景。

    <?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" />
    <solid android:color="@color/white" />
</shape>

底部表格xml

    <?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_hideable="false"
    app:behavior_peekHeight="@dimen/bottom_sheet_peek_height"
    app:cardCornerRadius="@dimen/spacing_normal"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/spacing_small">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/begin_horizontal_guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="@dimen/activity_vertical_margin" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/begin_vertical_guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="@dimen/activity_horizontal_margin" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/end_vertical_guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_end="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/sheet_header_shadow"
            android:layout_width="match_parent"
            android:layout_height="@dimen/spacing_tiny"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:background="@drawable/bottom_sheet_header_shadow"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_head"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/spacing_normal"
            android:fontFamily="sans-serif-medium"
            android:gravity="start"
            android:padding="@dimen/spacing_small"
            android:text="@string/term_and_condition"
            android:textColor="@color/greyish_brown"
            android:textSize="20sp"
            app:drawableLeftCompat="@drawable/ic_close_black_24dp"
            app:layout_constraintEnd_toEndOf="@id/end_vertical_guideline"
            app:layout_constraintStart_toStartOf="@id/begin_vertical_guideline"
            app:layout_constraintTop_toBottomOf="@+id/begin_horizontal_guideline" />

        <View
            android:id="@+id/line_separation"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="@dimen/spacing_small"
            android:background="@color/blue_gray"
            app:layout_constraintTop_toBottomOf="@+id/tv_head" />

        <WebView
            android:id="@+id/webView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="@id/end_vertical_guideline"
            app:layout_constraintStart_toStartOf="@id/begin_vertical_guideline"
            app:layout_constraintTop_toBottomOf="@id/line_separation" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Create a shape drawable .. which we will use as background for bottom sheet . Provide the appropriate value for radius of top left and right corner . <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:topLeftRadius="24dp" android:topRightRadius="24dp" /> <padding android:top="2dp" /> <solid android:color="@color/white" /> </shape> Now create style for " Bottom sheet dialog fragment " <style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal"> <item name="android:background">@drawable/drawable_bottomsheet_background</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" /> Now create a custom class that will extend BottomSheetDilogFragment ,where you provide your style . open class CustomRoundBottomSheet : BottomSheetDialogFragment() { override fun getTheme(): Int = R.style.BottomSheetDialogTheme override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme) } Now use this class wherever you want to have round corner bottom sheet . eg class BottomSheetSuccess : CustomRoundBottomSheet() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.bottomsheet_shopcreate_success, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) } }

我找到了一个简单的解决办法。 使用com.google.android.material:material:1.6.1

class MyBottomSheet: BottomSheetDialogFragment() {
    
      override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
            super.onViewCreated(view, savedInstanceState)
            disableShapeAnimation()
        }
    
      @SuppressLint("RestrictedApi", "VisibleForTests")
      private fun disableShapeAnimation() {
            try {
                val dlg = dialog as BottomSheetDialog
                dlg.behavior.disableShapeAnimations()
            } catch (ex: Exception) {
                Log.e("BaseBottomSheet", "disableShapeAnimation Exception:", ex)
            }
        }
}

这对我很管用。

创建一个背景绘图(例如命名为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;
}

最简单和最干净的解决方案,对我来说,是把以下4行放在我的片段类的onViewCreated(View View, Bundle savedInstanceState)方法中:

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    View bottomSheet = (View) view.getParent();
    bottomSheet.setBackgroundTintMode(PorterDuff.Mode.CLEAR);
    bottomSheet.setBackgroundTintList(ColorStateList.valueOf(Color.TRANSPARENT));
    bottomSheet.setBackgroundColor(Color.TRANSPARENT);
}

这将允许您的自定义绘制圆角,以正确显示一旦设置为您的片段布局的顶层视图的背景。

本质上,这将覆盖默认的BottomSheetFragment属性关于颜色,tintMode和tintList。

使用它,就不需要打乱样式资源。