欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现简单卡片布局

程序员文章站 2022-06-03 16:36:46
googlenow是android4.1全新推出的一款应用他,它可以全面了解你的使用习惯,并为你提供现在或者未来可能用到的各种信息,googlenow提供的信息关联度较高,...

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

Android实现简单卡片布局

Android实现简单卡片布局

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

Android实现简单卡片布局

Android实现简单卡片布局

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

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>Android实现简单卡片布局

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

cardslib:

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