【问题标题】:Android MaterialCardView cut corner styleAndroid MaterialCardView 切角样式
【发布时间】:2020-07-11 04:47:43
【问题描述】:

我使用了 MaterialCardView

我给了它一个切角样式

但是浏览量离角落很远

IMAGE: Image spacing

我也使用了以下代码:

app:cardPreventCornerOverlay="true"

但它不剪角

IMAGE: not croped image

谁能帮帮我?

<com.google.android.material.card.MaterialCardView
   android:id="@+id/topLayout"
   android:layout_width="0dp"
   android:layout_height="0dp"
   android:clipChildren="true"
   app:cardBackgroundColor="@color/colorBackground"
   app:cardElevation="1.5dp"
   app:layout_constraintBottom_toTopOf="@+id/navigationBar"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/toolbar"
   app:shapeAppearanceOverlay="@style/CardView.Shape.Cut">

   <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginStart="-21dp"
      android:layout_marginTop="-21dp"
      android:layout_marginEnd="-21dp"
      android:layout_marginBottom="-21dp"
      app:layout_constraintBottom_toBottomOf="@+id/topLayout"
      app:layout_constraintEnd_toEndOf="@+id/topLayout"
      app:layout_constraintStart_toStartOf="@+id/topLayout"
      app:layout_constraintTop_toTopOf="@+id/topLayout">

      <androidx.appcompat.widget.AppCompatImageView
          android:layout_width="match_parent"
          android:layout_height="210dp"
          android:scaleType="centerCrop"
          android:src="@drawable/photo_profile" />

   </RelativeLayout>

IMAGE: from top code

如果使用:

app:cardPreventCornerOverlay="true"

IMAGE: cardPreventCornerOverlay

【问题讨论】:

    标签: java android kotlin material-components materialcardview


    【解决方案1】:

    您可以使用材料组件库中的ShapeableImageView,并为其指定与卡片相同的shapeAppearance,以便角匹配。

    https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/imageview/ShapeableImageView.java

    虽然它可能仅作为 alpha 版本提供。

    【讨论】:

    猜你喜欢
    • 2020-10-19
    • 1970-01-01
    • 2020-09-13
    • 2015-10-07
    • 1970-01-01
    • 2020-05-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多