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

2013年2月15日

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

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

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

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

[html] view plain copy print ?

<LinearLayoutxmlns: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.具体代码请读者自行查看。其中还有一些细节，比如说背景，还有一下效果。需要读者自己去体会才能了解清楚。在这里也无法说得太明白。

原：http://blog.csdn.net/wwj_748/article/details/8581906

Android新闻客户端开发1--UI设计（主界面）

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

更多相关文章

随机推荐