Android测试驱动开发实践3
原创
©著作权归作者所有:来自51CTO博客作者最老程序员的原创作品,请联系作者获取转载授权,否则将追究法律责任
至此,一个基于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>
大家可以看到,主要就是一个图片和一个标题。
至此一个虽然简单,但是却包含了基本应用的框架就正式做好了,下图是程序运行效果图: