android小项目之新闻客户端二分析

阿里 阅读:176 2021-04-01 00:24:08 评论:0


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

2013年2月15日

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

 

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

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

      

 

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

 

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

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号