欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

学习使用Material Design控件(三)使用CardView实现卡片效果

程序员文章站 2024-02-09 12:23:04
本文主要介绍cardview的使用,cardview是继承自framelayout,使用比较简单,只需要用cardview包含其他view就可以实现卡片效果了。 实现效果...

本文主要介绍cardview的使用,cardview是继承自framelayout,使用比较简单,只需要用cardview包含其他view就可以实现卡片效果了。

实现效果如下:

学习使用Material Design控件(三)使用CardView实现卡片效果

加入依赖库

dependencies {
  ….
  compile 'com.android.support:cardview-v7:22.2.0'
}

layout布局

 <android.support.v7.widget.cardview
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardcornerradius="10dp"
        app:cardelevation="10dp"
        android:layout_marginbottom="@dimen/card_margin"
        android:layout_marginleft="@dimen/card_margin"
        android:layout_marginright="@dimen/card_margin">

        <linearlayout
          style="@style/cardview.content"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">

          <imageview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/book1" />

          <linearlayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginleft="10dp"
            android:orientation="vertical">

            <textview
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/book_title_1"
              android:textappearance="@style/textappearance.appcompat.title"
              android:textcolor="@color/primary_text" />

            <textview
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margintop="2dp"
              android:text="@string/book_description_1"
              android:textcolor="@color/secondary_text" />
          </linearlayout>

        </linearlayout>

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

app:cardbackgroundcolor 设置cardview背景颜色
app:cardcornerradius 设置cardview圆角大小
app:cardelevation 设置cardview阴影高度

项目源码已发布到github,以后慢慢加入其他控件的使用。
 源码地址:materialdesignexample

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。