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>
上面这个布局实现起来并不复杂， 主要看看功能按钮区的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>
本篇虽然看layout文件非常的长，其实仔细看看非常的简单了没有什么难和复杂的了，就是按照前面的经验控制好图片以及控件的显示位置和样式即可，本篇中用了一个ScrollView控件这个是前面没有用到过的，主要是用来当微博的内容超出显示区域的时候出现滚动条用的这个非常容易使用，所以就简单写一下到此结束了，请继续关注下一篇阅读微博的功能篇。