android開發我的新浪微部落格戶端-使用者首頁面UI篇(5.1)

 

在前篇完成了使用者登入功能後開始使用者首頁的開發，使用者的首頁主要的內容是當前登入使用者關注的微博列表，本篇先來講講UI的實現，效果如，整個頁面分為上、中、下三部分，上面部分是工具條，顯示當前登入使用者的暱稱以及寫微博、重新整理兩個功能按鈕；中間部分是目前使用者關注的最新微博列表，下面部分是功能切換欄，用來進行各個功能之間的切換。

      首先建立名為HomeActivity.java的Activity作為使用者首頁，然後在res/layout目錄下建立名為home.xml的Layout,具體代碼如下：

 

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:id="@+id/layout"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"></p><p> <RelativeLayout<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_margin="3px"><br /> <ImageView<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:src="@drawable/logo_ss"><br /> </ImageView><br /> <TextView<br /> android:id="@+id/showName"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_centerInParent="true"<br /> android:textColor="#343434"<br /> android:textSize="15px"><br /> </TextView><br /> <ImageButton<br /> android:id="@+id/writeBtn"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_toLeftOf="@+id/refreshBtn"<br /> android:background="@drawable/btn_write_selector"><br /> </ImageButton><br /> <ImageButton<br /> android:id="@+id/refreshBtn"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentRight="true"<br /> android:layout_marginLeft="12px"<br /> android:background="@drawable/btn_refresh_selector"><br /> </ImageButton><br /> </RelativeLayout></p><p> <LinearLayout<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:background="@drawable/hr"><br /> </LinearLayout></p><p> <RelativeLayout<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"></p><p> <ListView<br /> android:id="@+id/Msglist"<br /> android:layout_width="fill_parent"<br /> android:layout_height="match_parent"<br /> android:divider="@drawable/divider"<br /> android:dividerHeight="2px"<br /> android:layout_margin="0px"<br /> android:background="#BBFFFFFF"<br /> android:cacheColorHint="#00000000"<br /> android:layout_above="@+id/toolbarLayout"<br /> android:fastScrollEnabled="true"<br /> android:focusable="true"><br /> </ListView></p><p> <LinearLayout<br /> android:id="@+id/loadingLayout"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:orientation="vertical"<br /> android:visibility="invisible"<br /> android:layout_centerInParent="true"><br /> <ProgressBar<br /> android:id="@+id/loading"<br /> android:layout_width="31px"<br /> android:layout_height="31px"<br /> android:layout_gravity="center"<br /> style="@style/progressStyle"><br /> </ProgressBar><br /> <TextView<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:text="正在載入"<br /> android:textSize="12px"<br /> android:textColor="#9c9c9c"<br /> android:layout_gravity="center"<br /> android:layout_below="@+id/loading"><br /> </TextView><br /> </LinearLayout></p><p> <LinearLayout<br /> android:id="@+id/toolbarLayout"<br /> android:layout_width="fill_parent"<br /> android:layout_height="44dip"<br /> android:layout_alignParentBottom="true"><br /> </LinearLayout><br /> </RelativeLayout><br /></LinearLayout>

 這個布局首先是一個豎直的根LinearLayout，在這個根LinearLayout裡面分別是兩個RelativeLayout， 第一個RelativeLayout 用來顯示頁面的工具條，第二個RelativeLayout用來顯示列表以及底部的功能欄，特別主要在這第二個RelativeLayout中有一個id為loadingLayout的LinearLayout是用來顯示資料載入中的動畫，它的android:visibility屬性為invisible(也可以設定成gone,區別：invisible這個View在ViewGroupt中仍保留它的位置，不重新layout 
gone>不可見，但這個View在ViewGroupt中不保留位置，重新layout,那後面的view就會取代他的位置。 )，也就是一開始不顯示的意思，接下來看看

<ProgressBarandroid:id="@+id/loading"        android:layout_width="31px"        android:layout_height="31px"android:layout_gravity="center"style="@style/progressStyle"></ProgressBar>

 

      這個ProgressBar控制項就是用來顯示動畫用的，關鍵就是 style="@style/progressStyle"，在res/values目錄下建立名為loadingstyles.xml，內容如下：

 

<?xml version="1.0" encoding="UTF-8"?><br /><resources><br /> <style name="progressStyle" width="38" height="38" parent="@android:style/Widget.ProgressBar.Small"><br /> <item name="android:indeterminateDrawable">@anim/loading</item><br /> </style><br /></resources>
接著準備好r1.png - r8.png，八張不同的小圖片分別代表每旋轉45度圖片，八張剛好是360度。把這些圖片添加到res/drawable-mdpi目錄中。然後在res/anim目錄下建立名為loading.xml動畫檔案，內容如下：

<?xml version="1.0" encoding="UTF-8"?><br /><animation-list android:oneshot="false"<br /> xmlns:android="http://schemas.android.com/apk/res/android"><br /> <item android:duration="200" android:drawable="@drawable/r1" /><br /> <item android:duration="200" android:drawable="@drawable/r2" /><br /> <item android:duration="200" android:drawable="@drawable/r3" /><br /> <item android:duration="200" android:drawable="@drawable/r4" /><br /> <item android:duration="200" android:drawable="@drawable/r5" /><br /> <item android:duration="200" android:drawable="@drawable/r6" /><br /> <item android:duration="200" android:drawable="@drawable/r7" /><br /> <item android:duration="200" android:drawable="@drawable/r8" /><br /></animation-list>