android开发我的新浪微博客户端-用户首页面UI篇(5.1)

      在前篇完成了用户登录功能后开始用户首页的开发，用户的首页主要的内容是当前登录用户关注的微博列表，本篇先来讲讲UI的实现，效果如上图，整个页面分为上、中、下三部分，上面部分是工具条，显示当前登录用户的昵称以及写微博、刷新两个功能按钮；中间部分是当前用户关注的最新微博列表，下面部分是功能切换栏，用来进行各个功能之间的切换。

      首先新建名为HomeActivity.java的Activity作为用户首页，然后在res/layout目录下新建名为home.xml的Layout,具体代码如下：

1. 
   
3.   xmlns:=""
   
4.   android:id="@+id/layout"
   
5.   android:orientation="vertical"
   
6.   android:layout_width="fill_parent"
   
7.   android:layout_height="fill_parent">
   
8.   
   
9.   
10.   android:layout_width="fill_parent"
    
11.   android:layout_height="wrap_content"
    
12.   android:layout_margin="3px">
    
13.   
14.   android:layout_width="wrap_content"
    
15.   android:layout_height="wrap_content"
    
16.   android:src="@drawable/logo_ss">
    
17.   
    
18.   
19.   android:id="@+id/showName"
    
20.   android:layout_width="wrap_content"
    
21.   android:layout_height="wrap_content"
    
22.   android:layout_centerInParent="true"
    
23.   android:textColor="#343434"
    
24.   android:textSize="15px">
    
25.   
    
26.   
27.   android:id="@+id/writeBtn"
    
28.   android:layout_width="wrap_content"
    
29.   android:layout_height="wrap_content"
    
30.   android:layout_toLeftOf="@+id/refreshBtn"
    
31.   android:background="@drawable/btn_write_selector">
    
32.   
    
33.   
34.   android:id="@+id/refreshBtn"
    
35.   android:layout_width="wrap_content"
    
36.   android:layout_height="wrap_content"
    
37.   android:layout_alignParentRight="true"
    
38.   android:layout_marginLeft="12px"
    
39.   android:background="@drawable/btn_refresh_selector">
    
40.   
    
41.   
    
42.   
    
43.   
44.   android:layout_width="fill_parent"
    
45.   android:layout_height="wrap_content"
    
46.   android:background="@drawable/hr">
    
47.   
    
48. 
    
49.   
50.     android:layout_width="fill_parent"
    
51.     android:layout_height="fill_parent">
    
52.         
    
53.         
54.             android:id="@+id/Msglist"
    
55.             android:layout_width="fill_parent"
    
56.             android:layout_height="match_parent"
    
57.             android:divider="@drawable/divider"
    
58.             android:dividerHeight="2px"
    
59.             android:layout_margin="0px"
    
60.             android:background="#BBFFFFFF"
    
61.             android:cacheColorHint="#00000000"
    
62.             android:layout_above="@+id/toolbarLayout"
    
63.             android:fastScrollEnabled="true"  
    
64.             android:focusable="true">
    
65.         
    
66.         
    
67.         
68.         android:id="@+id/loadingLayout"
    
69.         android:layout_width="wrap_content"
    
70.         android:layout_height="wrap_content"
    
71.         android:orientation="vertical"
    
72.         android:visibility="invisible"
    
73.         android:layout_centerInParent="true">
    
74.             
75.             android:id="@+id/loading"
    
76.             android:layout_width="31px"
    
77.             android:layout_height="31px"
    
78.             android:layout_gravity="center"
    
79.             style="@style/progressStyle">
    
80.             
    
81.             
82.             android:layout_width="wrap_content"
    
83.             android:layout_height="wrap_content"
    
84.             android:text="正在载入"
    
85.             android:textSize="12px"
    
86.             android:textColor="#9c9c9c"
    
87.             android:layout_gravity="center"
    
88.             android:layout_below="@+id/loading">
    
89.             
    
90.         
    
91.         
    
92.         
    
93.         
94.         android:id="@+id/toolbarLayout"
    
95.         android:layout_width="fill_parent"
    
96.         android:layout_height="44dip"
    
97.         android:layout_alignParentBottom="true">
    
98.         
    
99.   
    

复制代码

这个布局首先是一个竖直的根LinearLayout，在这个根LinearLayout里面分别是两个RelativeLayout， 第一个RelativeLayout 用来显示页面的工具条，第二个RelativeLayout用来显示列表以及底部的功能栏，特别主要在这第二个RelativeLayout中有一个id 为loadingLayout的LinearLayout是用来显示数据载入中的动画，它的android:visibility属性为 invisible(也可以设置成gone,区别：invisible这个View在ViewGroupt中仍保留它的位置，不重新layout
gone>不可见，但这个View在ViewGroupt中不保留位置，重新layout,那后面的view就会取代他的位置。 )，也就是一开始不显示的意思，接下来看看

2.         android:id="@+id/loading"
   
3.         android:layout_width="31px"
   
4.         android:layout_height="31px"
   
5.         android:layout_gravity="center"
   
6.         style="@style/progressStyle">
   

复制代码

       这个ProgressBar控件就是用来显示动画用的，关键就是 style="@style/progressStyle"，在res/values目录下新建名为loadingstyles.xml，内容如下：

1. 
   
2. 
   
3.    
   

复制代码

接着准备好r1.png - r8.png，
八张不同的小图片分别代表每旋转45度图片，八张刚好是360度。把这些图片添加到res/drawable-mdpi目录中。然后在res/anim目录下新建名为loading.xml动画文件，内容如下：

1. 
   
3.   xmlns:android="">
   
4.    
   
5.    
   
6.    
   
7.    
   
8.    
   
9.    
   
10.    
    
11.    
    

复制代码

         本篇到这里就结束了，下一篇继续讲用户首页的功能实现，请关注。