Material Design之CardView的使用
2015-07-10 14:11
260 查看
本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到。。。
使用CardView可以实现卡片式布局效果,非常好看,卡片还可以包含圆角、阴影、背景。CardView是一个ViewGroup,布局时包含其它的View从而实现优雅界面效果。
首先来看看个界面效果:
是不是很漂亮啊!其实使用起来很简单,把它作为一个普通的Layout使用即可。如下:
其它的亦是如此,就不多说了,这里为了看看CardView效果就只简单的加了一个TextView作为演示。
整个布局activity_main.xml:
设置CardView的点击事件和其它控件一样:
下面主要介绍一下在CardView中比较重要的常用属性:
前几个属性的意思都很好理解,就不说了。
设置:
效果:
设置:
效果:
我们从布局预览中可以看出,设置这个后布局往里面缩小了一点,即有一点填充。
好了,CardView就是那么简单!!!
使用CardView可以实现卡片式布局效果,非常好看,卡片还可以包含圆角、阴影、背景。CardView是一个ViewGroup,布局时包含其它的View从而实现优雅界面效果。
首先来看看个界面效果:
是不是很漂亮啊!其实使用起来很简单,把它作为一个普通的Layout使用即可。如下:
<android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView>这个对应的效果就是刚刚图片上的第一个效果。
其它的亦是如此,就不多说了,这里为了看看CardView效果就只简单的加了一个TextView作为演示。
整个布局activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:id="@+id/card_view2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#303069" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:id="@+id/card_view3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="8dp" app:cardElevation="5dp"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:src="@mipmap/bg" /> </android.support.v7.widget.CardView> </LinearLayout>
设置CardView的点击事件和其它控件一样:
CardView mCardView = (CardView) findViewById(R.id.card_view); mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this,"点击了CardView",Toast.LENGTH_LONG).show(); } });
下面主要介绍一下在CardView中比较重要的常用属性:
app:cardElevation阴影的高度
app:cardMaxElevation阴影最大高度
app:cardBackgroundColor卡片的背景色
app:cardCornerRadius卡片的圆角大小
app:contentPadding卡片内容于边距的间隔
app:contentPaddingBottom
app:contentPaddingTop
app:contentPaddingLeft
app:contentPaddingRight
app:contentPaddingStart
app:contentPaddingEnd
app:cardUseCompatPadding设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式
app:cardPreventConrerOverlap在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠
前几个属性的意思都很好理解,就不说了。
contentPadding这个意思我们来看一张效果图你就明白了:
设置:
app:contentPadding="20dp"
效果:
cardUseCompatPadding
设置:
app:cardUseCompatPadding="true"
效果:
我们从布局预览中可以看出,设置这个后布局往里面缩小了一点,即有一点填充。
好了,CardView就是那么简单!!!
相关文章推荐
- Python __Underscore__ Methods
- Material Design之CardView的使用
- HTTP权威指南(读书笔记) 1
- 关于UIButton的 setBackgroundImage 和 setImage区别
- apache日志切割
- Android 以Dialog的方式显示Activity,并且处理背景四个角为圆角,去掉黑角
- android 几种网络请求方式
- 如何提高生产力
- CG基础01-原理->数据类型
- 第五章 循环结构(一)
- 更新xcode6 运行报错 Command /usr/bin/codesign failed with exit code 1
- UITableView 的常识
- 定制iOS 7中的导航栏和状态栏
- 大学毕业生上班第一天6月3号码
- 简单几步实现返回顶部效果
- 第五章 循环结构(一)
- rpm安装找不到.so库文件(linux动态库连接的相关知识)
- 文章标题
- 第四章 选择结构(二)
- hash算法学习