Android -- TabHost
控件TabHost的功能和web技术中的“选项卡”控件显示的效果一样。都是用最小的空间显示更多的数据。下面直接通过例子看Tabhost的用法。
示例1：通过继承TabActivity实现
布局文件：
<!-- 布局必须为FrameLayout -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- 定义一个LinearLayout,用于显示第个Tab页的内容，每个LinearLayout代表一页的内容 -->
<LinearLayout
android:id="@+id/tab1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一页"
/>
</LinearLayout>
<!-- 定义第二个个LinearLayout,用于显示第个Tab页的内容 -->
<LinearLayout
android:id="@+id/tab2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二页"
/>
</LinearLayout>
</FrameLayout>
MainActivity.java内容：
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//获取TabHost的引用
TabHost tabHost = getTabHost();
//获取视图，并
LayoutInflater.from(this).inflate(R.layout.activity_main,
tabHost.getTabContentView(), true);
//添加Tab也的内容。
tabHost.addTab(tabHost
.newTabSpec("tab1")//设置Tab页的标示
.setIndicator("导航一",//设置标题
getResources().getDrawable(R.drawable.ic_launcher))//设置标题图片，也可以不写
.setContent(R.id.tab1));//设置Tab内容
tabHost.addTab(tabHost
.newTabSpec("tab2")
.setIndicator("导航二",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(R.id.tab2));
}
}
运行结果如图：
示例2：
MainActivity.java:
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//获取TabHost的引用
TabHost tabHost = getTabHost();
//为Tab添加内容
tabHost.addTab(tabHost
.newTabSpec("tab1")
.setIndicator("导航一",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(new Intent(this, Act2.class)));//与示例1不同。这里直接添加Intent的引用
tabHost.addTab(tabHost
.newTabSpec("tab2")
.setIndicator("导航二",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(new Intent(this, Act3.class)));
}
}
注：这个方法要另建两个Activity及相应的xml文件。每一个Activity既为每个Tab页的内容。在此代码就不在给出。运行结果和示例1完全相同。
示例3：自定义TabHost
main.xml:
<!-- 直接引用系统提供的Tabhost组件即可 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabHost
android1:id="@+id/tabhost"
android1:layout_width="match_parent"
android1:layout_height="match_parent"
android1:layout_alignParentLeft="true"
android1:layout_alignParentTop="true" >
<LinearLayout
android1:layout_width="match_parent"
android1:layout_height="match_parent"
android1:orientation="vertical" >
<TabWidget
android1:id="@android:id/tabs"
android1:layout_width="match_parent"
android1:layout_height="80dp" >
</TabWidget>
<FrameLayout
android1:id="@android:id/tabcontent"
android1:layout_width="match_parent"
android1:layout_height="match_parent" >
<LinearLayout
android1:id="@+id/tab1"
android1:layout_width="match_parent"
android1:layout_height="match_parent"
android1:orientation="vertical" >
<TextView
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:text="第一页" />
</LinearLayout>
<LinearLayout
android1:id="@+id/tab2"
android1:orientation="vertical"
android1:layout_width="match_parent"
android1:layout_height="match_parent" >
<TextView
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:text="第二页" />
</LinearLayout>
<LinearLayout
android1:id="@+id/tab3"
android1:orientation="vertical"
android1:layout_width="match_parent"
android1:layout_height="match_parent" >
<TextView
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:text="第三页" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
另外还要定义一个cell.xml:
<?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:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
接下来是MainActivity：
public class MainActivity extends Activity {
private TabWidget tabWidget;
private TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取Tabhost控件
tabHost=(TabHost)findViewById(R.id.tabhost);
//初始化
tabHost.setup();
//tabWidget=tabHost.getTabWidget();
//创建tab页内容
TabSpec spec1=tabHost.newTabSpec("tab1");
//通过自定义的函数创建标题。
spec1.setIndicator(CreatTabView(tabHost,"导航1",R.drawable.ic_launcher));
spec1.setContent(R.id.tab1);
tabHost.addTab(spec1);
TabSpec spec2=tabHost.newTabSpec("tab2");
spec2.setIndicator(CreatTabView(tabHost,"导航2",R.drawable.ic_launcher));
spec2.setContent(R.id.tab2);
tabHost.addTab(spec2);
TabSpec spec3=tabHost.newTabSpec("tab3");
spec3.setIndicator(CreatTabView(tabHost,"导航3",R.drawable.ic_launcher));
spec3.setContent(R.id.tab3);
tabHost.addTab(spec3);
/*showSpec();
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
showSpec();
}
}); */
}
/*public void showSpec() {
for (int i = 0; i < tabWidget.getChildCount(); i++) {
// 获得当前的视图对象
View v = tabWidget.getChildAt(i);
// 判断当前点击的视图对象是否与得到的视图对象相同
if (tabHost.getCurrentTab() == i) {
v.setBackgroundResource(R.drawable.ic_blue);
} else {
v.setBackgroundResource(R.drawable.ic_green);
}
}
}*/
/**
* 自定义tab显示样式（图片加文字）
*/
public View CreatTabView(TabHost tabHost,String tabtitle,int tabID){
//获取视图的引用
View tabview=LayoutInflater.from(this).inflate(R.layout.cell, null);
//设置组件内容
TextView tv=(TextView)tabview.findViewById(R.id.textView1);
tv.setText(tabtitle);
ImageView iv=(ImageView)tabview.findViewById(R.id.imageView1);
iv.setBackgroundResource(tabID);
//返回一个视图
return tabview;
}
}
运行结果如下图所示，点击效果不明显。明显不是我所需要的结果。将注释部分放开后，显示效果如右图，这时需要我们添加点击效果。
