TabHost详细解析

最新推荐文章于 2018-05-24 16:31:41 发布

原创最新推荐文章于 2018-05-24 16:31:41 发布 · 355 阅读

CC 4.0 BY-SA版权

文章标签：

参考博文：http://blog.youkuaiyun.com/harvic880925/article/details/17120325
TabHost的实现分为两种，一种是继承TabActivity，一种是不继承TabActivity的，继承自TabActivity的话就相对容易一些，下面具体分类学习一下。
第一种：定义tabhost，不继承TabActivity
XML文件，取名为main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/hometabs"
    android:orientation="vertical"
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">

    <!-- TabHost必须包含一个 TabWidget和一个FrameLayout--> 
    <TabHost android:id="@+id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <!-- TabWidget的id属性必须为 @android:id/tabs-->          
            <TabWidget android:id="@android:id/tabs" 
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content">
            </TabWidget>
            <!-- FrameLayout的id属性必须为 @android:id/tabcontent-->
             <FrameLayout android:id="@android:id/tabcontent"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent">
                    <TextView android:id="@+id/view1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="one"
                        android:gravity="center"/>
                    <TextView android:id="@+id/view2"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="two"
                        android:gravity="center_vertical|center_horizontal"/>
                    <TextView android:id="@+id/view3"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="three"
                        android:gravity="center_vertical|center_horizontal"/>
             </FrameLayout>

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

JAVA代码

package com.example.tabhost;  

import android.app.Activity;  
import android.os.Bundle;  
import android.widget.TabHost;  
import android.widget.TabWidget;  

public class MainActivity extends Activity {  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
        // 获取TabHost对象  
        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);  
        // 如果没有继承TabActivity时，通过该种方法加载启动tabHost  
        tabHost.setup();  
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("第一个标签",  
                getResources().getDrawable(R.drawable.ic_launcher)).setContent(  
                R.id.view1));  

        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("第三个标签")  
                .setContent(R.id.view3));  

        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("第二个标签")  
                .setContent(R.id.view2));  
    }  
}

以上代码已经亲测可以运行，就是实现了最简单的tabhost。

第二种：Tab的内容分开，不用继承TabActivity
tab1.xml

<?xml version="1.0" encoding="UTF-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
       android:id="@+id/LinearLayout01"   
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content">  
       <TextView   
            android:text="我是标签1的内容喔"  
            android:id="@+id/TextView01"   
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content">  
       </TextView>  
 </LinearLayout>

tab2.xml

<?xml version="1.0" encoding="UTF-8"?>  
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  
        android:id="@+id/LinearLayout02"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content">  

        <TextView android:text="标签2"  
                  android:id="@+id/TextView01"   
                  android:layout_width="wrap_content"  
                  android:layout_height="wrap_content" />  
</LinearLayout>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical" >  

    <TabHost  
        android:id="@+id/tabhost"           
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  

        <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" >  

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

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {  

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

        TabHost m = (TabHost)findViewById(R.id.tabhost);  
        m.setup();  

        LayoutInflater i=LayoutInflater.from(this);  
        i.inflate(R.layout.tab1, m.getTabContentView());  
        i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML，而不需要Activity  

        m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));    
            m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));   

    }  
}

已经亲测可运行

第三种：继承自TabActivity
main.xml

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">  

    <!-- 第一个布局 -->  
    <LinearLayout     
        android:id="@+id/view1"  
        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>  

    <!-- 第二个布局 -->  
    <LinearLayout     
        android:id="@+id/view2"  
        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>  

    <!-- 第三个布局 -->  
    <TextView android:id="@+id/view3"   
        android:background="#00ff00"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:text="Tab3"/>  

</FrameLayout>

Java代码

public class MainActivity extends TabActivity {  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setTitle("TabDemoActivity");  
        TabHost tabHost = getTabHost();  
        LayoutInflater.from(this).inflate(R.layout.activity_main,  
                tabHost.getTabContentView(), true);  
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))  
                .setContent(R.id.view1));  
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")  
                .setContent(R.id.view2));  
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")  
                .setContent(R.id.view3));  


         //标签切换事件处理，setOnTabChangedListener  
        tabHost.setOnTabChangedListener(new OnTabChangeListener(){    
            @Override  
            public void onTabChanged(String tabId) {  
                if (tabId.equals("tab1")) {   //第一个标签  
                }  
                if (tabId.equals("tab2")) {   //第二个标签  
                }  
                if (tabId.equals("tab3")) {   //第三个标签  
                }  
            }              
        });   


    }  

}