在前篇完成了用户登录功能后开始用户首页的开发，用户的首页主要的内容是当前登录用户关注的微博列表，本篇先来讲讲UI的实现，效果如上图，整个页面分为上、中、下三部分，上面部分是工具条，显示当前登录用户的昵称以及写微博、刷新两个功能按钮；中间部分是当前用户关注的最新微博列表，下面部分是功能切换栏，用来进行各个功能之间的切换。
首先新建名为HomeActivity.java的Activity作为用户首页，然后在res/layout目录下新建名为home.xml的Layout,具体代码如下：
代码 <? xml version="1.0" encoding="utf-8" ?> < LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:id ="@+id/layout" android:orientation ="vertical" android:layout_width ="fill_parent" android:layout_height ="fill_parent" > < RelativeLayout android:layout_width ="fill_parent" android:layout_height ="wrap_content" android:layout_margin ="3px" > < ImageView android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:src ="@drawable/logo_ss" > </ ImageView > < TextView android:id ="@+id/showName" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_centerInParent ="true" android:textColor ="#343434" android:textSize ="15px" > </ TextView > < ImageButton android:id ="@+id/writeBtn" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_toLeftOf ="@+id/refreshBtn" android:background ="@drawable/btn_write_selector" > </ ImageButton > < ImageButton android:id ="@+id/refreshBtn" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_alignParentRight ="true" android:layout_marginLeft ="12px" android:background ="@drawable/btn_refresh_selector" > </ ImageButton > </ RelativeLayout > < LinearLayout android:layout_width ="fill_parent" android:layout_height ="wrap_content" android:background ="@drawable/hr" > </ LinearLayout > < RelativeLayout android:layout_width ="fill_parent" android:layout_height ="fill_parent" > < ListView android:id ="@+id/Msglist" android:layout_width ="fill_parent" android:layout_height ="match_parent" android:divider ="@drawable/divider" android:dividerHeight ="2px" android:layout_margin ="0px" android:background ="#BBFFFFFF" android:cacheColorHint ="#00000000" android:layout_above ="@+id/toolbarLayout" android:fastScrollEnabled ="true" android:focusable ="true" > </ ListView > < LinearLayout android:id ="@+id/loadingLayout" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:orientation ="vertical" android:visibility ="invisible" android:layout_centerInParent ="true" > < ProgressBar android:id ="@+id/loading" android:layout_width ="31px" android:layout_height ="31px" android:layout_gravity ="center" style ="@style/progressStyle" > </ ProgressBar > < TextView android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:text ="正在载入" android:textSize ="12px" android:textColor ="#9c9c9c" android:layout_gravity ="center" android:layout_below ="@+id/loading" > </ TextView > </ LinearLayout > < LinearLayout android:id ="@+id/toolbarLayout" android:layout_width ="fill_parent" android:layout_height ="44dip" android:layout_alignParentBottom ="true" > </ LinearLayout > </ RelativeLayout > </ LinearLayout >
这个布局首先是一个竖直的根LinearLayout，在这个根LinearLayout里面分别是两个RelativeLayout， 第一个RelativeLayout 用来显示页面的工具条，第二个RelativeLayout用来显示列表以及底部的功能栏，特别主要在这第二个RelativeLayout中有一个id为loadingLayout的LinearLayout是用来显示数据载入中的动画，它的android:visibility属性为invisible(也可以设置成gone,区别：invisible这个View在ViewGroupt中仍保留它的位置，不重新layout gone>不可见，但这个View在ViewGroupt中不保留位置，重新layout,那后面的view就会取代他的位置。 )，也就是一开始不显示的意思，接下来看看
<ProgressBar android: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" ?> < resources > < style name ="progressStyle" width ="38" height ="38" parent ="@android:style/Widget.ProgressBar.Small" > < item name ="android:indeterminateDrawable" > @anim/loading </ item > </ style > </ resources >
接着准备好r1.png - r8.png，八张不同的小图片分别代表每旋转45度图片，八张刚好是360度。把这些图片添加到res/drawable-mdpi目录中。然后在res/anim目录下新建名为loading.xml动画文件，内容如下：
代码 <? xml version="1.0" encoding="UTF-8" ?> < animation-list android:oneshot ="false" xmlns:android ="http://schemas.android.com/apk/res/android" > < item android:duration ="200" android:drawable ="@drawable/r1" /> < item android:duration ="200" android:drawable ="@drawable/r2" /> < item android:duration ="200" android:drawable ="@drawable/r3" /> < item android:duration ="200" android:drawable ="@drawable/r4" /> < item android:duration ="200" android:drawable ="@drawable/r5" /> < item android:duration ="200" android:drawable ="@drawable/r6" /> < item android:duration ="200" android:drawable ="@drawable/r7" /> < item android:duration ="200" android:drawable ="@drawable/r8" /> </ animation-list >
关于Android播放动画实现我是参考http://terryblog.blog.51cto.com/1764499/388226
本篇到这里就结束了，下一篇继续讲用户首页的功能实现，请关注。
