Android新特性之CardView的简单使用

Android新特性之CardView的简单使用

在上篇文章中,我们学习了RecyclerView的简单使用,这边文章我们学习下Android 5.0的另一个新增加的控件CardView。首先讲解写CardView的基本使用,然后在结合RecyclerView使用CardView进行填充写个小实例。

环境配置

一、在Eclipse的环境中配置同上篇文章,引入android.support.v7包进行使用。参照文章:RecyclerView的简单使用
二、在Android Studio中进行使用,我们需要只需要在Gradle中添加CardView包的依赖即可进行使用。

compile 'com.android.support:cardview-v7:21.0.+'

基本使用

CardView是一个新增加的UI控件,我们先在代码中定义一个CardView的变量,然后查看源码看看这是个什么玩意。话说Android Studio中查看源码特方便,比Eclipse强很多。源码先:

public class CardView extends FrameLayout implements CardViewDelegate {
            ...
    }

从源码看,CardView继承FrameLayout,所以CardView是一个ViewGroup,我们可以在里面添加一些控件进行布局。既然CardView继承FrameLayout,而且Android中早已有了FrameLayout布局,为什么还有使用CardView这个布局控件呢?我们先来看看官网对此类的注释

A FrameLayout
with
a
rounded corner background and
shadow.

这个FrameLayout特殊点就是有rounded corner(圆角)和shadow(阴影),这个就是它的特殊之处,回首往日,我们需要自定义shape文件进行实现圆角和阴影的设计,现在google的大牛已经把它设计为CardView的属性供我们设置进行使用。下面我们看看CardView新增了哪些属性:

  • CardView_cardBackgroundColor 设置背景色
  • CardView_cardCornerRadius 设置圆角大小
  • CardView_cardElevation 设置z轴阴影
  • CardView_cardMaxElevation 设置z轴最大高度值
  • CardView_cardUseCompatPadding 是否使用CompadPadding
  • CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
  • CardView_contentPadding 内容的padding
  • CardView_contentPaddingLeft 内容的左padding
  • CardView_contentPaddingTop 内容的上padding
  • CardView_contentPaddingRight 内容的右padding
  • CardView_contentPaddingBottom 内容的底padding

card_view:cardUseCompatPadding 设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式

card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠

下面开始简单的进行使用:
1、普通使用效果

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:text="正常使用效果"
            android:gravity="center_horizontal|center_vertical"
            android:textColor="#000000"
            android:textSize="20sp"
            android:padding="10dp"
            android:layout_margin="10dp"/>
    </android.support.v7.widget.CardView>

效果图: 

2、增加背景色和圆角的效果,注意我们此时使用background属性是没效果的:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#669900"
        app:cardCornerRadius="10dp">
        ...
    </android.support.v7.widget.CardView>

效果图: 

3、设置z轴阴影

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#669900"
    app:cardElevation="20dp"
    app:cardCornerRadius="10dp">
    ...
</android.support.v7.widget.CardView>

效果图: 

通过上面的演示,我们发现CardView的卡片布局效果很不错,如果用在ListView、RecyclerView中一定也有不错的效果,那么现在我们来使用下。

首先定义RecyclerView的item的布局:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:cardBackgroundColor="#80cbc4"
        app:cardCornerRadius="10dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:padding="5dp">
            <ImageView
                android:id="@+id/picture"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop" />
            <TextView
                android:clickable="true"
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="10dp"
                android:gravity="right|bottom"
                android:textColor="@android:color/white"
                android:textSize="24sp" />
        </RelativeLayout>

    </android.support.v7.widget.CardView>

然后定义一个交互的实体:

package com.example.dsw.cardviewdemo;

    /**
     * Created by dsw on 2015/9/30.
     */
    public class ImageInfor {
        private String name;
        private int imageId;

        public ImageInfor(int imageId, String name) {
            this.imageId = imageId;
            this.name = name;
        }

        public int getImageId() {
            return imageId;
        }

        public void setImageId(int imageId) {
            this.imageId = imageId;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }

然后我们直接在MainActivity中进行处理。

public class MainActivity extends Activity {
        private RecyclerView mRecyclerView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
            List<ImageInfor> list = new ArrayList<>();
            list.add(new ImageInfor(R.mipmap.caiyilin, "蔡依林"));
            list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));
            list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));
            list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));
            list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));
            list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));

            RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
            mRecyclerView.setLayoutManager(manager);
            mRecyclerView.setItemAnimator(new DefaultItemAnimator());
            MyAdapter myAdapter = new MyAdapter(list);
            mRecyclerView.setAdapter(myAdapter);
            myAdapter.setOnItemClick(new OnItemClick(){
                @Override
                public void onItemClick(View view, int position) {
                    Toast.makeText(getApplication(),"点击了:" + position,Toast.LENGTH_SHORT).show();
                }
            });
        }

        class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{
            private List<ImageInfor> list;
            public MyAdapter(List<ImageInfor> list){
                this.list = list;
            }
            @Override
            public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
                View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.carditem,viewGroup,false);
                return new MyViewHolder(view);
            }

            @Override
            public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
                myViewHolder.iv_backgroud.setBackgroundResource(list.get(i).getImageId());
                myViewHolder.tv_title.setText(list.get(i).getName());
                final int position = i;
                myViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if(onItemClick != null){
                            onItemClick.onItemClick(view,position);
                        }
                    }
                });
            }

            @Override
            public int getItemCount() {
                return list.size();
            }

            class MyViewHolder extends RecyclerView.ViewHolder {
                private ImageView iv_backgroud;
                private TextView tv_title;
                public MyViewHolder(View itemView) {
                    super(itemView);
                    iv_backgroud = (ImageView) itemView.findViewById(R.id.picture);
                    tv_title = (TextView) itemView.findViewById(R.id.name);
                }
            }

            private OnItemClick onItemClick;

            public void setOnItemClick(OnItemClick onItemClick) {
                this.onItemClick = onItemClick;
            }
        }
    }

使用就是RecyclerView的简单使用中的讲解,我们只是把itemview换成cardview。直接看效果图吧!

源码下载地址 http://download.csdn.net/detail/mr_dsw/9153845

时间: 2024-10-24 03:22:39

Android新特性之CardView的简单使用的相关文章

Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)_Android

 android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById

Android新特性ConstraintLayout完全解析

本文同步发表于我的微信公众号,在微信搜索 郭霖 即可关注,每天都有文章更新. 今天给大家带来2017年的第一篇文章,这里先祝大家新年好. 本篇文章的主题是ConstraintLayout.其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能.我们都知道,在传统的Android开发当中,界面基本都是靠编写XML代码完成的,虽然Android Studio也支持可视化的方式来编写界面,但是操作起来并不方

[20150515]简单了解某个版本有什么新特性

[20150515]简单了解某个版本有什么新特性.txt --如果想简单的了解某个版本的新特性,可以设置optimizer_features_enable SCOTT@test> show parameter optimizer_features_enable NAME                                 TYPE    VALUE ------------------------------------ ------- -------- optimizer_feat

Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 这一章很多,但是很有趣,也是这书的最后一章知识点了,我现在还在考虑要不要写这个拼图和2048的案例,在此之前,我们先来玩玩Android5.X的新特性吧!

Android 5.0鲜为人知的新特性

腾讯数码讯(编译:Raul)现在,各大手机厂商都已经开始陆续推送谷歌最新的Android 5.0 Lollipop系统,甚至谷歌旗下的Nexus系列机型都已经OTA推送了Android 5.0.2版本.对于谷歌的新系统,许多拥有升级资格的Android用户来说真的都非常期待. Android Lollipop最引人注目的改变之一就是重新设计的用户界面.谷歌官方将这一代的系统采用的设计语言命名为Material Design.除此之外,5.0系统还优化了通知栏系统,比如用户可以在锁屏界面直接访问通

即将到来的 Android N 将具备这些新特性

去年的I/O大会上Google表示,今后每一年的I/O大会上都会推出对Android重大更新后的新版本. 今年I/O大会,我们有理由相信,Android 7.0,也就是Android N,会与我们见面.Android N这一版本将带来许多新特性和新的改进优化,外媒AndroidAuthority对关于Android N的已确认的消息和传闻中的消息进行了汇总,我们一起来看一下. 已被证实的Android N新特性 发布日期 目前已经可以确定,Android N将在今年5月18日.I/O大会期间发布

浅谈Android Studio 3.0 工具新特性的使用 Android Profiler 、Device File Explorer

前言: 其实 studio3.0的工具大家也已经使用过一段时间了,自己呢,就是从bate版开始使用的,我觉得比较好用的几个地方.就几个,可能还没用到其他的精髓. 但我觉的这个两个功能对我是比较实用的.好那么下面就给大家介绍一下吧. 正文: 话不多说咱们直接上图吧.(个人比较喜欢看图说话) 第一个(Android Profiler)我要介绍的就是这个了.(先看一下效果"震撼一下") (图-1) (图-2) (图-3) (厉害不厉害,牛逼不牛逼)那么我们怎么来操作这个工具呢,来咱们接着看图

Android Studio3.0新特性及安装图文教程

Android Studio是Android的官方IDE.它是专为Android而打造,可以加快您的开发速度,帮助您为每款Android设备构建最优应用. 它提供专为Android开发者量身定制的工具,其中包括丰富的代码编辑.调试.测试和性能分析工具. 一.Android Studio3.0新特性 (1).核心IDE更改 我们将基础IDE从IntelliJ 2016.2升级到2017.1.2,在2016.3和 2017.1中增加了许多新功能, 包括参数提示,语义突出显示,搜索中的即时结果等等.

可能是最早的学习Android N新特性的文章

可能是最早的学习Android N新特性的文章 Google在今天放出了Android N开发者预览版.Android N支持Nexus6及以上的设备.5太子Nexus5不再得到更新. Android N相比于Android 6.0增加了哪些新的功能呢,开发者要关心哪些API呢,通过本篇文章,将一一得到答案. Android N的新特性 分屏多窗口(Multi-Window Support) 还在为看美剧的时候,收到微信消息而在两个应用间来回切换而烦恼吗.在Android N上,再也不用烦恼这个