【问题标题】:Round Top Left/Right Corner CardView Android Not work圆形左上角/右上角 CardView Android 不工作
【发布时间】:2021-05-04 04:21:40
【问题描述】:

我有一个材料卡片视图作为根项目。我想为它添加圆形的左上角和右上角。我将这些属性添加到它的样式中,但它稍作更改,无法正常工作。

ItemForRV:

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.card.MaterialCardView
    android:layout_width="@dimen/_150sdp"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardViewRoundedtop"
    xmlns:android="http://schemas.android.com/apk/res/android">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
 >


            <com.google.android.material.textview.MaterialTextView
                android:background="@color/primaryColor"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@id/imgFastfood"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                tools:text="FastFood"
                android:id="@+id/TVNameCategory"
                />


            <ImageView
                app:layout_constraintTop_toBottomOf="@id/TVNameCategory"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_110sdp"
                tools:src="@drawable/fastfood"
                android:id="@+id/imgFastfood"
                />

        </androidx.constraintlayout.widget.ConstraintLayout>


    </com.google.android.material.card.MaterialCardView>

风格:

<style name="CardViewRoundedtop" parent="Widget.MaterialComponents.CardView">

<item name="android:topLeftRadius">16dp</item>
    <item name="android:topRightRadius">16dp</item>
    <item name="android:bottomLeftRadius">0dp</item>
    <item  name="android:bottomRightRadius">0dp</item>

</style>

P.S:我读到了一个错误,我必须将左下/右下半径更改为 1dp。它根本没有帮助。

现在:

我所期待的:

为了显示在这里,我使用了 app:cardCornerRadius="16dp" 并且设置了所有四个角。

编辑: 我使用了“cornerSizeTopRight”。它似乎以不同的方式工作。

【问题讨论】:

  • @SlothCoding 因为我发现cornerSizeTopRight 有效但不是我想要的方式。不像 CornerRadius。我上传有问题的结果。
  • 因为你的图片没有圆角。尝试在 ImageView 上使用 scale = "centerCrop"。我总是在 CardView 中使用 RelativeLayout 并将图像缩放到 centerCrop ,然后它就可以工作了。
  • @SlothCoding 。不,这与舍入的 ImageView 无关。如您所见,我在 cardview 顶部使用 TextView 但它没有剪裁。我之前在stackoverflow中看到过这种方法。它只是剪切根项,这里是 CardView,不像 CornerRadius 那样剪切根项内的所有项。我认为一种方法是创建自定义类并扩展 cardView 来修改它。无论如何,Tnx。

标签: android android-layout android-cardview


【解决方案1】:

好吧,我为你找到了解决方案。只需将背景颜色从TextView 更改为CardView。所以从MaterialTextView中删除下一行

android:background="@color/colorPrimary"

并将这些行添加到您的 MaterialCardView:

app:cardBackgroundColor="@color/colorPrimary"
app:cardPreventCornerOverlap="false"

也在你的ImageView 中添加这个:

android:scaleType="centerCrop"

之后你会得到这个:

这是我的完整版XML code:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    style="@style/MyCardView"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:cardBackgroundColor="#EDC911"
    app:cardPreventCornerOverlap="false"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.textview.MaterialTextView
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/imgFastfood"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            tools:text="FastFood"
            android:id="@+id/TVNameCategory"/>

        <ImageView
            app:layout_constraintTop_toBottomOf="@id/TVNameCategory"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:layout_height="110dp"
            tools:src="@drawable/Screenshot_1"
            android:id="@+id/imgFastfood"/>

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

编辑:

如果您的图片是透明的并且背景是黄色的,只需将此行添加到您的ImageView

android:background="@android:color/white

这是style.xml

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

【讨论】:

  • 是的,它正在工作,但在其他情况和更复杂的布局中,我不确定这是一种有效的方式。
猜你喜欢
  • 2013-05-10
  • 2021-08-21
  • 1970-01-01
  • 1970-01-01
  • 2021-01-29
  • 1970-01-01
  • 2018-03-01
  • 2012-02-17
  • 2020-10-27
相关资源
最近更新 更多