今天来给大家分享一下Android中UI设计的一些技巧，内容主要有两点：一是Android按钮（Button）的UI设计，二是：ListView以及GridView的UI设计。
按钮的状态：
我们一般搞UI设计，按钮通常有三个状态：normal（正常状态）；focus（焦点状态），pressed（按下状态）。
我们会在res/drawable目录下定义一个资源文件，比如本例中要用到的handle.xml，在里面定义三种状态，每种状态对应一张图片,下面让我们来看一个例子：
代码如下：
01
viewplaincopytoclipboardprint？
02
<？xmlversion="1.0"encoding="utf-8"？>
03
<selectorxmlns：android="http：//schemas.android.com/apk/res/android">
04
<itemandroid：state_window_focused="false"android：drawable="@drawable/handle_normal"/>
05
<itemandroid：state_focused="true"android：drawable="@drawable/handle_focused"/>
06
<itemandroid：state_pressed="true"android：drawable="@drawable/handle_pressed"/>
07
</selector>
08
<？xmlversion="1.0"encoding="utf-8"？>
09
<selectorxmlns：android="http：//schemas.android.com/apk/res/android">
10
<itemandroid：state_window_focused="false"android：drawable="@drawable/handle_normal"/>
11
<itemandroid：state_focused="true"android：drawable="@drawable/handle_focused"/>
12
<itemandroid：state_pressed="true"android：drawable="@drawable/handle_pressed"/>
13
</selector>
14
而我们使用这个资源文件的用法只需要引用drawable里的资源文件（android：background="@drawable/handle"）代码如下：
01
viewplaincopytoclipboardprint？
02
<Button
03
android：id="@+id/handle"
04
android：layout_width="wrap_content"
05
android：layout_height="fill_parent"
06
android：background="@drawable/handle"
07
/>
08
<Button
09
android：id="@+id/handle"
10
android：layout_width="wrap_content"
11
android：layout_height="fill_parent"
12
android：background="@drawable/handle"
13
/>
14
Android中的层：
看过《盗梦空间》的人都知道，梦境有多少层，而Android中也有层次之分，在Android中第一层"梦境"，我们可以认为是壁纸。
第二层就是应用的Activity，第三层就是放在Activity上的容器（ViewGroup以及它的子类FrameLayout，LinearLayout等布局对象），当然容器中还可以放容器，你也可以放到N层（最多放多少我还没验证过），总之最后一层就是那些继承于View的控件了（诸如，Button，TextView等）
而ListView以及GridView中UI是怎么设计的呢，下面我们看一下效果图：
上图是一个ListView的效果图，正常状态下是白色背景黑色字体，当我们点击一列时会出现黄色背景。这一效果是如何做到的呢？
ListView单元格显示的内容其实是我们事先定义在Layout目录下的一个布局文件，从这个效果来看，我们可以看出它一共有三个 层
第一层容器（LinearLayout）背景色为白色：
第二层也是容器（LinearLayout）当按下时，背景色为黄色，把第一层挡住（具体做法可以参照按钮）：
第三层是控件（TextView）。
实例：上面说了一些，有些人肯定会云里雾里，所以我们直接来个实例，实例做完后，再看一下，效果会更好，大家按照步骤跟我来：
第一步：首先准备素材，准备三个按钮，以及ListView的背景图（上面三个按钮已经有了，下面我只贴一个ListView背景图片）：
第二步：新建一个Android工程，命名为UIDemo。目录结构如下图所示：
第三步：在res目录下新建一个drawable文件夹，定义两个资源文件一个是handle.xml另一个为listview_selected.xml，其中handle.xml代码已经在上面贴出，listview_selected.xml
01
viewplaincopytoclipboardprint？
02
<？xmlversion="1.0"encoding="utf-8"？>
03
<selectorxmlns：android="http：//schemas.android.com/apk/res/android">
04
<itemandroid：state_pressed="true"android：drawable="@drawable/list_selector_background_pressed"/>
05
</selector>
06
<？xmlversion="1.0"encoding="utf-8"？>
07
<selectorxmlns：android="http：//schemas.android.com/apk/res/android">
08
<itemandroid：state_pressed="true"android：drawable="@drawable/list_selector_background_pressed"/>
09
</selector>
10
第四步：修改main.xml布局文件，这里我用到了SliddingDrawer控件，代码如下：
01
viewplaincopytoclipboardprint？
02
<？xmlversion="1.0"encoding="utf-8"？>
03
<LinearLayoutxmlns：android="http：//schemas.android.com/apk/res/android"
04
android：orientation="vertical"
05
android：layout_width="fill_parent"
06
android：layout_height="fill_parent"
07
>
08
<SlidingDrawer
09
android：id="@+id/slidingdrawer"
10
android：layout_width="fill_parent"
11
android：layout_height="fill_parent"
12
android：orientation="horizontal"
13
android：handle="@+id/handle"
14
android：content="@+id/content">
15
<Button
16
android：id="@+id/handle"
17
android：layout_width="wrap_content"
18
android：layout_height="fill_parent"
19
android：background="@drawable/handle"
20
/>
21
<ListView
22
android：id="@+id/content"
23
android：layout_width="fill_parent"
24
android：layout_height="wrap_content"
25
/>
26
</SlidingDrawer>
27
</LinearLayout>
28
<？xmlversion="1.0"encoding="utf-8"？>
29
<LinearLayoutxmlns：android="http：//schemas.android.com/apk/res/android"
30
android：orientation="vertical"
31
android：layout_width="fill_parent"
32
android：layout_height="fill_parent"
33
>
34
<SlidingDrawer
35
android：id="@+id/slidingdrawer"
36
android：layout_width="fill_parent"
37
android：layout_height="fill_parent"
38
android：orientation="horizontal"
39
android：handle="@+id/handle"
40
android：content="@+id/content">
41
<Button
42
android：id="@+id/handle"
43
android：layout_width="wrap_content"
44
android：layout_height="fill_parent"
45
android：background="@drawable/handle"
46
/>
47
<ListView
48
android：id="@+id/content"
49
android：layout_width="fill_parent"
50
android：layout_height="wrap_content"
51
/>
52
</SlidingDrawer>
53
</LinearLayout>
54
我们这里用到了ListView控件，而我们ListView控件显示的内容我事先在layout目录下定义两个TextView，命名为listview_layout.xml，代码如下（这里有三层哦！）：
01
viewplaincopytoclipboardprint？
02
<？xmlversion="1.0"encoding="utf-8"？>
03
<LinearLayoutxmlns：android="http：//schemas.android.com/apk/res/android"
04
android：orientation="vertical"
05
android：layout_width="fill_parent"
06
android：layout_height="fill_parent"
07
android：background="#ffffff"
08
>
09
<LinearLayout
10
android：orientation="vertical"
11
android：layout_width="fill_parent"
12
android：layout_height="fill_parent"
13
android：background="@drawable/listview_selected"
14
android：padding="6px"
15
>
16
<TextView
17
android：id="@+id/bookname"
18
android：layout_width="fill_parent"
19
android：layout_height="wrap_content"
20
android：textSize="20px"
21
android：textColor="#000000"
22
/>
23
<TextView
24
android：id="@+id/author"
25
android：layout_width="fill_parent"
26
android：layout_height="wrap_content"
27
android：textSize="16px"
28
android：textColor="#000000"
29
/>
30
</LinearLayout>
31
</LinearLayout>
32
<？xmlversion="1.0"encoding="utf-8"？>
33
<LinearLayoutxmlns：android="http：//schemas.android.com/apk/res/android"
34
android：orientation="vertical"
35
android：layout_width="fill_parent"
36
android：layout_height="fill_parent"
37
android：background="#ffffff"
38
>
39
<LinearLayout
40
android：orientation="vertical"
41
android：layout_width="fill_parent"
42
android：layout_height="fill_parent"
43
android：background="@drawable/listview_selected"
44
android：padding="6px"
45
>
46
<TextView
47
android：id="@+id/bookname"
48
android：layout_width="fill_parent"
49
android：layout_height="wrap_content"
50
android：textSize="20px"
51
android：textColor="#000000"
52
/>
53
<TextView
54
android：id="@+id/author"
55
android：layout_width="fill_parent"
56
android：layout_height="wrap_content"
57
android：textSize="16px"
58
android：textColor="#000000"
59
/>
60
</LinearLayout>
61
</LinearLayout>
62
第五步：修改主核心程序UIDemo.java，代码如下：
01
viewplaincopytoclipboardprint？
02
packagecom.tutor.uidemo；
03
importandroid.app.Activity；
04
importandroid.os.Bundle；
05
importandroid.view.LayoutInflater；
06
importandroid.view.View；
07
importandroid.view.ViewGroup；
08
importandroid.widget.BaseAdapter；
09
importandroid.widget.ListView；
10
importandroid.widget.TextView；
11
publicclassUIDemoextendsActivity{
12
privateListViewmListView；
13
@Override
14
publicvoidonCreate（BundlesavedInstanceState）{
15
super.onCreate（savedInstanceState）；
16
setContentView（R.layou.main）；
17
setupViews（）；
18
}
19
privatevoidsetupViews（）{
20
mListView=（ListView）findViewById（R。id。content）；
21
mListView。setAdapter（newListViewAdapter（））；
22
}
23
privateclassListViewAdapterextendsBaseAdapter{
24
//这里返回10行，ListView有多少行取决于getCount（）方法
25
publicintgetCount（）{
26
return10；
27
}
28
publicObjectgetItem（intarg0）{
29
returnnull；
30
}
31
publiclonggetItemId（intarg0）{
32
return0；
33
}
34
publicViewgetView（intposition，Viewv，ViewGroupparent）{
35
finalLayoutInflaterinflater=LayoutInflater.from（getApplicationContext（））；
36
if（v==null）{
37
v=inflater.inflate（R.layout.listview_layout，null）；
38
}
39
TextViewmBookName=（TextView）v.findViewById（R.id.bookname）；
40
TextViewmBookAuthor=（TextView）v.findViewById（R.id.author）；
41
mBookName.setText（"Android傻瓜教程"+position）；
42
mBookAuthor.setText（"Frankiewei"+position）；
43
returnv；
44
}
45
}
46
}
47
packagecom.tutor.uidemo；
48
importandroid.app.Activity；
49
importandroid.os.Bundle；
50
importandroid.view.LayoutInflater；
51
importandroid.view.View；
52
importandroid.view.ViewGroup；
53
importandroid.widget.BaseAdapter；
54
importandroid.widget.ListView；
55
importandroid.widget.TextView；
56
publicclassUIDemoextendsActivity{
57
privateListViewmListView；
58
@Override
59
publicvoidonCreate（BundlesavedInstanceState）{
60
super.onCreate（savedInstanceState）；
61
setContentView（R.layout.main）；
62
setupViews（）；
63
}
64
privatevoidsetupViews（）{
65
mListView=（ListView）findViewById（R.id.content）；
66
mListView.setAdapter（newListViewAdapter（））；
67
}
68
privateclassListViewAdapterextendsBaseAdapter{
69
//这里返回10行，ListView有多少行取决于getCount（）方法
70
publicintgetCount（）{
71
return10；
72
}
73
publicObjectgetItem（intarg0）{
74
returnnull；
75
}
76
publiclonggetItemId（intarg0）{
77
return0；
78
}
79
publicViewgetView（intposition，Viewv，ViewGroupparent）{
80
finalLayoutInflaterinflater=LayoutInflater.from（getApplicationContext（））；
81
if（v==null）{
82
v=inflater.inflate（R.layout.listview_layout，null）；
83
}
84
TextViewmBookName=（TextView）v.findViewById（R.id.bookname）；
85
TextViewmBookAuthor=（TextView）v.findViewById（R.id.author）；
86
mBookName.setText（"Android傻瓜教程"+position）；
87
mBookAuthor.setText（"Frankiewei"+position）；
88
returnv；
89
}
90
}
91
}
92
第六步：运行上述工程，可以去查看效果图了。
