了解CardView

作者: 覆水无言 | 来源:发表于2019-12-05 14:14 被阅读0次

    介绍

    Android 5.0之后Google提出了Material Design风格,界面的开发加入了z轴,也就是elevation属性,CardView就是Material Design风格设计的典型例子,从名字可以知道他是一个卡片式的view, 数据viewGroup的一种,它继承自FrameLayout,所以它具有FrameLayout的属性。

    属性

    • app:cardBackgroundColor 这是设置背景颜色
    • app:cardCornerRadius 这是设置圆角大小,这个比较常用
    • app:cardElevation 这是设置z轴的阴影
    • app:cardMaxElevation 这是设置z轴的最大高度值
    • app:cardUseCompatPadding 是否使用CompatPadding
    • app:cardPreventCornerOverlap 是否使用PreventCornerOverlap
    • app:contentPadding 设置内容的padding
    • app:contentPaddingLeft 设置内容的左padding
    • app:contentPaddingTop 设置内容的上padding
    • app:contentPaddingRight 设置内容的右padding
    • app:contentPaddingBottom 设置内容的底padding

    属性介绍

    别的属性都好理解,以下两个属性都是为了区分5.0以上和5.0以下界面显示状态的,

    1. app:cardUseCompatPadding=“true|false" :
      是关于阴影设置的,5.0以下没有z轴一说,也就没有阴影,但要5.0以上和以下界面显示一致,在5.0以下cardview绘制时阴影的绘制会在cardview上设置一个padding来提供空间绘制阴影,5.0以上自动会有这个空间来绘制阴影,这个属性的true和false就是确定用不用这个padding,所以在设置true时cardview会比false时大一点。

      上图
    2. app:cardPreventCornerOverlap="true|false"
      这个设置是关于圆角的,Android 5.0一下不会裁剪cardview内image的边界来获取圆角图片来显示,这个属性的ture和false就是确定cardview里内容怎么显示的,corner是否over lap(圆角覆盖内容)
      true:表示一圆角为主,5.0一下就会为了显示圆角,内容和圆角会出现一个padding,
      false:表示不覆盖内容以内容为主要,这个时候5.0一下会显示成整个内容而显示不出来圆角。

      上图

    使用

    依赖:implementation 'androidx.cardview:cardview:1.0.0' 使用Androidx

        <androidx.cardview.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:cardCornerRadius="10dp"
            app:cardElevation="5dp" 
            app:cardBackgroundColor="#1C93EC">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="250dp"
                    android:background="@drawable/card_view" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="nihao"
                    android:textSize="20dp"
                    android:gravity="center"/>
            </LinearLayout>
    
    
        </androidx.cardview.widget.CardView>
    

    相关文章

      网友评论

        本文标题:了解CardView

        本文链接:https://www.haomeiwen.com/subject/agpdgctx.html