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

柔情只为你懂 2022-03-16 02:16 221阅读 0赞

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

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

2013年2月15日

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

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

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

![1360936896_3878.png][] ![1360936749_1521.png][]

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

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

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[1360936896_3878.png]: https://img-my.csdn.net/uploads/201302/15/1360936896_3878.png
[1360936749_1521.png]: https://img-my.csdn.net/uploads/201302/15/1360936749_1521.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 android小项目之新闻客户端一

开篇--基于Android的小巫新闻客户端开发 2013年2月4日小年天气晴大三寒假ing。。。。一.项目简介关于小巫新闻客户端的开发是之前

怼烎@/ 2023年10月16日 19:29/ 0 赞/ 57 阅读

相关 android ui界面设计开发demo-智慧社区ui设计展示

原文：[android ui界面设计开发demo-智慧社区ui设计展示][android ui_demo-_ui] [源代码下载地址][android ui_demo-_ui

落日映苍穹つ/ 2022年09月22日 11:46/ 0 赞/ 219 阅读

相关 Android应用开发-小巫CSDN博客客户端总结篇

Android应用开发-小巫CSDN博客客户端总结篇 2014博客之星投票地址：[http://vote.blog.csdn.net/blogstar2014/de

旧城等待，/ 2022年08月13日 01:28/ 0 赞/ 148 阅读

相关 Android应用开发-小巫CSDN博客客户端之获取评论列表

Android应用开发-小巫CSDN博客客户端之获取评论列表上一篇博客介绍了博文详细内容的业务逻辑实现，本篇博客介绍小巫CSDN博客客户端的最后一项功能，获取评

布满荆棘的人生/ 2022年08月13日 00:58/ 0 赞/ 185 阅读

相关 Android应用开发-小巫CSDN博客客户端之嵌入有米广告

Android应用开发-小巫CSDN博客客户端之嵌入有米广告上一篇博客给大家介绍如何集成友盟社会化组件，本篇继续带来干货，教大家如何嵌入广告到应用中去。小巫自称

矫情吗；*/ 2022年08月12日 21:00/ 0 赞/ 161 阅读

相关 Android应用开发-小巫CSDN博客客户端Jsoup篇

Android应用开发-小巫CSDN博客客户端Jsoup篇距上一篇博客已经过去了两个星期，小巫也觉得非常抱歉，因为在忙着做另外一个项目，几乎抽不出空来，这不小巫

青旅半醒/ 2022年08月12日 20:58/ 0 赞/ 159 阅读

相关 Android应用开发-小巫CSDN博客客户端UI篇

Android应用开发-小巫CSDN博客客户端UI篇上一篇是给童鞋们介绍整个项目的概况，从这篇博文开始，后续也会详细介绍整个客户端的开发，但不会贴很多代码，我会贴

「爱情、让人受尽委屈。」/ 2022年08月12日 01:18/ 0 赞/ 162 阅读

相关 Android应用开发-小巫CSDN博客客户端开发开篇

Android应用开发-小巫CSDN博客客户端开发开篇 2014年9月8日八月十五祝各位中秋节快乐小巫断断续续花了几个星期的时间开发了这么一款应用——小

叁歲伎倆/ 2022年08月12日 00:22/ 0 赞/ 160 阅读

相关 Android应用开发-小巫CSDN博客客户端开发开篇

Android应用开发-小巫CSDN博客客户端开发开篇 2014年9月8日八月十五祝各位中秋节快乐小巫断断续续花了几个星期的时间开发了这么一款应用——小

电玩女神/ 2022年03月18日 13:46/ 0 赞/ 187 阅读

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

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjuns

柔情只为你懂/ 2022年03月16日 02:16/ 0 赞/ 222 阅读