在前篇完成了用户登录功能后开始用户首页的开发,用户的首页主要的内容是当前登录用户关注的微博列表,本篇先来讲讲UI的实现,效果如上图,整个页面分为上、中、下三部分,上面部分是工具条,显示当前登录用户的昵称以及写微博、刷新两个功能按钮;中间部分是当前用户关注的最新微博列表,下面部分是功能切换栏,用来进行各个功能之间的切换。
首先新建名为HomeActivity.java的Activity作为用户首页,然后在res/layout目录下新建名为home.xml的Layout,具体代码如下:
< 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就会取代他的位置。 ),也就是一开始不显示的意思,接下来看看
< 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动画文件,内容如下:
< 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