android开发我的新浪微博客户端-阅读微博UI篇(6.1)

     上一篇完成了微博列表的功能，本篇接着做预读微博的功能，本篇主要讲讲UI部分的实现，最终实现的效果如上图所示。整个显示页面从上往下分为四部分，第一部分顶部工具条、第二部分作者头像和名称、第三部分微博正文、第四部分功能按钮区。

新建名为ViewActivity.java作为阅读微博的页面，再res/layout目录下新建名为view.xml的Layout，代码如下：

1. 
   
3.   xmlns:=""
   
4.   android:id="@+id/layout"
   
5.   android:orientation="vertical"
   
6.   android:layout_width="fill_parent"
   
7.   android:layout_height="fill_parent">
   
8.   
9.   android:layout_width="fill_parent"
   
10.   android:layout_height="wrap_content"
    
11.   android:layout_margin="3px">
    
12.   
13.   android:layout_width="wrap_content"
    
14.   android:layout_height="wrap_content"
    
15.   android:src="@drawable/logo_ss">
    
16.   
    
17.   
18.   android:id="@+id/showName"
    
19.   android:layout_width="wrap_content"
    
20.   android:layout_height="wrap_content"
    
21.   android:layout_centerInParent="true"
    
22.   android:textColor="#343434"
    
23.   android:text="阅读微博"
    
24.   android:textSize="16px">
    
25.   
    
26.   
27.   android:id="@+id/returnBtn"
    
28.   android:layout_width="wrap_content"
    
29.   android:layout_height="wrap_content"
    
30.   android:layout_toLeftOf="@+id/homeBtn"
    
31.   android:background="@drawable/bnt_return_selector">
    
32.   
    
33.   
34.   android:id="@+id/homeBtn"
    
35.   android:layout_width="wrap_content"
    
36.   android:layout_height="wrap_content"
    
37.   android:layout_alignParentRight="true"
    
38.   android:layout_marginLeft="12px"
    
39.   android:background="@drawable/btn_home_selector">
    
40.   
    
41.   
    
42.   
43.   android:layout_width="fill_parent"
    
44.   android:layout_height="wrap_content"
    
45.   android:background="@drawable/hr">
    
46.   
    
47.   
    
48.   
49.   android:id="@+id/user_bg"
    
50.   android:layout_width="fill_parent"
    
51.   android:layout_height="78px"
    
52.   android:paddingTop="8px"
    
53.   android:paddingLeft="15px"
    
54.   android:background="@drawable/u_bg_v">
    
55.       
56.       android:id="@+id/user_icon"
    
57.       android:layout_width="wrap_content"
    
58.       android:layout_height="wrap_content"
    
59.       android:layout_alignParentLeft="true"
    
60.       android:src="@drawable/usericon">
    
61.       
    
62.       
63.       android:id="@+id/user_name"
    
64.       android:layout_width="wrap_content"
    
65.       android:layout_height="wrap_content"
    
66.       android:layout_toRightOf="@+id/user_icon"
    
67.       android:layout_marginLeft="10px"
    
68.       android:layout_marginTop="18px"
    
69.       android:textColor="#000000">
    
70.       
    
71.       
72.       android:layout_width="wrap_content"
    
73.       android:layout_height="wrap_content"
    
74.       android:layout_alignParentRight="true"
    
75.       android:layout_marginRight="5px"
    
76.       android:layout_marginTop="10px"
    
77.       android:src="@drawable/sjjt">
    
78.       
    
79.   
    
80.   
81.     android:layout_width="fill_parent"
    
82.     android:layout_height="fill_parent">
    
83.         
84.         android:layout_width="fill_parent"
    
85.         android:layout_height="fill_parent"
    
86.         android:paddingLeft="17px"
    
87.         android:paddingRight="17px"
    
88.         android:paddingBottom="5px"
    
89.         android:layout_above="@+id/menu_layout">
    
90.         
91.         android:layout_width="fill_parent"
    
92.         android:layout_height="fill_parent"
    
93.         android:orientation="vertical">
    
94.             
95.             android:id="@+id/text"
    
96.             android:layout_width="wrap_content"
    
97.             android:layout_height="wrap_content"
    
98.             android:textColor="#000000"
    
99.             android:textSize="15px">
    
100.             
     
101.             
102.             android:id="@+id/pic"
     
103.             android:layout_width="wrap_content"
     
104.             android:layout_height="wrap_content">
     
105.             
     
106.         
     
107.         
     
108.         
     
109.         
110.         android:id="@+id/loadingLayout"
     
111.         android:layout_width="wrap_content"
     
112.         android:layout_height="wrap_content"
     
113.         android:orientation="vertical"
     
114.         android:visibility="gone"
     
115.         android:layout_centerInParent="true">
     
116.             
117.             android:id="@+id/loading"
     
118.             android:layout_width="31px"
     
119.             android:layout_height="31px"
     
120.             android:layout_gravity="center"
     
121.             style="@style/progressStyle">
     
122.             
     
123.             
124.             android:layout_width="wrap_content"
     
125.             android:layout_height="wrap_content"
     
126.             android:text="正在载入"
     
127.             android:textSize="12px"
     
128.             android:textColor="#9c9c9c"
     
129.             android:layout_gravity="center"
     
130.             android:layout_below="@+id/loading">
     
131.             
     
132.         
     
133. 
     
134. 
     
135.         
136.         android:id="@+id/menu_layout"
     
137.         android:layout_width="fill_parent"
     
138.         android:layout_height="wrap_content"
     
139.         android:gravity="center"
     
140.         android:layout_alignParentBottom="true"
     
141.         android:layout_marginBottom="5px">
     
142.             
143.             android:layout_width="wrap_content"
     
144.             android:layout_height="wrap_content"
     
145.             android:gravity="center">
     
146.             
147.             android:id="@+id/btn_gz"
     
148.             android:layout_width="wrap_content"
     
149.             android:layout_height="wrap_content"
     
150.             android:textColor="#3882b8"
     
151.             android:textSize="15px"
     
152.             android:text="        关注(1231)"
     
153.             android:background="@drawable/lt_selector">
     
154.             
     
155.             
156.             android:id="@+id/btn_pl"
     
157.             android:layout_width="wrap_content"
     
158.             android:layout_height="wrap_content"
     
159.             android:textColor="#3882b8"
     
160.             android:textSize="15px"
     
161.             android:text="        评论(31)"
     
162.             android:background="@drawable/rt_selector">
     
163.             
     
164.             
     
165.             
166.             android:layout_width="wrap_content"
     
167.             android:layout_height="wrap_content"
     
168.             android:gravity="center">
     
169.             
170.             android:layout_width="wrap_content"
     
171.             android:layout_height="wrap_content"
     
172.             android:textColor="#3882b8"
     
173.             android:textSize="15px"
     
174.             android:layout_gravity="left"
     
175.             android:text="刷新"
     
176.             android:background="@drawable/lb_selector">
     
177.             
     
178.             
179.             android:layout_width="wrap_content"
     
180.             android:layout_height="wrap_content"
     
181.             android:textColor="#3882b8"
     
182.             android:textSize="15px"
     
183.             android:text="收藏"
     
184.             android:background="@drawable/rb_selector">
     
185.             
     
186.             
     
187.             
     
188.         
     
189. 
     
190.         
     
191.   
     

复制代码

上面这个布局实现起来并不复杂， 主要看看功能按钮区的4个按钮的点击上去的切换背景的效果，以关注按钮为例子看这行设置，android:background="@drawable/lt_selector"，在res/drawable-mdpi目录下新建名为 lt_selector.xml用来实现点击上去切换图片的效果，具体代码如下：

1.   
   
2.    
   
3.        
   
4.       
   
5.   

复制代码

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