CardView-卡片布局

作者: NoBugException | 来源:发表于2019-07-08 17:36 被阅读35次

在有些项目中要求图片有阴影,并且边角为椭圆,这时就要考虑是否使用CardView(卡片布局)。

我们首先需要导入依赖包

implementation 'com.android.support:cardview-v7:28.0.0'

然后,了解一下CardView基本写法

<android.support.v7.widget.CardView
    android:id="@+id/cv_demo"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="50dp"
    android:layout_centerInParent="true">
    
</android.support.v7.widget.CardView>

接下来,开始讲解一下CardView的基本属性:

  • app:cardBackgroundColor="@color/colorPrimary":添加背景
图片.png
  • app:cardElevation="18dp":设置阴影大小
图片.png
  • app:cardMaxElevation="18dp":设置最大阴影大小

  • app:cardPreventCornerOverlap="true":在v20和之前的版本中添加内边距,这个属性是为了防止卡片内容和边角的重叠,考虑到兼容性,还是将这个属性置为true比较好

  • app:cardUseCompatPadding="true":在在API21之前和之后的版本中,阴影部分的大小有差异性,为了兼容性考虑,将cardUseCompatPadding属性置为true比较好

  • app:cardCornerRadius="10dp":为四个角设置圆角

图片.png
  • contentPadding、contentPaddingLeft、contentPaddingRight、contentPaddingBottom、contentPaddingBottom:设置内边距

      app:contentPadding="10dp"
      app:contentPaddingLeft="10dp"
      app:contentPaddingRight="10dp"
      app:contentPaddingBottom="10dp"
      app:contentPaddingTop="10dp"
    

到这里,CardView的属性已经讲完了。

CardView其实是一个ViewGroup,它可以添加子布局,假如添加一张图片:

[设置了内边距]

图片.png

[没有设置内边距]

图片.png

xml代码如下:

<android.support.v7.widget.CardView
    android:id="@+id/cv_demo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="50dp"
    android:layout_centerInParent="true"
    app:cardBackgroundColor="@color/colorPrimary"
    app:cardElevation="18dp"
    app:cardMaxElevation="18dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:cardCornerRadius="10dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/pic2"/>

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

[本章完...]

相关文章

  • CardView-卡片布局

    在有些项目中要求图片有阴影,并且边角为椭圆,这时就要考虑是否使用CardView(卡片布局)。 我们首先需要导入依...

  • CardView-卡片式布局

    一、简介 CardView 是卡片式布局的控件,继承自 FrameLayout ,不过提供了一些属性,如圆角、阴影...

  • Android控件<第十八篇>:CardView-卡片布局

    在有些项目中要求图片有阴影,并且边角为椭圆,这时就要考虑是否使用CardView(卡片布局)。 我们首先需要导入依...

  • 布局

    单栏布局两栏布局三栏布局风景列表卡片

  • 卡片布局

    CardView 卡片布局 展示效果如同将内容放在卡片中一样,提供圆角,投影等。build.gradle中添加依赖...

  • FlutterApp首页实现

    首页实现总结 目录 根布局 Banner图 AppBar 卡片布局 根布局 根布局使用Scaffold,这个是ma...

  • collectionView卡片流水布局

    卡片式流水布局可以 ##自定义布局-继承UICollectionViewFlowLayout ###重写prepa...

  • 仿探探层叠布局

    技术点 1.在不触摸屏幕的情况下,卡片呈现层叠布局。 2.拖拽时,下层的布局随最上层卡片的位置放大或缩小 层叠布局...

  • Flutter Card卡片布局

    Card卡片布局 main.dart代码: 【效果】如下:

  • 卡片布局UICollectionViewFlowLayout

网友评论

    本文标题:CardView-卡片布局

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