一个android文本比对app的实现（二）－－界面

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">继上一篇博文大致介绍了这一简单但有点用处的app后(详情：</span><span style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);">，本篇对该app的界面实现做一些说明。谷歌对android app 的界面开发提供了精巧的设计，其界面设计的布局技术(layout), 运用了类似于设计模式的composite pattern, 具体来说，就像俄罗斯娃娃，外面一个大娃娃可以套一个小娃娃。android 的layout 里面可以再嵌入其他layout, 层层递进，进而形成变化多样而又非常灵活的界面布局。</span>

本app 的启动界面设计比较简单，最高层的layout是一个 table layout, table 分两行，第一行和第二行高度比是九比一， 第一行里面潜入了一个linear layout, 这个linear layout 又被平均分成两部分，分别存放两个textview 控件，第二行则用于存放底部按钮栏，整体布局文件内容如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
      android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".TwoHouseTansActivity" >
 
  <TableLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.88"
        android:id="@+id/top"
        >
 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tvbar" 
         />
    </TableRow>
    
    <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5" >
    
      <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tvbar1" 
         />
      
    </TableRow> 
  </TableLayout>
  
 <include layout="@layout/bottom_tab_layout"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="0.12">
 </include>
</LinearLayout>

值得注意的是， 第二行table row 使用关键字include 引入了新的布局文件，这样可以避免一个布局文件变得过于庞大和复杂。底层工具栏是一个比较实用的组件，

我也是从别的朋友那借鉴过来的，该组件不是我原创，由于其易用性，在这里解析一下底层工具栏的设计思路，或许对有需要的朋友会有些帮助。我们看看底层工具栏的布局文件内容：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
 
    <LinearLayout
        android:id="@+id/id_tab_prev"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
 <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->
        <ImageButton
             android:id="@+id/go_down_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/go_down" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下一处"
          />
    </LinearLayout>

    <LinearLayout
         android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/go_up_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
             android:clickable="false"
            android:src="@drawable/go_up" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
          />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
             android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"
   />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            />
    </LinearLayout>

</LinearLayout>

底部工具栏在整体上，使用了一个水平方向的线性布局，然后又将水平空间平均分成四小块，在每一小块里，又嵌入一个竖直方向的线性布局。在这个竖直方向的布局小方块的顶部，我们放置了一个ImangeButton 控件，在按钮控件的下方，放置了一个textview, 用来做按钮的标题，这一布局最终形成的效果如下：

这里面有一个bug, 就是前两个上下箭头按钮，由于图片过大，从而盖住了下方的textview,  找时间我要改掉，本着互联网的迭代精神，暂且把他放上去吧。我的界面设计虽然简单，但管中窥豹，基本上展示了android界面设计的技术特点，就是通过件套布局的方式，循环递归的设计出复杂多变的操控界面。