阅读《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>