MaterialCardView 圆角仅从顶部

Question

我只是想让我的bottomSheetDialog仅从右上角和左上角变圆。

我想让我的bottomSheetDialog从顶角开始变圆，但从下面变直..

我。尝试了多种方法来解决

布局.xml

<com.google.android.material.card.MaterialCardView
        android:id="@+id/cardViewInfo"
        android:layout_width="match_parent"
        style="@style/CustomCardViewCornerStyle"
        android:layout_height="wrap_content"
        android:background="@color/red_no"
        android:clickable="true"
        android:focusable="true"
        app:cardElevation="5dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/imageViewPhoto"
                android:layout_width="match_parent"
                android:minHeight="200dp"
                android:layout_height="160dp"
                android:scaleType="center"
                app:layout_constraintDimensionRatio="h,375:240"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/imageViewCross"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:padding="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_close_btn" />

            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewExpiryDate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="24dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorBlackLight"
                android:textSize="10sp"
                android:lineHeight="12sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageViewPhoto"
                tools:text="Udløber xx.xx.xxxx" />

            <matas.matas.core.control.TextViewDMSerifRegular
                android:id="@+id/textViewName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginTop="6dp"
                android:gravity="start"
                android:textColor="@color/black"
                android:textSize="24sp"
                android:lineHeight="28.8sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewExpiryDate"
                tools:text="40% på Striberne" />

            <matas.matas.core.control.TextViewInterSemiBold
                android:id="@+id/textViewTeaserText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="24dp"
                android:gravity="left"
                android:textColor="@color/black"
                android:textSize="14sp"
                android:lineHeight="21sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewName"
                tools:text="Du i hele februar 40% på ALLE produkter fra Matas striber." />


            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewDisclaimerPlus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginBottom="16dp"
                android:gravity="start"
                android:textColor="@color/colorBlackLight"
                android:textSize="12sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewTeaserText"
                app:layout_constraintBottom_toBottomOf="parent"
                tools:text="Kontakt en materialist her i butikken og vis dit medlemskort, så får du rabatten på dit køb" />

            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewDisclaimerNonPlus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginBottom="16dp"
                android:gravity="start"
                android:textColor="@color/colorBlackLight"
                android:textSize="12sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewTeaserText"
                app:layout_constraintBottom_toBottomOf="parent"
                tools:text="Kontakt en materialist her i butikken og vis dit medlemskort, så får du rabatten på dit køb" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

我尝试了多种方法来使我的图像变圆和全宽，例如

Glide.with(binding.imageViewPhoto)
                            .load(url)
                            .transform(GranularRoundedCorners(120.0f,120.0f,0.0f,0.0f))
                            .into(binding.imageViewPhoto)

也试过

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, matas.matas.core.R.style.TopRoundedBottomSheetDialog)
    }

我已经在 onCreate 中实现了主题，并尝试赋予它形状。

Answer 1

Material Components 采用 shapeAppearance 参数，您可以使用它为底部工作表提供正确的形状，尝试使用它而不是样式。下面给出的例子

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

然后您可以按照如下方式向您的材料卡提供此样式

    <com.google.android.material.card.MaterialCardView
        app:shapeAppearance="@style/shape_appearance_bottom_sheet"
    ....