Android Tab分页

 

1. TabHost常用组件

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

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

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

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

2. TabHost使用步骤

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

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

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

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

3. 将按钮放到下面

布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;

设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;

设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;

 

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android: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" >

            <!-- 定义第一个标签的内容 -->

            <LinearLayout
                android:id="@+id/tab01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="hello tab1"
                    android:textColor="#0f0"
                    android:textSize="20sp" >
                </TextView>
            </LinearLayout>

            <!-- 此处定义第二个标签页的内容 -->

            <LinearLayout
                android:id="@+id/tab02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="hello tab2"
                    android:textColor="#0f0"
                    android:textSize="20sp" >
                </TextView>
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>

</TabHost>

TabHost id 应该为 @android:id/tabhost
TabWidget id 应该为 @android:id/tabs
FrameLayout id应该为@android:id/tabcontentTabHost id 应该为 @android:id/tabhost
TabWidget id 应该为 @android:id/tabs
FrameLayout id应该为@android:id/tabcontentTabHost id 应该为 @android:id/tabhost
TabWidget id 应该为 @android:id/tabs
FrameLayout id应该为@android:id/tabcontent

 

 

package com.androiduidemo;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabHostDemo extends TabActivity {

	/******************************************
	 * .setContent(R.id.tab02)也可以是.setContent(Intent) 这样可以用来启动活动了
	 ******************************************/

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabhostdemo);

		// 获取布局页面的TabHost组件
		final TabHost tabHost = getTabHost();

		TabSpec tabSpec1 = tabHost.newTabSpec("tab1")
				.setIndicator("title:TextSwitcher").setContent(R.id.tab01);// 设置标题和内容
		tabHost.addTab(tabSpec1);

		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("title:Adapter",
				getResources().getDrawable(R.drawable.header1)));


	}
}