使用TabHost和FrameLayout实现导航

android的官方Api上面已经明确标出TabActivitywas deprecated in API 13,被弃用.但是TabHost这个组件还是大有可为,是一个很好的UI框架.TabHost结合FrameLayout就可以实现导航

java代码:

MyTabHost

<span style="font-size:18px;">package com.example.tabhost;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TabWidget;

public class MyTabHost extends Activity {
	private TabHost tabHost;
	private TabWidget tabWidget;
	private View guid_image1,guid_image2,guid_image3,guid_image4;
	@SuppressLint("InflateParams")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab_host);
		// 获取tabHost,  tabHost是个容器组件
		tabHost = (TabHost)findViewById(R.id.tableH);
		 // 类似于初始化过程，不调用无法获取到tabWiget,调用addTab需要tabwiget。TabActivity内部已经调用了
		tabHost.setup();		
		guid_image1 = (View)LayoutInflater.from(this).inflate(R.layout.guide_image1, null);
		guid_image2 = (View)LayoutInflater.from(this).inflate(R.layout.guide_image2, null);
		TabSpec spec1 = tabHost.newTabSpec("tab1").setIndicator(guid_image1).setContent(R.id.content1);
		TabSpec spec2 = tabHost.newTabSpec("tab2").setIndicator(guid_image2).setContent(R.id.content2);
		tabHost.addTab(spec1);
		tabHost.addTab(spec2);
		tabWidget = tabHost.getTabWidget();
		// tabHost.getTabWidget();   这一步很重要，没有上一步，必须这一步
		tabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				// TODO Auto-generated method stub
				
			}
		});
	}
}</span>

主布局文件:

activity_tab_host

<span style="font-size:18px;"><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"
     >
	<TabHost 
	    android:id="@+id/tableH"
	    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"
	        	/>
	      	<FrameLayout 
             	android:id="@android:id/tabcontent"
             	android:layout_width="match_parent"
            	android:layout_height="0dp"
             	android:layout_weight="1"      //这个权重极重要~~ 不然显示不出相应tab的内容
             	>  
             	<TextView 
     			    android:id="@+id/content1"
     			    android:layout_width="match_parent"
     			    android:layout_height="wrap_content"
     			    android:text="消息1"
     			    />
             	<TextView 
     			    android:id="@+id/content2"
     			    android:layout_width="match_parent"
     			    android:layout_height="wrap_content"
     			    android:text="消息2"
     			    />
         <span style="white-space: pre;">	</span></FrameLayout>
	    </LinearLayout>
	</TabHost>
</LinearLayout></span>

布局文件1:

guide_image1

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
     >
    <TextView
        android:id="@+id/guide1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="~!!~!~!!~!~!"
        android:textSize="25sp" >
    </TextView>
</LinearLayout></span>

布局文件2:

guide_image2

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
     >
    <TextView
        android:id="@+id/guide2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="~!!~!~!!~!~!"
        android:textSize="25sp" >
    </TextView>

</LinearLayout></span><span style="font-size:24px;">
</span>

效果: