Material Design之CardView的使用
本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到。。。
使用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就是那么简单!!!
Material Design之CardView的使用的更多相关文章
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- ANDROID L——Material Design详解(UI控件)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- 直接拿来用!十大Material Design开源项目
来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...
- 【Android】进入Material Design时代
由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...
- Material Design UI Widgets
Android L 开发者预览支持库提供两个新的Widgets,RecyclerView和CardView.使用这两个Widgets可以显示复杂的Listview和卡片布局,这两个Widgets默认使 ...
- Android5.0新特性——Material Design简介
Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...
- Material Design For Xamarin.Forms
最近,升级 Xamarin.Forms 到最新版本后,发现Droid 项目下引入了以下几个依赖包: Xamarin.Android.Support.DesignXamarin.Android.Supp ...
- Android Material Design之Toolbar与Palette
转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...
- ANDROID L——Material Design综合应用(Demo)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...
随机推荐
- 排查Full GC
我们的Java应用因频繁FULL GC导致性能降低很多,经过多人的定位也没有结论,于是我自主请命,经过一天的研究终于搞定了,现把经验与大家共享,相关的gc日志如下: 4.758: [Full GC [ ...
- 新浪微博Oauth2.0授权认证及SDK、API的使用(Android)
---------------------------------------------------------------------------------------------- [版权申明 ...
- [系统运维]Supervisord安装和启动程序
supervisord 是client/server 系统 把不是守护进程的进程变成守护进程 监控它自己启动的进程,类似于看门狗 可以作为开机启动的一种封装 可以精确控制进程的状态,而不是pidfil ...
- Servlet - 会话跟踪
Servlet 标签 : Java与Web 会话跟踪 HTTP本身是"无状态"协议,它不保存连接交互信息,一次响应完成之后即连接断开,下一次请求需要重新建立连接,服务器不记录上次连 ...
- React Native实现一个自定义模块
概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...
- JobTracker,TaskTracker简述
JobTracker 负责接收用户提交的作业,负责启动.跟踪任务执行.JobSubmissionProtocol是JobClient与JobTracker通信的接口.InterTrackerProto ...
- 4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射(
新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...
- 03SpringMVC,Spring,Hibernate整合(Date时间转换)
项目结构 2 web.xml的配置内容如下: <?xmlversion="1.0"encoding="UTF-8"?> <web-app ...
- CMake搜索Boost1.57失败及解决
CMake更新到3.1.0,Boost更新到1.57,结果CMake搜索Boost失败: Unable to find the Boost header files. Please set BOOS ...
- 如何判断webview是不是滑到底部
getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离. getHeight()或者getBottom()方法都返回当前webview这个容器的高度 ge ...