使用CardView实现圆角或圆形的效果

Posted 2023-02-04 yuminfeng728

前言

CardView是android 5.0 中一种全新的控件，可以实现圆角和阴影效果。

添加依赖

compile ‘com.android.support:cardview-v7:23.4.0’

开始使用

CardView是一个新增的UI控件。我们通过源码可以看出：
public class CardView extends FrameLayout｛…｝
它继承了FrameLayout布局，所以我们可以把它当成一个容器来使用。

常用属性
CardView_cardBackgroundColor：设置背景色
CardView_cardCornerRadius：设置圆角角度大小
CardView_cardElevation：设置z轴阴影大小
CardView_cardMaxElevation：设置z轴最大高度值
CardView_cardUseCompatPadding：是否使用CompadPadding，设置内边距，v21+的版本和之前的版本仍旧具有一样的计算方式
CardView_cardPreventCornerOverlap：是否使用PreventCornerOverlap，在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠
CardView_contentPadding：内容的padding
CardView_contentPaddingLeft：内容的左padding
CardView_contentPaddingTop：内容的上padding
CardView_contentPaddingRight：内容的右padding
CardView_contentPaddingBottom：内容的底padding

布局文件

    <android.support.v7.widget.CardView
                android:layout_width="@dimen/margin_84"
                android:layout_height="@dimen/margin_68"
                app:cardCornerRadius="@dimen/margin_5"
                app:cardElevation="0dp"
                app:cardUseCompatPadding="false">

                <ImageView
                    android:id="@+id/voucher_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:scaleType="fitXY"
                    android:src="@drawable/loadingimage"/>

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

简单实现圆形ImageView

设置CardView宽高相等，CardView设置圆角的半径为宽高的一半，就是一个圆形效果了。例如：

<android.support.v7.widget.CardView
    android:id="@+id/cv_img_activity"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cardCornerRadius="100dp"
    app:cardElevation="10dp"
    app:cardPreventCornerOverlap="true">

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

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