http://blog.csdn.net/Android_Tutor/article/details/5995759

大家好，今天给大家分享的是Android中UI设计的一些技巧，本节内容主要有两点：一是Android按钮(Button)的UI设计，二是:ListView以及GridView的UI设计。

按钮的状态:

我们一般搞UI设计,按钮通常有三个状态：normal(正常状态);focus(焦点状态),pressed(按下状态)。如下图所示:

我们会在res/drawable目录下定义一个资源文件，比如我们本例中要用到的handle.xml,在里面定义三种状态，每种状态对应一张图片:

代码如下:

[java] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
3. <itemandroid:state_window_focused="false"android:drawable="@drawable/handle_normal"/>
4. <itemandroid:state_focused="true"android:drawable="@drawable/handle_focused"/>
5. <itemandroid:state_pressed="true"android:drawable="@drawable/handle_pressed"/>
6. </selector>

而我们使用这个资源文件的用法只需要引用drawable里的资源文件(android:background="@drawable/handle")代码如下:

[java] view plain copy

1. <Button
2. android:id="@+id/handle"
3. android:layout_width="wrap_content"
4. android:layout_height="fill_parent"
5. android:background="@drawable/handle"
6. />

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代码如下:

[java] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
3. <itemandroid:state_pressed="true"android:drawable="@drawable/list_selector_background_pressed"/>
4. </selector>

第四步:修改main.xml布局文件，这里我用到了SliddingDrawer控件，代码如下:

[java] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. >
7. <SlidingDrawer
8. android:id="@+id/slidingdrawer"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent"
11. android:orientation="horizontal"
12. android:handle="@+id/handle"
13. android:content="@+id/content">
14. <Button
15. android:id="@+id/handle"
16. android:layout_width="wrap_content"
17. android:layout_height="fill_parent"
18. android:background="@drawable/handle"
19. />
20. <ListView
21. android:id="@+id/content"
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. />
25. </SlidingDrawer>
26. </LinearLayout>

我们这里用到了ListView控件，而我们ListView控件显示的内容我事先在layout目录下定义两个TextView，命名为listview_layout.xml,代码如下(这里有三层哦！):

[java] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:background="#ffffff"
7. >
8. <LinearLayout
9. android:orientation="vertical"
10. android:layout_width="fill_parent"
11. android:layout_height="fill_parent"
12. android:background="@drawable/listview_selected"
13. android:padding="6px"
14. >
15. <TextView
16. android:id="@+id/bookname"
17. android:layout_width="fill_parent"
18. android:layout_height="wrap_content"
19. android:textSize="20px"
20. android:textColor="#000000"
21. />
22. <TextView
23. android:id="@+id/author"
24. android:layout_width="fill_parent"
25. android:layout_height="wrap_content"
26. android:textSize="16px"
27. android:textColor="#000000"
28. />
29. </LinearLayout>
30. </LinearLayout>

第五步:修改主核心程序UIDemo.java,代码如下:

[java] view plain copy

1. packagecom.tutor.uidemo;
2. importandroid.app.Activity;
3. importandroid.os.Bundle;
4. importandroid.view.LayoutInflater;
5. importandroid.view.View;
6. importandroid.view.ViewGroup;
7. importandroid.widget.BaseAdapter;
8. importandroid.widget.ListView;
9. importandroid.widget.TextView;
10. publicclassUIDemoextendsActivity{
12. privateListViewmListView;
13. @Override
14. publicvoidonCreate(BundlesavedInstanceState){
15. super.onCreate(savedInstanceState);
16. setContentView(R.layout.main);
18. setupViews();
19. }
21. privatevoidsetupViews(){
22. mListView=(ListView)findViewById(R.id.content);
23. mListView.setAdapter(newListViewAdapter());
24. }
26. privateclassListViewAdapterextendsBaseAdapter{
27. //这里返回10行，ListView有多少行取决于getCount()方法
28. publicintgetCount(){
29. return10;
30. }
31. publicObjectgetItem(intarg0){
32. returnnull;
33. }
34. publiclonggetItemId(intarg0){
35. return0;
36. }
37. publicViewgetView(intposition,Viewv,ViewGroupparent){
39. finalLayoutInflaterinflater=LayoutInflater.from(getApplicationContext());
41. if(v==null){
42. v=inflater.inflate(R.layout.listview_layout,null);
43. }
44. TextViewmBookName=(TextView)v.findViewById(R.id.bookname);
45. TextViewmBookAuthor=(TextView)v.findViewById(R.id.author);
47. mBookName.setText("Android傻瓜教程"+position);
48. mBookAuthor.setText("Frankiewei"+position);
49. returnv;
50. }
52. }
53. }

第六步:运行上述工程，查看效果:

运行效果1：

点击按钮效果2：

ListView正常效果3：

ListView点击效果4:

PS:上面用到了SliddingDrawer控件以及适配器的内容，如果读者对上面两个不了解的，可以参照本人的其他文章学习:

更多相关文章

1. Android控件阴影效果的几种实现方法
2. Android UI基础——ImageView&ImageButton控件
3. Android TextView实现滚动跑马灯效果Marquee
4. Android中实现滑动效果
5. android 各种控件颜色值
6. Android Studio按钮响应事件（三）
7. android控件的对齐方式转讲
8. Android设置任何控件透明度

随机推荐

1. mac 电脑的android studio 启动的时候报
2. Android设置屏幕方向
3. AndroidX和android.support对照表
4. Android(安卓)CTS Verifier Sensor Test
5. Android动态控制Activity全屏
6. 仿迅雷下载球
7. Android仿微信进度弹出框的实现方法
8. Android日历周视图 可添加事件标记
9. Android自定义ViewGroup神器-ViewDragHel
10. android开发【四】简单实现天气预报