Android实现简单卡片布局

googlenow是android4.1全新推出的一款应用他，它可以全面了解你的使用习惯，并为你提供现在或者未来可能用到的各种信息，googlenow提供的信息关联度较高，几乎是瞬间返回答案，总而言之，googlenow是google提出的全新搜索概念。当然，googlenow最为引人注目的当属它的卡片式设计。google自家应用纷纷采用卡片布局(google now,google plus,google play)。

在最新的qq空间、新浪微博、豌豆荚中也可以见到卡片式设计的影子

下面介绍一种简单实现卡片布局的方式

list_item.xml

<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="wrap_content"
 tools:context=".mainactivity" 
 android:background="@drawable/radius_bg">
 
 <imageview
 android:id="@+id/iv_logo"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignparentleft="true"
 android:layout_margin="8dp"
 android:src="@drawable/ic_launcher" />
 
 <textview
 android:id="@+id/tv_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_aligntop="@id/iv_logo"
 android:layout_torightof="@id/iv_logo"
 android:text="@string/hello_world"
 android:textsize="16sp" />
 
 <textview
 android:id="@+id/tv_desc"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@id/tv_name"
 android:layout_margintop="5dp"
 android:layout_torightof="@id/iv_logo"
 android:text="@string/hello_world"
 android:textsize="13sp" />
 
</relativelayout>

自定义shape图片radius_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
 <corners android:radius="3dp"/> 
 <solid android:color="#ffffff"/> 
</shape>

主界面布局

<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"
 tools:context=".mainactivity" 
 android:background="#e6e6e6">
 
 <listview 
 android:id="@+id/mlistview" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:divider="@android:color/transparent"
 android:paddingleft="10dp"
 android:paddingright="10dp"
 android:paddingtop="2dp"
 android:paddingbottom="2dp"
 android:dividerheight="10dp" > 
 </listview> 
 
</relativelayout>

card实体

package com.example.carduitest.model;
 
public class card {
 private string name;
 private string desc;
 private int icon;
 
 public card(string name, string desc) {
 this.name = name;
 this.desc = desc;
 }
 
 public string getname() {
 return name;
 }
 public void setname(string name) {
 this.name = name;
 }
 public string getdesc() {
 return desc;
 }
 public void setdesc(string desc) {
 this.desc = desc;
 }
 public int geticon() {
 return icon;
 }
 public void seticon(int icon) {
 this.icon = icon;
 }
}

自定义适配器

package com.example.carduitest.adapter;
 
import java.util.list;
 
import com.example.carduitest.r;
import com.example.carduitest.model.card;
import android.content.context;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.baseadapter;
import android.widget.textview;
 
public class cardadapter extends baseadapter {
 private list<card> data;
 private context context;
 private layoutinflater minflater;
 
 public cardadapter(list<card> data, context context) {
 this.data = data;
 this.context = context;
 minflater = layoutinflater.from(context);
 }
 
 @override
 public int getcount() {
 // todo auto-generated method stub
 return data.size();
 }
 
 @override
 public object getitem(int position) {
 // todo auto-generated method stub
 return data.get(position);
 }
 
 @override
 public long getitemid(int position) {
 // todo auto-generated method stub
 return position;
 }
 
 @override
 public view getview(int position, view convertview, viewgroup parent) {
 viewholder holder;
 if(convertview==null){
 convertview = minflater.inflate(r.layout.list_item, null);
 
 holder = new viewholder();
 holder.tv_name = (textview) convertview.findviewbyid(r.id.tv_name);
 holder.tv_desc = (textview) convertview.findviewbyid(r.id.tv_desc);
 
 convertview.settag(holder);
 }else{
 holder = (viewholder) convertview.gettag();
 }
 
 card card = data.get(position);
 holder.tv_name.settext(card.getname());
 holder.tv_desc.settext(card.getdesc());
 
 return convertview;
 }
 
 static class viewholder{
 textview tv_name;
 textview tv_desc;
 }
 
}

package com.example.carduitest;
 
import java.util.arraylist;
import java.util.list;
 
import com.example.carduitest.adapter.cardadapter;
import com.example.carduitest.model.card;
 
import android.os.bundle;
import android.app.activity;
import android.view.menu;
import android.widget.listview;
 
public class mainactivity extends activity {
 
 private list<card> data = new arraylist<card>();
 
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 
 initdata();
 listview mlistview = (listview) findviewbyid(r.id.mlistview);
 
 cardadapter madapter = new cardadapter(data,this);
 mlistview.setadapter(madapter);
 }
 
 private void initdata() {
 
 for(int i=0;i<50;i++){
 card card = new card("card ui example "+i, "very good");
 data.add(card);
 }
 }
 
 @override
 public boolean oncreateoptionsmenu(menu menu) {
 // inflate the menu; this adds items to the action bar if it is present.
 getmenuinflater().inflate(r.menu.main, menu);
 return true;
 }
 
}

运行效果如下：

p>

当然啦，github上面也有专门的实现card的library，这里列举两个不错的library

cardslib：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。