为了账号安全,请及时绑定邮箱和手机立即绑定

Android零基础入门第71节:CardView简单实现卡片式布局

标签:
Android

还记得我们一共学过了多少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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消