Android開發(fā)UI界面設(shè)計(jì)

Android開發(fā)UI界面設(shè)計(jì)ON六162011INANDROID界面設(shè)計(jì)BYANDROID智能手機(jī)|NOCOMMENTS已有1420位網(wǎng)友關(guān)注Android開發(fā)UI界面設(shè)計(jì)主要有兩點(diǎn)：一是Android按鈕(Button)的UI設(shè)計(jì)，二是:ListView以及GridView的UI設(shè)計(jì)。按鈕的狀態(tài):我們一般搞UI設(shè)計(jì)，按鈕通常有三個(gè)狀態(tài)：normal（正常狀態(tài)）;focus（焦點(diǎn)狀態(tài)）,pressed（按下狀態(tài)）。如下圖所示：我們會(huì)在res/drawable目錄下定義一個(gè)資源文件，比如我們本例中要用到的handle.xml,在里面定義三種狀態(tài)，每種狀態(tài)對應(yīng)一張圖片：代碼如下：<?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>而我們使用這個(gè)資源文件的用法只需要引用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中第一層"夢境"，我們可以認(rèn)為是壁紙。第二層就是應(yīng)用的Activity，第三層就是放在Activity上的容器（ViewGroup以及它的子類FrameLayout,LinearLayout等布局對象），當(dāng)然容器中還可以放容器，你也可以放到N層（最多放多少我還沒驗(yàn)證過），總之最后一層就是那些繼承于View的控件了（諸如,Button,TextView等.）而ListView以及GridView中UI是怎么設(shè)計(jì)的呢，下面我們看一下效果圖：Android傻瓜教程0IFrankieweiOAndroid傻瓜教程1FrankieweilAndroid傻瓜教程2Frankiewei2上圖是一個(gè)ListView的效果圖，正常狀態(tài)下是白色背景黑色字體，當(dāng)我們點(diǎn)擊一列時(shí)會(huì)出現(xiàn)黃色背景。這一效果是如何做到的呢？ListView單元格顯示的內(nèi)容其實(shí)是我們事先定義在Layout目錄下的一個(gè)布局文件，從這個(gè)效果來看，我們可以看出它一共有三個(gè)“層”第一層容器（LinearLayout）背景色為白色：第二層也是容器（LinearLayout）當(dāng)按下時(shí)，背景色為黃色，把第一層擋?。ň唧w做法可以參照按鈕）：第三層是控件（TextView）。實(shí)例：上面說了一些，有些人肯定會(huì)云里霧里，所以我們直接來個(gè)實(shí)例，實(shí)例做完后，再看一下，效果會(huì)更好，大家按照步驟跟我來：第一步:首先準(zhǔn)備素材，準(zhǔn)備三個(gè)按鈕，以及ListView的背景圖（上面三個(gè)按鈕已經(jīng)有了，下面我只貼一個(gè)ListView背景圖片）：第二步:新建一個(gè)Android工程，命名為UIDemo.目錄結(jié)構(gòu)如下圖所示：第三步:在res目錄下新建一個(gè)drawable文件夾，定義兩個(gè)資源文件一個(gè)是handle.xml另一個(gè)為listview_selected.xml,其中handle.xml代碼已經(jīng)在上面貼出，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控件顯示的內(nèi)容我事先在layout目錄下定義兩個(gè)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