CardView卡片view

Android 5.0的另一个新增加的控件CardView

1.在Gradle中添加CardView包的依赖:

compile ‘com.android.support:cardview-v7:21.0.+‘

2.基本使用:

CardView是一个新增加的UI控件,我们先在代码中定义一个CardView的变量,然后查看源码看看这是个什么玩意。源码先:

public class CardView extends FrameLayout implements CardViewDelegate {  
            ...  
} 

从源码看,CardView继承FrameLayout,所以CardView是一个ViewGroup,我们可以在里面添加一些控件进行布局。既然CardView继承FrameLayout,而且Android中早已有了FrameLayout布局,为什么还有使用CardView这个布局控件呢?我们先来看看官网对此类的注释:

  A FrameLayout  with a rounded corner background and shadow. 

3. CardView新增属性:

  • CardView_cardBackgroundColor 设置背景色
  • CardView_cardCornerRadius 设置圆角大小
  • CardView_cardElevation 设置z轴阴影
  • CardView_cardMaxElevation 设置z轴最大高度值
  • CardView_cardUseCompatPadding 是否使用CompadPadding
  • CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
  • CardView_contentPadding 内容的padding
  • CardView_contentPaddingLeft 内容的左padding
  • CardView_contentPaddingTop 内容的上padding
  • CardView_contentPaddingRight 内容的右padding
  • CardView_contentPaddingBottom 内容的底padding

card_view:cardUseCompatPadding 设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式

card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠  

4.使用:
1、普通使用效果

<android.support.v7.widget.CardView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
        <TextView  
            android:layout_width="match_parent"  
            android:layout_height="70dp"  
            android:text="正常使用效果"  
            android:gravity="center_horizontal|center_vertical"  
            android:textColor="#000000"  
            android:textSize="20sp"  
            android:padding="10dp"  
            android:layout_margin="10dp"/>  
</android.support.v7.widget.CardView>  

效果图: 

2、增加背景色和圆角的效果,注意我们此时使用background属性是没效果的:

<android.support.v7.widget.CardView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        app:cardBackgroundColor="#669900"  
        app:cardCornerRadius="10dp">  
        ...  
</android.support.v7.widget.CardView>  

效果图: 

3、设置z轴阴影

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#669900"
    app:cardElevation="20dp"
    app:cardCornerRadius="10dp">
    ...
</android.support.v7.widget.CardView>

效果图: 

4.在ListView、RecyclerView中一定也有不错的效果,那么现在我们来使用下:首先定义RecyclerView的item的布局:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        app:cardBackgroundColor="#80cbc4"  
        app:cardCornerRadius="10dp"  
        app:cardPreventCornerOverlap="true"  
        app:cardUseCompatPadding="true"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
        <RelativeLayout  
            android:layout_width="match_parent"  
            android:layout_height="100dp"  
            android:padding="5dp">  
            <ImageView  
                android:id="@+id/picture"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_centerInParent="true"  
                android:scaleType="centerCrop" />  
            <TextView  
                android:clickable="true"  
                android:id="@+id/name"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_marginBottom="10dp"  
                android:layout_marginRight="10dp"  
                android:gravity="right|bottom"  
                android:textColor="@android:color/white"  
                android:textSize="24sp" />  
        </RelativeLayout>  
  
</android.support.v7.widget.CardView>  

  

 

时间: 2024-11-03 22:44:20

CardView卡片view的相关文章

android 5.0新特性学习--CardView

CardView继承自FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影.CardView是一个Layout,可以布局其他View. CardView的属性: elevation --CardView的Z轴阴影; cardBackgroundColor--CardView的卡片颜色; cardConerRadius -- CardView卡片的四角圆角矩形程度; 下面xml文件中即表示这个card控件为:矩形程度为8dp,背景颜色为黑色的卡片. <androi

Android Material Design之在RecyclerView中嵌套CardView实现

前言: 第一眼就爱上了Android的Material Design风格.以前倒对Android的界面风格不那么喜欢,扁平化的界面设计真是好看. 其实,这个嵌套操作在实现上并没有什么难点.可是,我还在Eclipse上没有试验成功.后来换到Android Studio上就OK了.以下是实现过程. 笔者开发环境: 系统:Windows 7 旗舰版 IDE:Android Studio v1.0 工具包:cardview-v7-21.0.0.aar recyclerview-v7-21.0.0.aar

简约才是王道? CardView 的使用

发现个好看的东东 CardView,他在support v7包中~~ 顾名思义就是卡片view,可以设置阴影,圆角,等等.. 样子是这样的: 或者你还可以放到listview里 是这样的: http://blog.csdn.net/wingichoy/article/details/50687727 怎么使用 在xml文件中 加入一个CardView <android.support.v7.widget.CardView xmlns:card_view="http://schemas.an

使用swipecard实现卡片视图左右滑动监听以及点击监听

前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但是对于刚入门学安卓的同学们来说理解还是得需要一定的时间,于是在这里我就给大家把他的代码给精简一下步骤,希望能给大家一些帮助. (图片无法上传所以导致图片不可见,大家可以点击我的有道链接查看 http://note.youdao.com/noteshare?id=ef7292c53d507cd0e1f3

动态设置 view 在布局中位置

一.概述 有时项目需要动态设置一个 底部列表,比如 popupwindow ,listview 底部显示 ,所以记录一下 此处, android.support.v7.widget.CardView 中包含了一个listview,而我要实现的是, 点击mLayout这个布局上面的 6个按钮, 在底部弹出不同的listview. 项目中 mLayout是一个 LinearLayout 二.代码如下 View view = View.inflate(getActivity(),R.layout.te

《Android应用开发:CardView的使用》

在使用CardVIew之前,要明白CardView是个什么东西.CardView如Linearlayout.Framelayout一样都是ViewGroup,即其他控件的容器.CardView继承于Framelayout,所以Framelayout的属性他都有,同时CardView还有几个特殊的属性: 在API21(Android L)等级以上拥有属性elevation,意为CardView的Z轴阴影,只有L平台有效.只能通过xml中的elevation属性指定: 其余(2.0以上)有属性car

在Android 窗口小组件(Widget)中显示(StackView,ListView,GridView)集合View

在Android 3.0 中引入了 Collection View Widget.用于在窗口小组件中添加了对集合View 的支持. 如下: (1)StackView 一个卡片View,以层叠的方式显示其子View. (2)ListView 和传统的ListView一样 (3)GridView 网格列表.具体用法和传统的一样. 第一步:创建Widget布局文件    (1)Wdiget的布局文件 路径:res/layout/my_widget_layout.xml <?xml version=&quo

微信小程序隐藏客服按钮,用图片替代&amp;增加提示卡片可随时关闭。

如图,本次案例要做的是右下角的客服按钮和蓝色渐变的提示卡片,可随时关闭的. 微信官方给了客服按钮标签 <contact-button type="default-dark" size="100"></contact-button> 这个标签的样式不可修改,如果我们要换自己想改的图片,需要怎么做呢?就像我图片上的样式.我这个客服控件是放在一个正圆的view里的居中位置,所以,我这里先通过position定位到居中位置,把size放到最大. 然后

Android UI性能优化实战 识别绘制中的性能问题

出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android性能优化典范,发了16个小视频供大家欣赏,当时我也将其下载,通过微信公众号给大家推送了百度云的下载地址(地址在文末,ps:欢迎大家订阅公众号),那么近期google又在udacity上开了系列类的相关课程.有了上述的参考,那么本性能优化实战教程就有了坚实的基础,本系列将结合实例为大家展示如何去识别.