阅读《Android 从入门到精通》（25）——标签切换

标签切换（Tab）

java.lang.Object;
android.view.View;
android.widget.ViewGroup;
android.widget.FrameLayout;

Tab 示例

完整工程：http://download.csdn.net/detail/sweetloveft/9431225

使用的 AndroidManifest.xml 基本相同，以后省略，除非牵涉到权限特性方面

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sweetlover.tabdemo1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name="com.sweetlover.activity.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

使用 TabActivity，静态布局

1.MainActivity.java

package com.sweetlover.activity;

import com.sweetlover.tabdemo1.R;

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

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);

		// 得到TabActivity中的TabHost对象
		TabHost tabHost = getTabHost();

		// 内容：采用布局文件中的布局
		LayoutInflater.from(this).inflate(R.layout.activity_main,
				tabHost.getTabContentView(), true);

		// 加上标签
		// 参数设置：新增的TabSpec的标签，标签中显示的字样
		// setContent设置内容对应的View资源标号
		tabHost.addTab(tabHost.newTabSpec("tab1")
				.setIndicator("tab1").setContent(R.id.view1));
		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2")
				.setContent(R.id.view2));
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
				.setContent(R.id.view3));
	}
}

2.activity_main.xml

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

    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tab1" />

    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"

        android:text="@string/tab2" />

    <TextView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/green"
        android:text="@string/tab3" />

</FrameLayout>

使用 TabActivity 并实现 TabContentFactory，动态布局

1.MainActivity.java

package com.sweetlover.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;
import android.app.TabActivity;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity implements
		TabHost.TabContentFactory {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);

		// 得到TabActivity中的TabHost对象
		TabHost tabHost = getTabHost();

		// 动态布局
		tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1")
				.setContent(this));
		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2")
				.setContent(this));
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
				.setContent(this));
	}

	@Override
	public View createTabContent(String tag) {
		// TODO Auto-generated method stub
		final TextView tv = new TextView(this);
		tv.setText("Content for tab with tag " + tag);
		return tv;
	}
}

使用 TabHost，静态布局

1.MainActivity.java

package com.sweetlover.activity;

import com.sweetlover.tabdemo3.R;

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

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 得到TabActivity中的TabHost对象
		TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);

		tabHost.setup();

		// 加上标签
		// 参数设置：新增的TabSpec的标签，标签中显示的字样
		// setContent设置内容对应的View资源标号
		tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1")
				.setContent(R.id.view1));
		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2")
				.setContent(R.id.view2));
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
				.setContent(R.id.view3));
	}
}

2.activity_main.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tittle" />

    <!-- TabHost必须包含一个 TabWidget和一个FrameLayout -->

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

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <!-- TabWidget的id属性必须为 @android:id/tabs -->

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:orientation="horizontal" />

            <!-- FrameLayout的id属性必须为 @android:id/tabcontent -->

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0" >

                <TextView
                    android:id="@+id/view1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/tab1" />

                <TextView
                    android:id="@+id/view2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/tab2" />

                <TextView
                    android:id="@+id/view3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/tab3" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

多个 Tab 的滚动条切换方法

1.MainActivity.java

package com.sweetlover.activity;

import com.sweetlover.tabdemo4.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class MainActivity extends Activity implements TabHost.TabContentFactory {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 得到TabActivity中的TabHost对象
		TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);
		tabHost.setup();

		// 加上标签
		for (int i = 1; i <= 30; i++) {
			String name = "Tab " + i;
			tabHost.addTab(tabHost.newTabSpec(name).setIndicator(name)
					.setContent(this));
		}
	}

	@Override
	public View createTabContent(String tag) {
		// TODO Auto-generated method stub
		final TextView tv = new TextView(this);
		tv.setText("Content for tab with tag " + tag);
		return tv;
	}
}

2.activity_main.xml

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp" >

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="none" >

                <TabWidget

                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </HorizontalScrollView>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="5dp" />
        </LinearLayout>
    </TabHost>

</LinearLayout>