Android测试驱动开发实践3

至此，一个基于MVC的基本Android应用程序已经初步形成了。

下面我们来实现一个具有TabHost的布局的典型Android应用，由于我们基本上可以不考虑Android 4.x以前的版本，因此我对TabHost布局的实现将采用Fragment来实现，而不是采用旧的ActivityGroup来实现。

同时，我们希望我们的应用程序可以适用于不同的项目，因此需要TabHost上的图片及文字可以非常方便的进行更换。我们采用下部有5个选项的布局，其中中间的选项可以突出显示，选中某个选项，目前仅显示对应Fragmentation的名字。

好了，需求基本说清楚了，下面我们就开始一步步实现吧。

首先是基于Fragment的TabHost布局实现，原理很简单，在MainActivity的布局文件里添加如下代码即可：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <!-- 实现Tab标签的居底主要是通过设置属性 android:layout_weight="1" -->
        <!-- 还要注意FrameLayout标签的位置，要写在TabWidget标签的前面 -->

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1">

            <fragment
                android:id="@+id/j_dynamicFragment"
                android:name="com.bjcic.wkj.gui.DynamicFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/j_findFragment"
                android:name="com.bjcic.wkj.gui.FindFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/j_shareFragment"
                android:name="com.bjcic.wkj.gui.ShareFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/j_snsFragment"
                android:name="com.bjcic.wkj.gui.SnsFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/j_moreFragment"
                android:name="com.bjcic.wkj.gui.MoreFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="60dip"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="-2dp"
            android:layout_marginRight="-2dp"
            android:background="@null" />
    </LinearLayout>

</TabHost>

这里的关键是在TabHost布局中加入一个FrameLayout的布局，在FrameLayout里再加入我们定义的：动态、发现、分享、家园、更多这几个Tab选项所对应的Fragment。

下面是在MainActivity.onCreate函数里调用initGui这个函数，在这个函数里添加Tab选项：

	private void initGui() {
		tabHost = (TabHost)findViewById(android.R.id.tabhost);
    	tabHost.setup();//去掉底端的白线
        tabHost.setPadding(tabHost.getPaddingLeft(),
            	tabHost.getPaddingTop(), tabHost.getPaddingRight(),
            	tabHost.getPaddingBottom() - 3);
        TabWidget tabWidget = tabHost.getTabWidget();
        // 添加底部的Table选项
        addDynamicTab(tabHost, tabWidget);
        addFindTab(tabHost, tabWidget);
        addShareTab(tabHost, tabWidget);
        addSnsTab(tabHost, tabWidget);
        addMoreTab(tabHost, tabWidget);
        tabHost.setCurrentTab(0);
	}

对于每个具体的Tab选项，处理方式基本类似，都是找到布局文件，载入图片、写上文字，代码如下所示：

private void addDynamicTab(TabHost host,TabWidget tw) {
    	RelativeLayout indicator = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_bottom_indicator, tw, false);   
    	ImageView img = (ImageView) indicator.getChildAt(0);
        img.setBackgroundResource(R.drawable.main_bottom_tab1);
    	TextView tabText = (TextView)indicator.getChildAt(1);   
    	tabText.setText(getResources().getString(R.string.j_main_tab_dynamic));
    	tabText.setTextColor(getResources().getColor(R.color.white) );
    	TabSpec tabSpec = host.newTabSpec(MAIN_TAB_DYNAMIC);
    	tabSpec.setIndicator(indicator);
    	tabSpec.setContent(R.id.j_dynamicFragment);
        host.addTab(tabSpec);
        
    }

这里只给出了动态Tab的代码，其他的类似，大家可以举一反三。

对于每个Tab的外观定义，由下面的布局文件来规定：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="0dip"  
    android:layout_height="fill_parent"
    android:layout_weight="1"  
    android:orientation="vertical"  
    android:background="@drawable/tab_bottom_selector"
    android:paddingTop="6dip"
    android:paddingBottom="4dip"
    android:gravity="center_horizontal">  
    
    <ImageView android:id="@+id/icon"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"   
        android:layout_alignParentTop="true"
    />  
    <TextView android:id="@+id/title"   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"
        android:textSize="14sp" 
        android:textColor="@color/black" />  

</RelativeLayout>

大家可以看到，主要就是一个图片和一个标题。

至此一个虽然简单，但是却包含了基本应用的框架就正式做好了，下图是程序运行效果图：