Android控件之TabHost
今天搞了半天的TabHost一直搞不出来，知道在网上看到别人的例子。慢慢懂了一点。
下面写一个自己的demo：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="@+id/f1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="table的内容" />
</LinearLayout>
<LinearLayout
android:id="@+id/f2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2的内容" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="@+id/f3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab3的内容" />
</LinearLayout>
</FrameLayout>
这个类继承的时TabActivity类。
在onCreate()中不能设置setContentView，用的是Inflater绑定的布局。
在每个TabHost控件中必须都包含FrameLayout、TabWidget子控件。
package com.xplus.tabactivitydemo;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
public class MainActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
TabHost tabhost = getTabHost();
// 使用TabHost布局
LayoutInflater.from(this).inflate(R.layout.main,
tabhost.getTabContentView(), true);
// 设置布局的背景颜色
tabhost.setBackgroundColor(Color.argb(150, 22, 50, 70));
// 声明一个可复用的TabSpace
TabSpec tabspace;
// 添加第一个标签页
// tabhost.addTab(tabhost.newTabSpec("tab01").setIndicator("tabtitle1").setContent(R.id.tab1));
tabspace = tabhost.newTabSpec("tab1").setIndicator("TABTITLE1")
.setContent(R.id.f1);
tabhost.addTab(tabspace);
// 添加第二个标签页
// tabhost.addTab(tabhost.newTabSpec("tab01").setIndicator("tabtile2").setContent(R.id.tab2));
tabspace = tabhost.newTabSpec("tab2").setIndicator("tabtitle2")
.setContent(R.id.f2);
tabhost.addTab(tabspace);
// 添加第三个标签页
// tabhost.addTab(tabhost.newTabSpec("tab03").setIndicator("tabtitle3").setContent(R.id.tab3));
tabspace = tabhost.newTabSpec("tab3").setIndicator("tabtitle3")
.setContent(R.id.f3);
tabhost.addTab(tabspace);
// 标签切换处理事件
tabhost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String arg0) {
new AlertDialog.Builder(MainActivity.this).setTitle("标题")
.setMessage("是" + arg0).setPositiveButton("确定", null)
.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
但是我想将整个TabHost布局在xml中，直接setContentView设置布局。希望大家有知道的能告诉我。
下面写的是tabhost中每个标签代表一个Activity，即将Activity嵌入到每个Tab中。
很多应用中用到了这种方法。
首先编写一个TabHostActivity父类，继承自TabActivity：
public abstract class TabHostActivity extends TabActivity {
private TabHost mTabHost;
private TabWidget mTabWidget;
private LayoutInflater mLayoutInflater;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.api_tab_host);
mLayoutInflater=getLayoutInflater();
mTabHost=getTabHost();
mTabWidget=getTabWidget();
prepared();
initTop();
initTabSpec();
}
protected void prepared(){
}
private void initTop(){
View child=getTop();
LinearLayout linearLayout=(LinearLayout)findViewById(R.id.tab_top);
linearLayout.addView(child);
}
private void initTabSpec(){
int count=getTabItemCount();
for (int i = 0; i < count; i++) {
View tabItem = mLayoutInflater.inflate(R.layout.api_tab_item, null);
TextView tvTabItem = (TextView) tabItem.findViewById(R.id.tab_item_tv);
setTabItemTextView(tvTabItem, i);
// 设置id
String tabItemId = getTabItemId(i);
//设置spec
TabSpec tabSpec = mTabHost.newTabSpec(tabItemId);
tabSpec.setIndicator(tabItem);
tabSpec.setContent(getTabItemIntent(i));
mTabHost.addTab(tabSpec);
}
}
protected View getTop(){
return null;
}
protected int getTabCount() {
return mTabHost.getTabWidget().getTabCount();
}
//定义抽象方法
abstract protected void setTabItemTextView(TextView textView,int position);
abstract protected String getTabItemId(int position);
abstract protected Intent getTabItemIntent(int position);
abstract protected int getTabItemCount();
protected void setCurrentTab(int index){
mTabHost.setCurrentTab(index);
}
protected void focusCurrentTab(int index){
mTabWidget.focusCurrentTab(index);
}
}
用到的两个XML如下：
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/tab_top"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentTop="true">
</LinearLayout>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@android:id/tabs"
android:layout_below="@id/tab_top" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true" >
</TabWidget>
</RelativeLayout>
</TabHost>
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/tab_item_tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="@android:drawable/ic_menu_help"
android:gravity="center_horizontal" />
</LinearLayout>
其中prepared()方法在子类中实现，用于初始化Tab标签：
@Override
protected void prepared(){
// TODO Auto-generated method stub
TabItem new_goods = new TabItem(
"新品",
R.drawable.icon_new,
R.drawable.tab_item_background,
new Intent(this, New_goodsActivity.class));
TabItem classify = new TabItem(
"分类",
R.drawable.icon_classify,
R.drawable.tab_item_background,
new Intent(this, ClassifyActivity.class));
TabItem collect = new TabItem(
"收藏",
R.drawable.icon_collect,
R.drawable.tab_item_background,
new Intent(this, CollectActivity.class));
TabItem shop_address = new TabItem(
"店铺地址",
R.drawable.icon_address,
R.drawable.tab_item_background,
new Intent(this, ShopAddressActivity.class));
TabItem search = new TabItem(
"搜索",
R.drawable.icon_search,
R.drawable.tab_item_background,
new Intent(this, SearchActivity.class));
mItems = new ArrayList<TabItem>();
mItems.add(new_goods);
mItems.add(classify);
mItems.add(collect);
mItems.add(shop_address);
mItems.add(search);
// 设置分割线
TabWidget tabWidget = getTabWidget();
tabWidget.setDividerDrawable(R.drawable.tab_divider);
mLayoutInflater = getLayoutInflater();
}
initTabSpec()方法用于实例化每一个TabSpec：
setTabItemTextView(TextView textView,int position)方法是设置对应位置的TabSpec具体名称及图片。
具体实现如下：
@Override
protected void setTabItemTextView(TextView textView, int position) {
// TODO Auto-generated method stub
textView.setPadding(3, 3, 3, 3);
textView.setText(mItems.get(position).getTitle());
textView.setBackgroundResource(mItems.get(position).getBg());
textView.setCompoundDrawablesWithIntrinsicBounds(0, mItems.get(position).getIcon(), 0, 0);
}
getTabItemId(int position);获取对应的位置的TabSpec的id。
getTabItemIntent(int position);获取对应位置的Intent对象，用于跳转到相应的Activity页面。
getTabItemCount();获取TabSpec的数量。
对应方法的实现：
@Override
protected String getTabItemId(int position) {
// TODO Auto-generated method stub
return mItems.get(position).getTitle();
}
@Override
protected Intent getTabItemIntent(int position) {
// TODO Auto-generated method stub
return mItems.get(position).getIntent();
}
@Override
protected int getTabItemCount() {
// TODO Auto-generated method stub
return mItems.size();
}