Android控制群組合應用二

在上一篇文章中，我們已經完成了資料模型的代碼，並且為了測試方便，在類中直接為很多成員變數提供了預設值。接下來，進入到介面部分。

 

縱觀整個介面，可以分成上下兩塊，一塊是頂端的操作條，另一塊是佔主體的列表框。

 

先從頂端的操作條開始，在這裡，很容易分解成三個部分，左側的寫微博按鈕，中間的使用者名稱顯示，右側的重新整理按鈕。兩個按鈕的風格是一樣的，都是有常規和按下兩種狀態，這種按鈕是非常常用的，我的做法是：

1.      在drawable檔案夾下建立兩個xml檔案，分別對應了兩個按鈕；

2.      每個xml檔案中使用selector標籤定義常規狀態和選中狀態的兩個圖片資源；

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

 

下面是這兩個xml檔案的內容：

 

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

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

 

在main.xml檔案中，進行這一部分的布局，對於這三個介面元素而言，有明確的位置關係，因此採用RelativeLayout合適，內容如下：

 

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

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

 

本次用到的圖片有：

                

——歡迎轉載，請註明出處 http://blog.csdn.net/caowenbin ——