Android入门笔记之标签布局（Tab Layout）

原創

Des_Tiny

2020-02-22 05:08

<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");
		}
	}
}