一个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);">http://download.csdn.net/detail/tyler_download/9273255），本篇对该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界面设计的技术特点，就是通过件套布局的方式，循环递归的设计出复杂多变的操控界面。