Android入門筆記之標籤佈局（Tab Layout）

Android入門筆記之標籤佈局（Tab Layout）

<1>簡介

       今天學習Tab佈局。通過標籤的切換來實現內容的切換。實現標籤佈局有多種方法。一種將所有的標籤處理程序寫在同一個Activity中，但佈局文件相對複雜；另一種將各個標籤內容各寫成一個Activity，佈局文件相對簡單。本文采用前一種方法。

 

<2>關鍵步驟

TabActivity:This class was deprecated in API level13.New applications should use Fragments instead of this class. 

TabSpec與TabHost

TabHost相當於瀏覽器中瀏覽器分佈的集合，而Tabspec則相當於瀏覽器中的每一個分頁面。在Android中，每一個TabSpec分佈可以是一個組件，也可以是一個佈局，然後將每一個分頁裝入TabHost中，TabHost即可將其中的每一個分頁一併顯示出來。

（1）繼承TabActivity：在此之前繼承的都是android.app.Activity類，但是這裏需要繼承android.app.TabActivity。

（2）創建TabHost分佈菜單對象，利用以下代碼。

LayoutInflater.from(this).inflate(R.layout.main,tableHost.getTabContentView());

（3）實例化實分頁 

佈局文件中，一個framelayout包含三個linearlayout，三個linearlayout重疊在同一位置。在MyTabActivity中實現了OnTabChangeListener接口，該接口實現對Tab改變是事件的監聽，重載實現onTabChanged(String arg0)方法，其中arg0爲對應的是實例中每個分頁傳入的分頁ID。

 

<3>出現的問題

       出現堆棧溢出的問題，即java.lang.stackoverflowerror。

       通過Logcat找到相應的代碼，找到錯誤，通常爲函數循環遞歸造成。

<4>代碼及解釋

      

 

activity_tab.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" 
    android:orientation="vertical"
    >

    
    <LinearLayout
        android:id="@+id/tab1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tabtext1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1" />

    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/tab2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

    <TextView
            android:id="@+id/tabtext2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2" />

    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/tab3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tabtext3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" />

    </LinearLayout>

</FrameLayout>

 MyTabActivity.java:

package com.ui.tab;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;

import com.test.R;

public class MyTabActivity extends TabActivity implements OnTabChangeListener{

	/**   
	 * @ProjectName:  [androidtest] 
	 * @Package:      [com.ui.tab.TabActivity.java]  
	 * @ClassName:    [TabActivity]   
	 * @Description:    
	 * @Author:       [gmj]   
	 * @CreateDate:   [2013-8-30 下午2:39:50]   
	 * @Version:      [v1.0] 
	 */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);		
		TabHost tabhost = this.getTabHost();
		LayoutInflater.from(this).inflate(R.layout.activity_tab, tabhost.getTabContentView() , true);
		TabSpec tabA = tabhost.newTabSpec("A").setIndicator("AAA" , this.getResources().getDrawable(R.drawable.img1)).setContent(R.id.tab1);
		tabhost.addTab(tabA);
		TabSpec tabB = tabhost.newTabSpec("B").setIndicator("BBB" , this.getResources().getDrawable(R.drawable.img2)).setContent(R.id.tab2);
		tabhost.addTab(tabB);		
		TabSpec tabC = tabhost.newTabSpec("C").setIndicator("CCC" , this.getResources().getDrawable(R.drawable.img3)).setContent(R.id.tab3);
		tabhost.addTab(tabC);
		tabhost.setOnTabChangedListener(this);
		onTabChanged("A");//預先設置爲A分頁
	}
	
	@Override
	public void onTabChanged(String arg0) {
		// TODO Auto-generated method stub
		if(arg0.equals("A")){
			TextView tv = (TextView)findViewById(R.id.tabtext1);
			tv.setText("123456");
		}
		if(arg0.equals("B")){
			TextView tv2 = (TextView)findViewById(R.id.tabtext2);
			tv2.setText("abcdef");
		}
		if(arg0.equals("C")){
			TextView tv3 = (TextView)findViewById(R.id.tabtext3);
			tv3.setText("ghjkl");
		}
	}
}