Android中UI設計的一些技巧！！！

標籤：

  

出處：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 plaincopy 

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")代碼如下:

 

[java] view plaincopy 

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 plaincopy 

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控制項，代碼如下:

 

[java] view plaincopy 

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,代碼如下(這裡有三層哦！):

 

[java] view plaincopy 

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

 

[java] view plaincopy 

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:

 

Android中UI設計的一些技巧！！！