在上一篇文章中，我們已經(jīng)完成了數(shù)據(jù)模型的代碼，并且為了測(cè)試方便，在類中直接為很多成員變量提供了默認(rèn)值。接下來(lái)，進(jìn)入到界面部分。

縱觀整個(gè)界面，可以分成上下兩塊，一塊是頂端的操作條，另一塊是占主體的列表框。

先從頂端的操作條開(kāi)始，在這里，很容易分解成三個(gè)部分，左側(cè)的寫(xiě)微博按鈕，中間的用戶名顯示，右側(cè)的刷新按鈕。兩個(gè)按鈕的風(fēng)格是一樣的，都是有常規(guī)和按下兩種狀態(tài)，這種按鈕是非常常用的，我的做法是：

1. 在drawable文件夾下建立兩個(gè)xml文件，分別對(duì)應(yīng)了兩個(gè)按鈕;

2. 每個(gè)xml文件中使用selector標(biāo)簽定義常規(guī)狀態(tài)和選中狀態(tài)的兩個(gè)圖片資源;

3. 在Activity的布局中使用ImageButton，指定按鈕的background為透明，并指定src為剛才定義的兩個(gè)xml。

下面是這兩個(gè)xml文件的內(nèi)容：

view plaincopy to clipboardprint?  
<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_pressed="true" android:drawable="@drawable/title_new_selected" />    
    <item android:drawable="@drawable/title_new_normal" />    
</selector> 

view plaincopy to clipboardprint?  
<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_pressed="true" android:drawable="@drawable/title_reload_selected" />    
    <item android:drawable="@drawable/title_reload_normal" />    
</selector> 

在main.xml文件中，進(jìn)行這一部分的布局，對(duì)于這三個(gè)界面元素而言，有明確的位置關(guān)系，因此采用RelativeLayout合適，內(nèi)容如下：

view plaincopy to clipboardprint?  
<RelativeLayout      
    android:layout_width="fill_parent" android:layout_height="44dp"    
    android:background="@drawable/titlebar_lightgray_bg" android:orientation="horizontal">    
    <ImageButton android:id="@+id/BtnWrite"    
        android:layout_width="wrap_content" android:layout_height="fill_parent"    
        android:layout_alignParentLeft="true" android:background="@android:color/transparent"    
        android:src="@drawable/write_button">    
    </ImageButton>    
    <TextView android:id="@+id/TextViewUsername"    
        android:layout_width="fill_parent" android:layout_height="fill_parent"    
        android:textColor="@color/black" android:gravity="center" android:textSize="18sp">    
    </TextView>    
    <ImageButton android:id="@+id/BtnRefresh"    
        android:layout_width="wrap_content" android:layout_height="fill_parent"    
        android:layout_alignParentRight="true" android:background="@android:color/transparent"    
        android:src="@drawable/refresh_button">    
    </ImageButton>    
</RelativeLayout> 

最后，指定RelativeLayout的background為背景圖片即可。

本次用到的圖片有：