专栏首页分享达人秀学会使用CardView,简单实现卡片式布局效果

学会使用CardView,简单实现卡片式布局效果

还记得我们一共学过了多少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 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文件,加载上面的布局文件,填充的代码如下:

public class CardViewActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.cardview_layout);    }}

修改启动的Activity,运行程序可以看到下图所示效果。

三、CardView示例2

CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为一种容器使用。CardView应该被使用在显示层次性的内容时;在显示列表或网格时更应该被选择,因为这些边缘可以使得用户更容易去区分这些内容。

接下来简单定义一个CardView的item项,并在Java代码中修改CardView的属性,关于结合ListView和RecyclerView的部分比较简单,这里不做过多介绍。

继续再上一个案例的基础上进行修改,修改后的cardview_layout.xml文件代码如下:

<?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:src="@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组件并动态修改其属性,修改后的代码如下:

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_layout2);        
    mCardView = (CardView) findViewById(R.id.cardview);// 设置卡片圆角的半径大小      
          mCardView.setRadius(20);        // 设置卡片背景的颜色        
          mCardView.setCardBackgroundColor(Color.RED);        // 设置阴影部分大小        
          mCardView.setCardElevation(10);        // 设置卡片距离阴影大小        
          mCardView.setContentPadding(10, 10, 10, 10);    }}

重新运行程序,可以得到下图所示效果。

至此,CardView的学习到此告一段落,是不是发现使用起来也非常简单,更多用法建议自己去摸索。

本文分享自微信公众号 - 分享达人秀(ShareExpert),作者:鑫鱻

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何正确使用padding和margin

    前面两期我们学习了LinearLayout线性布局的方向、填充模型、权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距。 ...

    分享达人秀
  • 新推出的GridLayout网格布局

    本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有很多前者没有的东西,也更加好用...

    分享达人秀
  • Android中基于监听的事件处理

    上一期我们学习了Android中的事件处理,也详细学习了Android中基于监听的事件处理,同时学会了匿名内部类形式,那么本期继续来学习其他四种事件监听...

    分享达人秀
  • Android实现注册登录界面的实例代码

    本文讲述了在linux命令下导出导入.sql文件的方法。分享给大家供大家参考,具体如下:

    砸漏
  • Android Studio实现简易计算器

    砸漏
  • Android 一款十分简洁、优雅的日记 APP

    先来一波日记的展示吧,虽然内容比较简单,但还是设计的非常用心的,因此这款 APP 还是非常简洁和优雅的

    developerHaoz
  • android在代码中怎么设置 RadioGroup的默认值

    这种需求一般是   个人中心 需要的   当用户修改了个人资料之后,下次在修改的话需要从服务器中拿到数据   

    wust小吴
  • 教育系统APP(四)

    “我”的模块 掌握修改密码功能的开发,实现用户密码的修改 掌握设置密保功能的开发,并且通过密保可以找回用户密码

    达达前端
  • Android中使用TagFlowLayout制作动态添加删除标签

    简单的效果图(使用开源库)[FlowLayout](“ https://github.com/hongyangAndroid/FlowLayout “)

    砸漏
  • Android 实现页面跳转

    android使用Intent来实现页面跳转,Intent通过startActivity(Intent intent)或startActivityForResu...

    砸漏

扫码关注云+社区

领取腾讯云代金券