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" >   <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选项，处理方式基本类似，都是找到布局文件，载入图片、写上文字，代码如下所示：

privatevoidaddDynamicTab(TabHosthost，TabWidgettw){ RelativeLayoutindicator=(RelativeLayout)LayoutInflater.from(this).inflate(R.layout.tab_bottom_indicator，tw，false); ImageViewimg=(ImageView)indicator.getChildAt(0); img.setBackgroundResource(R.drawable.main_bottom_tab1); TextViewtabText=(TextView)indicator.getChildAt(1); tabText.setText(getResources().getString(R.string.j_main_tab_dynamic)); tabText.setTextColor(getResources().getColor(R.color.white)); TabSpectabSpec=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>

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

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