Mikel
[转载]android开发我的新浪微博客户端-阅读微博UI篇(6.1) – 遇见未知的自己 – 博客园.
上一篇完成了微博列表的功能，本篇接着做预读微博的功能，本篇主要讲讲UI部分的实现，最终实现的效果如上图所示。整个显示页面从上往下分为四部分，第一部分顶部工具条、第二部分作者头像和名称、第三部分微博正文、第四部分功能按钮区。
新建名为ViewActivity.java作为阅读微博的页面，再res/layout目录下新建名为view.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:text=”阅读微博”
android:textSize=”16px”>
</TextView>
<ImageButton
android:id=”@+id/returnBtn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toLeftOf=”@+id/homeBtn”
android:background=”@drawable/bnt_return_selector”>
</ImageButton>
<ImageButton
android:id=”@+id/homeBtn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_marginLeft=”12px”
android:background=”@drawable/btn_home_selector”>
</ImageButton>
</RelativeLayout>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/hr”>
</LinearLayout> <RelativeLayout
android:id=”@+id/user_bg”
android:layout_width=”fill_parent”
android:layout_height=”78px”
android:paddingTop=”8px”
android:paddingLeft=”15px”
android:background=”@drawable/u_bg_v”>
<ImageView
android:id=”@+id/user_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:src=”@drawable/usericon”>
</ImageView>
<TextView
android:id=”@+id/user_name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toRightOf=”@+id/user_icon”
android:layout_marginLeft=”10px”
android:layout_marginTop=”18px”
android:textColor=”#000000″>
</TextView>
<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_marginRight=”5px”
android:layout_marginTop=”10px”
android:src=”@drawable/sjjt”>
</ImageView>
</RelativeLayout>
<RelativeLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<ScrollView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:paddingLeft=”17px”
android:paddingRight=”17px”
android:paddingBottom=”5px”
android:layout_above=”@+id/menu_layout”>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical”>
<TextView
android:id=”@+id/text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#000000″
android:textSize=”15px”>
</TextView>
<ImageView
android:id=”@+id/pic”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
</ImageView>
</LinearLayout>
</ScrollView> <LinearLayout
android:id=”@+id/loadingLayout”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:visibility=”gone”
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> <TableLayout
android:id=”@+id/menu_layout”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:layout_alignParentBottom=”true”
android:layout_marginBottom=”5px”>
<TableRow
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”>
<Button
android:id=”@+id/btn_gz”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=” 关注(1231)”
android:background=”@drawable/lt_selector”>
</Button>
<Button
android:id=”@+id/btn_pl”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=” 评论(31)”
android:background=”@drawable/rt_selector”>
</Button>
</TableRow>
<TableRow
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:layout_gravity=”left”
android:text=”刷新”
android:background=”@drawable/lb_selector”>
</Button>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=”收藏”
android:background=”@drawable/rb_selector”>
</Button>
</TableRow> </TableLayout> </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:text=”阅读微博”
android:textSize=”16px”>
</TextView>
<ImageButton
android:id=”@+id/returnBtn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toLeftOf=”@+id/homeBtn”
android:background=”@drawable/bnt_return_selector”>
</ImageButton>
<ImageButton
android:id=”@+id/homeBtn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_marginLeft=”12px”
android:background=”@drawable/btn_home_selector”>
</ImageButton>
</RelativeLayout>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/hr”>
</LinearLayout> <RelativeLayout
android:id=”@+id/user_bg”
android:layout_width=”fill_parent”
android:layout_height=”78px”
android:paddingTop=”8px”
android:paddingLeft=”15px”
android:background=”@drawable/u_bg_v”>
<ImageView
android:id=”@+id/user_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:src=”@drawable/usericon”>
</ImageView>
<TextView
android:id=”@+id/user_name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toRightOf=”@+id/user_icon”
android:layout_marginLeft=”10px”
android:layout_marginTop=”18px”
android:textColor=”#000000″>
</TextView>
<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_marginRight=”5px”
android:layout_marginTop=”10px”
android:src=”@drawable/sjjt”>
</ImageView>
</RelativeLayout>
<RelativeLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<ScrollView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:paddingLeft=”17px”
android:paddingRight=”17px”
android:paddingBottom=”5px”
android:layout_above=”@+id/menu_layout”>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical”>
<TextView
android:id=”@+id/text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#000000″
android:textSize=”15px”>
</TextView>
<ImageView
android:id=”@+id/pic”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
</ImageView>
</LinearLayout>
</ScrollView> <LinearLayout
android:id=”@+id/loadingLayout”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:visibility=”gone”
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> <TableLayout
android:id=”@+id/menu_layout”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:layout_alignParentBottom=”true”
android:layout_marginBottom=”5px”>
<TableRow
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”>
<Button
android:id=”@+id/btn_gz”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=” 关注(1231)”
android:background=”@drawable/lt_selector”>
</Button>
<Button
android:id=”@+id/btn_pl”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=” 评论(31)”
android:background=”@drawable/rt_selector”>
</Button>
</TableRow>
<TableRow
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:layout_gravity=”left”
android:text=”刷新”
android:background=”@drawable/lb_selector”>
</Button>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textColor=”#3882b8″
android:textSize=”15px”
android:text=”收藏”
android:background=”@drawable/rb_selector”>
</Button>
</TableRow> </TableLayout> </RelativeLayout>
</LinearLayout>
上面这个布局实现起来并不复杂， 主要看看功能按钮区的4个按钮的点击上去的切换背景的效果，以关注按钮为例子看这行设 置，android:background=”@drawable/lt_selector”，在res/drawable-mdpi目录下新建名为 lt_selector.xml用来实现点击上去切换图片的效果，具体代码如下：
代码
<?xml version=”1.0″ encoding=”UTF-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:state_focused=”false” android:state_selected=”false” android:state_pressed=”false” android:drawable=”@drawable/tbtn_1″ />
<item android:state_pressed=”true” android:drawable=”@drawable/tbtn_h_1″ />
</selector>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:state_focused=”false” android:state_selected=”false” android:state_pressed=”false” android:drawable=”@drawable/tbtn_1″ />
<item android:state_pressed=”true” android:drawable=”@drawable/tbtn_h_1″ />
</selector>
本篇虽然看layout文件非常的长，其实仔细看看非常的简单了没有什么难和复杂的了，就是按照前面的经验控制好图片以及控件的显示位置和样式即可，本 篇中用了一个ScrollView控件这个是前面没有用到过的，主要是用来当微博的内容超出显示区域的时候出现滚动条用的这个非常容易使用，所以就简单写 一下到此结束了，请继续关注下一篇阅读微博的功能篇。
