Android中UI设计的一些技巧！！！

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

按钮的状态:

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

                                                              

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

代码如下:

view plain copy to clipboard print ?

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

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

view plain copy to clipboard print ?

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

view plain copy to clipboard print ?

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

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

view plain copy to clipboard print ?

1. <?xml version= "1.0"  encoding= "utf-8" ?>  
2. <LinearLayout xmlns: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,代码如下(这里有三层哦！):

view plain copy to clipboard print ?

1. <?xml version= "1.0"  encoding= "utf-8" ?>  
2. <LinearLayout xmlns: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,代码如下:

view plain copy to clipboard print ?

1. package  com.tutor.uidemo;  
2. import  android.app.Activity;  
3. import  android.os.Bundle;  
4. import  android.view.LayoutInflater;  
5. import  android.view.View;  
6. import  android.view.ViewGroup;  
7. import  android.widget.BaseAdapter;  
8. import  android.widget.ListView;  
9. import  android.widget.TextView;  
10. public   class  UIDemo  extends  Activity {  
11.      
12.     private  ListView mListView;  
13.     @Override   
14.     public   void  onCreate(Bundle savedInstanceState) {  
15.         super .onCreate(savedInstanceState);  
16.         setContentView(R.layout.main);  
17.           
18.         setupViews();  
19.     }  
20.        
21.     private   void  setupViews(){  
22.         mListView = (ListView)findViewById(R.id.content);  
23.         mListView.setAdapter(new  ListViewAdapter());  
24.     }  
25.          
26.     private   class  ListViewAdapter  extends  BaseAdapter{  
27.         //这里返回10行，ListView有多少行取决于getCount()方法   
28.         public   int  getCount() {  
29.             return   10 ;  
30.         }  
31.         public  Object getItem( int  arg0) {  
32.             return   null ;  
33.         }  
34.         public   long  getItemId( int  arg0) {  
35.             return   0 ;  
36.         }  
37.         public  View getView( int  position, View v, ViewGroup parent) {  
38.               
39.             final  LayoutInflater inflater = LayoutInflater.from(getApplicationContext());  
40.               
41.             if (v ==  null ){  
42.                 v = inflater.inflate(R.layout.listview_layout, null );  
43.             }             
44.             TextView mBookName = (TextView)v.findViewById(R.id.bookname);  
45.             TextView mBookAuthor = (TextView)v.findViewById(R.id.author);  
46.               
47.             mBookName.setText("Android傻瓜教程"  + position);  
48.             mBookAuthor.setText("Frankiewei"  + position);  
49.             return  v;  
50.         }  
51.           
52.     }  
53. }  

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

运行效果1：

点击按钮效果2：

ListView正常效果3：

ListView点击效果4:

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

Android高手进阶教程(二)之----Android Launcher抽屉类SlidingDrawer的使用!

Android高手进阶教程(十六)之---Android中万能的 BaseAdapter(Spinner,ListView,GridView)的使用！