还记得我们一共学过了多少UI控件了吗?都掌握的怎么样啊。
安卓中一些常用控件学习得差不多了,今天再来学习一个新的控件CardView,在实际开发中也有非常高的地位。
一、CardView简介
CardView是Android 5.0系统引入的控件,相当于FragmentLayout布局控件然后添加圆角及阴影的效果。
CardView继承自Framelayout,所以FrameLayout所有属性CardView均可以直接拿来用,不过CardView还有自己独有的属性,常用属性如下:
· app:cardElevation:设置阴影的大小。
· app:cardMaxElevation:设置阴影最大高度。
· app:cardBackgroundColor:设置卡片的背景色。
· app:cardCornerRadius:设置卡片的圆角大小。
· app:contentPadding:设置内容的padding。
· app:contentPaddingTop:设置内容的上padding。
· app:contentPaddingLeft:设置内容的左padding。
· app:contentPaddingRight:设置内容的右padding。
· app:contentPaddingBottom:设置内容的底padding。
· app:cardUseCompatPadding:是否使用CompatPadding。
· app:cardPreventConrerOverlap:是否使用PreventCornerOverlap。
这里有一点需要值得注意,之前学习到的控件属性都是android:开头的,而这里所列的属性是app:开头的,如果继续使用默认的会提示找不见对应属性,需要我们定义一个app命名空间,在布局文件中需要加入xmlns:app="http://schemas.android.com/apk/res-auto"语句,具体见后续案例,这里不作过多介绍,后续再详细学习。
二、CardView示例1
接下来通过几个简单的小示例程序来进一步学习CardView。
继续使用WidgetSample工程的advancedviewsample模块,首先需要添加支持库,具体操作步骤同之前分享的揭开RecyclerView庐山真面目,这里不再重复分享。这次输入的关键字是cardview,即可完成CardView依赖库的添加。
在src/main/res/layout/目录下创建cardview_layout.xml文件,在其中填充如下代码片段:
[代码]xml代码:
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text=" 正常使用效果"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="10dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#669900"
app:cardCornerRadius="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text=" 设置背景和标签"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="20dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#874528"
app:cardElevation="20dp"
app:cardCornerRadius="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text=" 设置阴影"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="10dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
|
然后新建CardViewActivity.java文件,加载上面的布局文件,填充的代码如下:
[代码]java代码:
?
1 2 3 4 5 6 7 8 | public class CardViewActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardview_layout);
}
}
|
三、CardView示例2
CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为一种容器使用。CardView应该被使用在显示层次性的内容时;在显示列表或网格时更应该被选择,因为这些边缘可以使得用户更容易去区分这些内容。
接下来简单定义一个CardView的item项,并在Java代码中修改CardView的属性,关于结合ListView和RecyclerView的部分比较简单,这里不做过多介绍。
继续再上一个案例的基础上进行修改,修改后的cardview_layout.xml文件代码如下:
[代码]xml代码:
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cardview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="15dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/image_01"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:clickable="true"
android:gravity="right|bottom"
android:text="CardView 作为item使用"
android:textColor="@android:color/white"
android:textSize="24sp"/>
</android.support.v7.widget.CardView>
|
继续修改CardViewActivity.java文件,获得CardView组件并动态修改其属性,修改后的代码如下:
[代码]java代码:
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
/**
* @ 创建者 鑫鱻
* @ 描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert
*/
public class CardViewActivity extends AppCompatActivity {
private CardView mCardView = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardview_layout);
mCardView = (CardView) findViewById(R.id.cardview);
// 设置卡片圆角的半径大小
mCardView.setRadius(20);
// 设置卡片背景的颜色
mCardView.setCardBackgroundColor(Color.RED);
// 设置阴影部分大小
mCardView.setCardElevation(10);
// 设置卡片距离阴影大小
mCardView.setContentPadding(10, 10, 10, 10);
}
}
|
至此,CardView的学习到此告一段落,是不是发现使用起来也非常简单,更多用法建议自己去摸索。
今天就先到这里,如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!
原文链接:http://www.apkbus.com/blog-205190-72829.html