Android卡片布局的两种实现方式
卡片布局可以单独使用，也可以放到ListView和RecyclerView中当做列表项里的内容来使用。本文都是放到ListView中使用。
一、使用ShapeDrawable资源实现卡片布局
实现效果图：
（1）list_item.xml这个文件是用来设置ListView中每一项的卡片内容
（2）card_style.xml 这个文件是实现卡片效果的关键，用的是ShapeDrawable资源，这个文件放在drawable目录下。
（3）activity_main.xml这个文件只有一个ListView控件。
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> list=new ArrayList>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//将数据封装成数据源
for(int i=0;i map=new HashMap();
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控件：
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> list=new ArrayList>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//将数据封装成数据源
for(int i=0;i map=new HashMap();
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;
}
}