Mikel
[转载]android开发我的新浪微博客户端-用户首页面UI篇(5.1) – 遇见未知的自己 – 博客园.
在前篇完成了用户登录功能后开始用户首页的开发，用户的首页主要的内容是当前登录用户关注的微博列表，本篇先来讲讲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
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>
<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>
<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
本篇到这里就结束了，下一篇继续讲用户首页的功能实现，请关注。
