Android卡片布局的两种实现方式

卡片布局可以单独使用，也可以放到ListView和RecyclerView中当做列表项里的内容来使用。本文都是放到ListView中使用。

一、使用ShapeDrawable资源实现卡片布局

实现效果图：

（1）list_item.xml这个文件是用来设置ListView中每一项的卡片内容

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/card_style"    android:padding="10dp"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <TextView            android:id="@+id/cardTitle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:textSize="18sp"            android:textColor="#000000"            android:text="我的数据" />        <ImageView            android:id="@+id/cardImg"            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_alignParentRight="true"            android:src="@drawable/barchar"            />    </RelativeLayout>    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:layout_marginTop="10dp"        android:layout_marginBottom="10dp"        android:background="#000000"/>    <TextView        android:id="@+id/cardContent"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:textSize="18sp"        android:textColor="#000000"        android:text="这里放一些内容，这里放一些图片，这里扩展性很强"/></LinearLayout>

（2）card_style.xml 这个文件是实现卡片效果的关键，用的是ShapeDrawable资源，这个文件放在drawable目录下。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <!--定义矩形四个角的弧度-->    <corners android:radius="10dp" />    <!--填充颜色-->    <solid android:color="#ffffff" />    <!--为矩形绘制边框-->   <stroke android:color="#000000"       android:width="1dp"/></shape>

（3）activity_main.xml这个文件只有一个ListView控件。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingTop="15dp"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:background="#ebebeb"    tools:context="com.example.adapter.MainActivity">    <ListView        android:id="@+id/listView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:divider="@null"        android:dividerHeight="15dp"/></RelativeLayout>

（5）MainActivity.java 

package com.example.adapter;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;public class MainActivity extends Activity {    private String[] Title={"欢迎使用！","我的数据","我的运动","代办事项"};    private int[] Images={R.drawable.welcome,R.drawable.barchar,R.drawable.sport,R.drawable.calendar};    private String[] Content={"(1)这里放一些内容，这里放一些图片，这里扩展性很强",                              "(2)这里放一些内容，这里放一些图片，这里扩展性很强",                              "(3)这里放一些内容，这里放一些图片，这里扩展性很强",                              "(4)这里放一些内容，这里放一些图片，这里扩展性很强"};    //将数据封装成数据源    List<Map<String,Object>> list=new ArrayList<Map<String, Object>>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //将数据封装成数据源        for(int i=0;i<Title.length;i++){            Map<String,Object> map=new HashMap<String, Object>();            map.put("title",Title[i]);            map.put("img",Images[i]);            map.put("content",Content[i]);            list.add(map);        }        ListView listview=(ListView) this.findViewById(R.id.listView);        listview.setAdapter(new MyAdapter());    }    class MyAdapter extends BaseAdapter{        @Override        public int getCount() {            return list.size();        }        @Override        public Object getItem(int position) {            return list.get(position);        }        @Override        public long getItemId(int position) {            return position;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            View view;            ViewHolder mHolder;            if(convertView==null){                view= LayoutInflater.from(MainActivity.this).inflate(R.layout.list_item,null);                mHolder=new ViewHolder();                mHolder.card_title=(TextView)view.findViewById(R.id.cardTitle);                mHolder.card_image=(ImageView)view.findViewById(R.id.cardImg);                mHolder.card_content=(TextView)view.findViewById(R.id.cardContent);                view.setTag(mHolder);  //将ViewHolder存储在View中            }else {                view=convertView;                mHolder=(ViewHolder)view.getTag();  //重新获得ViewHolder            }            mHolder.card_title.setText(list.get(position).get("title").toString());            mHolder.card_image.setImageResource((int)list.get(position).get("img"));            mHolder.card_content.setText(list.get(position).get("content").toString());            return view;        }    }    class ViewHolder{        TextView card_title;        ImageView card_image;        TextView card_content;    }}

二、使用CardView卡片布局控件实现

Material design中有一种卡片设计，Google在v7包中加入了CardView控件，谷歌官网是这样介绍的：A FrameLayout with a rounded corner background and shadow.也就是，一个带圆角和阴影背景的FrameLayout。官网紧接着又写了这样一句：CardView uses elevation property on L for shadows and falls back to a custom shadow implementation on older platforms.卡片视图在 lollipop (API 21)上用elevation属性创建一个阴影卡片。

实现的效果图如下：

（1）模块的gradle中加入如下代码：

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    testCompile 'junit:junit:4.12'    compile 'com.android.support:appcompat-v7:23.4.0'    compile 'com.android.support:cardview-v7:23.4.0'}

（2）list_item.xml文件，里面包含了CardView控件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.CardView        android:id="@+id/cardView"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical"            android:padding="10dp">            <RelativeLayout                android:layout_width="match_parent"                android:layout_height="wrap_content">                <TextView                    android:id="@+id/cardTitle"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_alignParentLeft="true"                    android:textSize="18sp"                    android:textColor="#000000"                    android:text="我的数据" />                <ImageView                    android:id="@+id/cardImg"                    android:layout_width="20dp"                    android:layout_height="20dp"                    android:layout_alignParentRight="true"                    android:src="@drawable/barchar"                    />            </RelativeLayout>            <View                android:layout_width="match_parent"                android:layout_height="1dp"                android:layout_marginTop="10dp"                android:layout_marginBottom="10dp"                android:background="#000000"/>            <ImageView                android:id="@+id/cardContent"                android:layout_width="match_parent"                android:layout_height="150dp"                android:src="@drawable/car1" />        </LinearLayout>    </android.support.v7.widget.CardView></LinearLayout>

（3）activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingTop="15dp"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:background="#ebebeb"    tools:context="com.example.cardview.MainActivity">    <ListView        android:id="@+id/listView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:divider="@null"        android:dividerHeight="15dp"/></RelativeLayout>

（4）MainActivity.java文件

package com.example.cardview;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;public class MainActivity extends Activity {    private String[] Title={"欢迎使用！","我的数据","我的运动","代办事项"};    private int[] Images={R.drawable.welcome,R.drawable.barchar,R.drawable.sport,R.drawable.calendar};    private int[] Content={R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car1};    //将数据封装成数据源    List<Map<String,Object>> list=new ArrayList<Map<String, Object>>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //将数据封装成数据源        for(int i=0;i<Title.length;i++){            Map<String,Object> map=new HashMap<String, Object>();            map.put("title",Title[i]);            map.put("img",Images[i]);            map.put("content",Content[i]);            list.add(map);        }        ListView listview=(ListView) this.findViewById(R.id.listView);        listview.setAdapter(new MyAdapter());    }    class MyAdapter extends BaseAdapter {        @Override        public int getCount() {            return list.size();        }        @Override        public Object getItem(int position) {            return list.get(position);        }        @Override        public long getItemId(int position) {            return position;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            View view;            ViewHolder mHolder;            if(convertView==null){                view= LayoutInflater.from(MainActivity.this).inflate(R.layout.list_item,null);                mHolder=new ViewHolder();                mHolder.card_title=(TextView)view.findViewById(R.id.cardTitle);                mHolder.card_image=(ImageView)view.findViewById(R.id.cardImg);                mHolder.card_content=(ImageView) view.findViewById(R.id.cardContent);                view.setTag(mHolder);  //将ViewHolder存储在View中            }else {                view=convertView;                mHolder=(ViewHolder)view.getTag();  //重新获得ViewHolder            }            mHolder.card_title.setText(list.get(position).get("title").toString());            mHolder.card_image.setImageResource((int)list.get(position).get("img"));            mHolder.card_content.setImageResource((int)list.get(position).get("content"));            return view;        }    }    class ViewHolder{        TextView card_title;        ImageView card_image;        ImageView card_content;    }}