android小项目之新闻客户端二



基于Android的小巫新闻客户端开发--UI设计（主界面）

2013年2月15日

由于太多事情要乱，不可能只专注一样东西，因为怕完成不了任务。原本这系列博客就是要在寒假搞定的，没想到拖了那么久，没办法。现在只能有空的时候就回顾一下小巫新闻客户端，在复习一下这样子了。大概会在10篇以内把整个客户端开发给写完，不可能面面俱到的了，只是把核心的东西，稍微总结一下，回顾一下。

 

关于这个新闻客户端的开发，小巫是从设计界面开始的，简单的来说就是搭建框架，把整体的框架建好了，剩下的就是业务逻辑的实现了。那好，这篇用来介绍主界面的设计过程。

首先看看最初想实现的效果和最终实现的效果：

      

 

光看效果图，我们都大致能想到用什么布局来实现上面的效果。光用语言来描述，总是欠缺想象力的，还是先帖代码，再介绍。

 

[html] view plaincopyprint?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@id/main_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/main_background"  
7.     android:orientation="vertical" >  
8.   
9.     <RelativeLayout  
10.         android:id="@id/titlebar_layout"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="@drawable/image_titlebar_background" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="10.0dip"  
19.             android:layout_marginTop="9.0dip"  
20.             android:text="@string/app_name"  
21.             android:textColor="@color/white"  
22.             android:textSize="23.0sp" />  
23.   
24.         <Button  
25.             android:id="@id/titlebar_refresh"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="wrap_content"  
28.             android:layout_alignParentRight="true"  
29.             android:layout_marginRight="5.0dip"  
30.             android:layout_marginTop="6.0dip"  
31.             android:background="@drawable/btn_titlebar_refresh_selector" />  
32.   
33.         <ProgressBar  
34.             android:id="@id/titlebar_progress"  
35.             style="?android:attr/progressBarStyleLarge"  
36.             android:layout_width="25.0dip"  
37.             android:layout_height="25.0dip"  
38.             android:layout_alignParentRight="true"  
39.             android:layout_marginRight="14.0dip"  
40.             android:layout_marginTop="10.0dip"  
41.             android:clickable="false"  
42.             android:visibility="gone" />  
43.     </RelativeLayout>  
44.   
45.     <RelativeLayout  
46.         android:id="@id/categorybar_layout"  
47.         android:layout_width="match_parent"  
48.         android:layout_height="wrap_content"  
49.         android:layout_marginTop="-16dip"  
50.         android:background="@drawable/image_categorybar_background" >  
51.   
52.         <Button  
53.             android:id="@id/category_arrow_right"  
54.             android:layout_width="6.0dip"  
55.             android:layout_height="10.0dip"  
56.             android:layout_alignParentRight="true"  
57.             android:layout_marginRight="12dip"  
58.             android:layout_marginTop="17dip"  
59.             android:background="@drawable/image_categorybar_right_arrow" />  
60.   
61.         <HorizontalScrollView  
62.             android:id="@id/categorybar_scrollView"  
63.             android:layout_width="match_parent"  
64.             android:layout_height="wrap_content"  
65.             android:layout_marginLeft="8dip"  
66.             android:layout_marginTop="3.0dip"  
67.             android:layout_toLeftOf="@+id/category_arrow_right"  
68.             android:scrollbars="none" >  
69.   
70.             <LinearLayout  
71.                 android:id="@id/category_layout"  
72.                 android:layout_width="wrap_content"  
73.                 android:layout_height="match_parent"  
74.                 android:gravity="center_vertical" >  
75.             </LinearLayout>  
76.         </HorizontalScrollView>  
77.     </RelativeLayout>  
78.   
79.   
80.     <ListView  
81.         android:id="@id/news_list"  
82.         android:layout_width="match_parent"  
83.         android:layout_height="match_parent"  
84.         android:cacheColorHint="#00000000"  
85.         android:divider="@drawable/image_list_separator_line"  
86.         android:fastScrollEnabled="true"  
87.         android:listSelector="@drawable/news_list_item_selector" />  
88.   
89. </LinearLayout>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@id/main_layout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/main_background"    android:orientation="vertical" >    <RelativeLayout        android:id="@id/titlebar_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/image_titlebar_background" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="10.0dip"            android:layout_marginTop="9.0dip"            android:text="@string/app_name"            android:textColor="@color/white"            android:textSize="23.0sp" />        <Button            android:id="@id/titlebar_refresh"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_marginRight="5.0dip"            android:layout_marginTop="6.0dip"            android:background="@drawable/btn_titlebar_refresh_selector" />        <ProgressBar            android:id="@id/titlebar_progress"            style="?android:attr/progressBarStyleLarge"            android:layout_width="25.0dip"            android:layout_height="25.0dip"            android:layout_alignParentRight="true"            android:layout_marginRight="14.0dip"            android:layout_marginTop="10.0dip"            android:clickable="false"            android:visibility="gone" />    </RelativeLayout>    <RelativeLayout        android:id="@id/categorybar_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="-16dip"        android:background="@drawable/image_categorybar_background" >        <Button            android:id="@id/category_arrow_right"            android:layout_width="6.0dip"            android:layout_height="10.0dip"            android:layout_alignParentRight="true"            android:layout_marginRight="12dip"            android:layout_marginTop="17dip"            android:background="@drawable/image_categorybar_right_arrow" />        <HorizontalScrollView            android:id="@id/categorybar_scrollView"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="8dip"            android:layout_marginTop="3.0dip"            android:layout_toLeftOf="@+id/category_arrow_right"            android:scrollbars="none" >            <LinearLayout                android:id="@id/category_layout"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:gravity="center_vertical" >            </LinearLayout>        </HorizontalScrollView>    </RelativeLayout>    <ListView        android:id="@id/news_list"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:cacheColorHint="#00000000"        android:divider="@drawable/image_list_separator_line"        android:fastScrollEnabled="true"        android:listSelector="@drawable/news_list_item_selector" /></LinearLayout>

以上代码就是该效果图的xml代码，可以知道最外层的布局是用线性布局的(LinearLayout),其中嵌套了两个相对布局(RelativeLayout),最后是一个ListView组件；整个界面的布局设计就这么简单，第一个RelativeLayout是标题栏的布局，其中有一个TextView和一个刷新按钮；第二个RelativeLayout是分类栏的布局，这个稍微复杂一点，有一个Button组件，还有HorizontalScrollView.具体代码请读者自行查看。其中还有一些细节，比如说背景，还有一下效果。需要读者自己去体会才能了解清楚。在这里也无法说得太明白。