Android学习历程16-TabHost的基本用法

1. TabHost常用组件
   TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

– 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

– 添加选项卡 : addTab(tabSpec);

1. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;
3. 将按钮放到下面
布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;
设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;
设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮

---

直接附上常见用法的代码：

第一种

<FrameLayout
    android:id="@+id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/tv_transp"
    android:layout_below="@id/details"
    android:background="#C0C0C0" />


<android.support.v4.app.FragmentTabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#C0C0C0" >

    <TabWidget
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />
</android.support.v4.app.FragmentTabHost

main.Activity中的代码

FragmentTabHost tabHost = (FragmentTabHost) findViewById(R.id.tabhost);
    tabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

    tabHost.addTab(
            tabHost.newTabSpec(String.valueOf(TABS[0])).setIndicator(getLayoutInflater().inflate(TABS[0], null)),
            TimesFragment.class, null);
    tabHost.addTab(
            tabHost.newTabSpec(String.valueOf(TABS[1])).setIndicator(getLayoutInflater().inflate(TABS[1], null)),
            KChartsFragment.class, null);
    tabHost.addTab(
            tabHost.newTabSpec(String.valueOf(TABS[2])).setIndicator(getLayoutInflater().inflate(TABS[2], null)),
            GuideFragment.class, null);
    tabHost.addTab(
            tabHost.newTabSpec(String.valueOf(TABS[3])).setIndicator(getLayoutInflater().inflate(TABS[3], null)),
            AboutFragment.class, null);

第二种

布局文件代码

<LinearLayout 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"   
android:orientation="vertical"  
tools:context=".MainActivity" >  
<Button  
    android:id="@+id/button1"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:text="Button" />  
 <TabHost  
    android:id="@+id/tabhost"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content">  

    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:orientation="vertical" >  

        <TabWidget  
            android:id="@android:id/tabs"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content" >  
        </TabWidget>  

        <FrameLayout  
            android:id="@android:id/tabcontent"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent" >  

            <!-- 第一个tab的布局 -->  
            <LinearLayout  
                android:id="@+id/tab1"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent" >  

                <TextView  
                    android:id="@+id/textView1"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:text="林炳东" />  

            </LinearLayout>  

            <!-- 第二个tab的布局 -->  
            <LinearLayout  
                android:id="@+id/tab2"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent" >  

                <TextView  
                    android:id="@+id/textView2"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:text="张小媛" />  

            </LinearLayout>  

            <!-- 第三个tab的布局 -->  
            <LinearLayout  
                android:id="@+id/tab3"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent" >  

                <TextView  
                    android:id="@+id/textView3"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:text="马贝贝" />  

            </LinearLayout>  
        </FrameLayout>  
    </LinearLayout>  
</TabHost>   

</LinearLayout>  

Java代码

public class MainActivity extends Activity {  

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);  

    TabHost th=(TabHost)findViewById(R.id.tabhost);  
    th.setup();            //初始化TabHost容器  

    //在TabHost创建标签，然后设置：标题／图标／标签页布局  
    th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));  
    th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));  
    th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));      

   //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标   

}  
}