39

我已经在我的应用程序中实现了 CardView 并且一切正常,除了如果我将半径放在卡片上,图像周围会有一点填充。

它看起来像这样: screenshot_2014-12-27-20-31-55

但在android 文档本文中,图像占据了整个卡片视图,所以你能帮我实现吗?

我的布局文件是这样的:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:card_view="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          android:padding="8dp">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardCornerRadius="4dp">

    <ImageView
        android:id="@+id/media_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:alpha="0.8"
            android:background="?attr/colorPrimary"
            android:padding="4dp">

            <TextView
                android:id="@+id/media_download"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:textSize="11sp"/>

            <TextView
                android:id="@+id/category_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:textColor="@color/primary_text"
                android:textSize="12sp"/>

        </RelativeLayout>

</android.support.v7.widget.CardView>

</LinearLayout>

注意:屏幕截图是在棒棒糖之前的设备上捕获的。

4

3 回答 3

82

我再次浏览了开发人员文档,发现:

在 API 20 及之前的版本中,CardView 不会为圆角裁剪 Card 的边界。相反,它会向内容添加填充,使其不会与圆角重叠。

所以对于棒棒糖之前的设备,我必须调用setPreventCornerOverlap (false);cardview。

更新:同样可以通过 xml 代码通过添加app:cardPreventCornerOverlap="false"卡片视图来完成。

于 2014-12-27T16:01:10.260 回答
2

设置app:cardPreventCornerOverlap="false"将解决问题,但也会删除所有预棒棒糖设备的角落。如果要在所有设备上使用圆角,请手动添加:

card_view_round_corner_background.xml

    <?xml version="1.0" encoding="utf-8"?>      
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">        
    <item>      
    <shape android:shape="rectangle">                
        <solid android:color="@color/transparent"/>                
        <stroke  android:width="2dp" android:color="@color/Black"/>
        </shape>
        </item>
        <item>            
    <shape android:shape="rectangle">
    <solid android:color="@color/transparent"/>             
    <corners android:radius="6dp"/>              
     <stroke  android:width="2dp" android:color="@color/Black"/>           
     </shape>
    </item>
    </layer-list>

在卡片视图中

    <android.support.v7.widget.CardView android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"card_view:cardCornerRadius="@dimen/conner_radius"
    card_view:cardBackgroundColor="@color/Black"
    card_view:cardElevation="@dimen/z_card">

    <!-- Put your card contain here -->  

    <View
    android:background="@drawable/card_view_round_corner_border"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

但这个解决方案只适用于纯色背景,如黑色或白色。

于 2016-12-15T10:33:40.607 回答
-1

只需使用 FrameLayout 而不是 LinearLayout,它就可以工作

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-4dp">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardPreventCornerOverlap="false"
        card_view:cardUseCompatPadding="true"

        >

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal"
            >

            <ImageView
                android:id="@+id/imageView"
                android:tag="image_tag"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_weight="2"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textViewName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:text="Android Name"
                    android:textAppearance="?android:attr/textAppearanceLarge"/>

                <TextView
                    android:id="@+id/textViewVersion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"

                    android:text="Android Version"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>

            </LinearLayout>
        </FrameLayout>

    </android.support.v7.widget.CardView>

</FrameLayout>
于 2017-12-22T10:01:18.980 回答