Cardview角落背景不透明

20

我有一个自定义的 CardView 支持小部件实现,但当我将其包含在布局文件中时,似乎无法使圆角背景透明。然而,如果我在布局文件中简单地放置 CardView 支持小部件,则它突然起作用了。如何让我自定义的组件的圆角透明呢?

示例

这是我自定义的 CardView 的布局文件:

view_card.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Custom.Widget.CardView">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/default_padding">

    <TextView
        android:id="@+id/view_mainText"
        style="@style/Custom.Widget.TextView.Header"
        android:textColor="@color/instruction_balloon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/view_subText"
        android:textSize="@dimen/text_size_medium"
        android:textColor="@color/instruction_balloon_text"
        android:singleLine="false"
        android:text="Please remove white corners :-("
        android:textIsSelectable="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

样式.xml

<style name="Custom.Widget.CardView" parent="CardView">
    <item name="cardBackgroundColor">@color/card_backgroundColor</item>
    <item name="cardCornerRadius">12dp</item>
</style>

这是我的布局文件,包含了两个CardView。第一个带有白色角落,第二个基本上与view_card.xml相同的布局,但没有白色角落(透明)。

example.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin"
        style="@style/Custom.Widget.CardView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="@dimen/default_padding">

            <TextView
                android:id="@+id/view_mainText"
                style="@style/Custom.Widget.TextView.Header"
                android:textColor="@color/instruction_balloon_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/view_subText"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@color/instruction_balloon_text"
                android:singleLine="false"
                android:text="I have no white corners :-)"
                android:textIsSelectable="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
    ... some other views
</LinearLayout>

更新1

我尝试了Just89提供的解决方案,但在较低版本的安卓系统上会导致崩溃。

 android.graphics.drawable.ColorDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow

经过快速搜索,我找到了下面的帖子:android.graphics.drawable.ColorDrawable不能转换为android.support.v7.widget.RoundRectDrawableWithShadow

答案建议使用setCardBackgroundColor来设置背景颜色。但是这会导致边角出现白色。

更新2

已被接受的答案将解决此问题,但这不是首选解决方案。在创建自定义CardView组件时,我犯了一个错误,导致出现了这些白色边角。请查看答案以了解我犯了什么错误。


https://dev59.com/YF0b5IYBdhLWcg3wT_xr - Suhas Bachewar
不确定那会如何帮助解决我的问题。 - Wirling
6个回答

28

在上下文可用的位置,使用以下代码来自定义实现:

setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent));

编辑:

如果您的 Android 版本低于 Lollipop,请使用以下代码以避免出现上述崩溃。

  if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){
     getBackground().setAlpha(0);
  } else {
     setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent);
  }

不幸的是,这会导致某些设备崩溃。android.graphics.drawable.ColorDrawable 无法转换为 android.support.v7.widget.RoundRectDrawableWithShadow。我将在我的问题中更新一些发现。 - Wirling
我已经编辑了我的答案,并提供了解决崩溃问题的方案。 - Just89
哇,我一直在寻找并尝试了很多解决方案,但都没有成功,只有一个得到2票的答案对我有用。我点赞让它变成了3票 ;) - Muneeb Mirza

5
几年后,我得出结论,在创建复合组件时我犯了一个基本错误。
当制作扩展android.support.v7.widget.CardView的复合组件时,充气的布局XML不应该包含CardView。基本上,您只会将一个CardView添加到另一个CardView中,这将导致我的自定义CardView后面的白色角落。 采纳的答案将解决此问题。但是它并不是完美的解决方案。
有两种方法可以解决实际问题:
1. 复合视图扩展android.support.v7.widget.CardView,布局xml不包含android.support.v7.widget.CardView,而是作为根元素的LinearLayout。样式必须在类中处理。 2. 复合视图扩展LinearLayout,布局xml以android.support.v7.widget.CardView作为根元素。
我选择了第一种解决方案来解决这个问题。我希望这能帮助犯同样错误的人。

1
为什么不把这个解决方案设为被接受的答案呢?我也认为它更加简洁。 - Josselin

1

看起来您正在创建一个自定义的CardView表单,因为出现了这个:

<some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

你的 CardView 可能会扩展某些东西(比如 LinearLayout),并且你可能会在该父 View 中创建另一个子视图。所以只需尝试使用 setBackground(); 将卡片布局的直接父项设置为透明即可。也许这可以帮助你。

1
我曾经遇到过类似的问题,就是在这个截图上显示为曲线拐角处有一个较暗的区域/背景。 screenshot showing weird dark color in the corner
我的解决方法是将cardElevation 设置为0dp。 如果您需要阴影,则此方法可能不适用于您。 app:cardElevation="0dp"

1
将新样式添加到styles.xml文件中,类似于以下内容:
<style name="CardViewRadius">
    <item name="cardBackgroundColor">@color/colorGray</item>
    <item name="cardCornerRadius">18dp</item>
</style>

使用:

<android.support.v7.widget.CardView
        style="@style/CardViewRadius"
        android:layout_marginTop="15dip"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"/>

并且结果为:
在此输入图片描述


0
你可以尝试将圆角视图嵌套在另一个视图/布局中。 这里的外部视图可以具有透明背景,因此即使内部的圆角留下角落空间,也不会被看到,因为外部视图具有透明的背景颜色。 类似于这样:
<RelativeLayout>
android:background = "@color/transparent"
< some.private.namespace.CardView
android:margin="8dp"
.....
/>
</RelativeLayout>

你通过这样做得到了什么输出?它与第一张图片相同还是其他东西? - Shivam Bhalla
结果与第一张图片相同。 - Wirling

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接