玩转Android的Tab布局 - 初段

Tab布局是手机应用中常见的布局方式之一。利用tab，将相对窄小的手机屏幕在视觉上扩张出几倍大，且留下吸引用户点击的线索，的确是个经典的设计（比PC上经典！）。Android上，一般的Tab布局像这个样子——

实现Tab的做法很简单。Layout代码如下——

<!--l version="1.0" encoding="utf-8-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:id="@+id/tv1" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="@+id/tv2" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="@+id/tv3" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="@+id/tv4" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</FrameLayout>
</TabHost>
</LinearLayout>

灰色字体部分不用太关心，它的作用是在布局里面放几个TextView，当点击tab时，在界面上呈现出对应的一个。TextView的话题留到以后再谈。继续说tab。Java代码——

package com.ghstudio.samples;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class tabActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setupTabs();
}

private void setupTabs(){
TabHost mTabHost = getTabHost();
mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(
"Tab 1").setContent(R.id.list_1));
mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(
"Tab 2").setContent(R.id.list_2));
mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(
"Tab 3").setContent(
R.id.list_3));
mTabHost.addTab(mTabHost.newTabSpec("tab_4").setIndicator(
"Tab 4").setContent(
R.id.list_4));
}

}

setupTabs()方法简单地向TabHost上添加了4个tab，请记住第一个tab上的文字是tab_1。对于初学者，在使用addTab增加tab后，就只能听之任之，无法在运行时加以修改。不过，那也太死板了。让我们稍微深入一点，在运行时修改tab的呈现吧！

应用场景：点击某个tab时，不但切换到相应的tab，而且该被选中tab上的文字变为“Hello !”，字体颜色为红色，而其他非选中tab上的文字变为“Bye!”，字体颜色为白色。

背景知识：首先你要了解布局xml文件里面的层次。可以看到TabHost下面，有一个LinearLayout，再下一层是用来呈现4个tab的TabWidget。与这个LinearLayout同级的是一个FrameLayout，下面是四个TextView。啰哩吧嗦这一堆，无非就是想说明，要玩转TabHost，必须找到这个TabWidget，而布局文件提供了找到它的层级线索。

背景知识二：TabWidget是一个封装的widget，里面还有乾坤。看了后面的代码，你就知道，TabWidget里面有个RelativeLayout，然后是两个同级的View：一个ImageView，用来放图标；一个TextView，用来显示文字。我们要做的，就是找到这个TextView，然后在代码中修改它的属性。

好，代码来了——

package com.ghstudio.samples;

import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;

public class tabActivity extends TabActivity {

TabHost mTabHost;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setupTabs();
}

private void setupTabs(){

mTabHost = getTabHost();

mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(
"Tab 1").setContent(R.id.tv1));
mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(
"Tab 2").setContent(R.id.tv2));
mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(
"Tab 3").setContent(
R.id.tv3));
mTabHost.addTab(mTabHost.newTabSpec("tab_4").setIndicator(
"Tab 4").setContent(
R.id.tv4));

mTabHost.setOnTabChangedListener(new OnTabChangeListener() {

@Override
public void onTabChanged(String tabTag) { // tab选中状态变更时

int tabId = mTabHost.getCurrentTab();
changeTab(tabId);
}
});
}

private void changeTab(int tabId){
LinearLayout ll=(LinearLayout)mTabHost.getChildAt(0);
TabWidget tw=(TabWidget)ll.getChildAt(0);
// 以上两行代码，找到TabWidget

int tabCount=tw.getChildCount();

for (int i=0;i RelativeLayout rl=(RelativeLayout)tw.getChildAt(i);
TextView tv=(TextView)rl.getChildAt(1);
// 以上两行代码，找到要修改属性的TextView

String tabLabel="Bye!";
int color=Color.WHITE;

if (i==tabId){ // 如果是选定tab，则修改之
tabLabel="Hello!";
color=Color.RED;
}

tv.setText(tabLabel);
tv.setTextColor(color);
//以上两行代码，修改TextView的属性

}
}
}

运行截图——

当然你还可以继续玩TabHost。了解层级关系，并且逐层得到各种view后，要怎么玩，还不是你说了算。比如，修改每个tab（实际上就是一个RelativeLayout）的背景图片（用setBackground方法），或者做其它事。关于TabHost，以后我还会继续给出更深入的玩法，这篇文章，就算个开始吧。