googlenow是android4.1全新推出的一款应用他，它可以全面了解你的使用习惯，并为你提供现在或者未来可能用到的各种信息，googlenow提供的信息关联度较高，几乎是瞬间返回答案，总而言之，googlenow是google提出的全新搜索概念。当然，googlenow最为引人注目的当属它的卡片式设计。google自家应用纷纷采用卡片布局(google now,google plus,google play)。
在最新的qq空间、新浪微博、豌豆荚中也可以见到卡片式设计的影子
下面介绍一种简单实现卡片布局的方式
list_item.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<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
|
1
2
3
4
5
|
<?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> |
主界面布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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实体
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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; }} |
自定义适配器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
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; } } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
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：地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/top_code/article/details/17842759
