Android開發UI界面設計ON六162011INANDROID界面設計BYANDROID智能手機|NOCOMMENTS已有1420位網友關注Android開發UI界面設計主要有兩點：一是Android按鈕(Button)的UI設計，二是:ListView以及GridView的UI設計。按鈕的狀態:我們一般搞UI設計，按鈕通常有三個狀態：normal（正常狀態）;focus（焦點狀態）,pressed（按下狀態）。如下圖所示：我們會在res/drawable目錄下定義一個資源文件，比如我們本例中要用到的handle.xml,在里面定義三種狀態，每種狀態對應一張圖片：代碼如下：<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="/apk/res/android"><itemandroid:state_window_focused="false"android:drawable="@drawable/handle_normal”/><itemandroid:state_focused="true"android:drawable="@drawable/handle_focused"/><itemandroid:state_pressed="true"android:drawable="@drawable/handle_pressed"/></selector>而我們使用這個資源文件的用法只需要引用drawable里的資源文件(android:background="@drawable/handle")代碼如下：<Buttonandroid:id="@+id/handle"android:layout_width="wrap_content”android:layout_height="fill_parent”android:background="@drawable/handle”/>Android中的層：看過《盜夢空間》的人都知道，夢境有多少層，而Android中也有層次之分，在Android中第一層"夢境"，我們可以認為是壁紙。第二層就是應用的Activity，第三層就是放在Activity上的容器（ViewGroup以及它的子類FrameLayout,LinearLayout等布局對象），當然容器中還可以放容器，你也可以放到N層（最多放多少我還沒驗證過），總之最后一層就是那些繼承于View的控件了（諸如,Button,TextView等.）而ListView以及GridView中UI是怎么設計的呢，下面我們看一下效果圖：Android傻瓜教程0IFrankieweiOAndroid傻瓜教程1FrankieweilAndroid傻瓜教程2Frankiewei2上圖是一個ListView的效果圖，正常狀態下是白色背景黑色字體，當我們點擊一列時會出現黃色背景。這一效果是如何做到的呢？ListView單元格顯示的內容其實是我們事先定義在Layout目錄下的一個布局文件，從這個效果來看，我們可以看出它一共有三個“層”第一層容器（LinearLayout）背景色為白色：第二層也是容器（LinearLayout）當按下時，背景色為黃色，把第一層擋住（具體做法可以參照按鈕）：第三層是控件（TextView）。實例：上面說了一些，有些人肯定會云里霧里，所以我們直接來個實例，實例做完后，再看一下，效果會更好，大家按照步驟跟我來：第一步:首先準備素材，準備三個按鈕，以及ListView的背景圖（上面三個按鈕已經有了，下面我只貼一個ListView背景圖片）：第二步:新建一個Android工程，命名為UIDemo.目錄結構如下圖所示：第三步:在res目錄下新建一個drawable文件夾，定義兩個資源文件一個是handle.xml另一個為listview_selected.xml,其中handle.xml代碼已經在上面貼出，listview_selected.xml代碼如下:<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="/apk/res/android"><itemandroid:state_pressed="true”android:drawable="@drawable/list_selector_background_pressed"/></selector>第四步:修改main.xml布局文件，這里我用到了SliddingDrawer控件，代碼如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android”android:orientation="vertical”android:layout_width="fill_parent”android:layout_height="fill_parent”><SlidingDrawerandroid:id="@+id/slidingdrawer”android:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="horizontal”android:handle="@+id/handle”android:content="@+id/content"><Buttonandroid:id="@+id/handle"android:layout_width="wrap_content”android:layout_height="fill_parent”android:background="@drawable/handle”/><ListViewandroid:id="@+id/content”android:layout_width="fill_parent”android:layout_height="wrap_content”/></SlidingDrawer></LinearLayout>我們這里用到了ListView控件，而我們ListView控件顯示的內容我事先在layout目錄下定義兩個TextView，命名為listview_layout.xml,代碼如下（這里有三層哦！）:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android”android:orientation="vertical”android:layout_width="fill_parent”android:layout_height="fill_parent”android:background="#ffffff'><LinearLayoutandroid:orientation="vertical”android:layout_width="fill_parent”android:layout_height="fill_parent”android:background="@drawable/listview_selected”android:padding="6px”><TextViewandroid:id="@+id/bookname”android:layout_width="fill_parent”android:layout_height="wrap_content”android:textSize="20px"android:textColor='#GGGGGGn/><TextViewandroid:id="@+id/author"android:layout_width="fill_parent”android:layout_height="wrap_content”android:textSize="16px"android:textColor="#GGGGGG"/></LinearLayout></LinearLayout>第五步:修改主核心程序UIDemo.java，代碼如下:packagecom.tutor.uidemo;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.BaseAdapter;importandroid.widget.ListView;importandroid.widget.TextView;publicclassUIDemoextendsActivity{privateListViewmListView;@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedlnstanceState);setContentView(R.layout.main);setupViews();}privatevoidsetupViews(){mListView=(ListView)findViewById(R.id.content);mListView.setAdapter(newListViewAdapter());}privateclassListViewAdapterextendsBaseAdapter{〃這里返回10行，ListView有多少行取決于getCount()方法publicintgetCount(){return10;}publicObjectgetItem(intarg0){returnnull;}publiclonggetItemId(intarg0){return0;}publicViewgetView(intposition,Viewv,ViewGroupparent){finalLayoutInflaterinflater=LayoutInflater.from(getApplicationContext());if(v==null){v=inflater.inflate(R.layout.listview_layout,null);}TextViewmBookName=(TextView)v.findVie