Tab选项卡是一个非常方便的组件。
一.使用Tab组件的步骤:
1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件
2.Activity要继承TabActivity
3.调用TabActivity的getTabHost( )方法来获得TabHost对象
4.通过TabHost创建Tab选项
二.实现不同Tab里面的内容有两种方式:
1.切换不同的Tab时候,不同Tab里面的内容在同一个Activity显示,主要是通过修改布局文件里面的id来实现的。下面是一个具体的例子:
MainActivity.java
- package com.android.tab.activity;
- import android.app.TabActivity;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.widget.TabHost;
- public class MainActivity extends TabActivity {
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- //获得TabHost对象
- TabHost tah = getTabHost();
- // from(this)从TabActivity获取LayoutInflater
- // R.layout.main 存放Tab布局
- // 通过TabHost获得存放Tab标签页内容的FrameLayout
- // 是否将inflate 加到根布局元素上
- LayoutInflater.from(this).inflate(R.layout.main, tah.getTabContentView(), true);
- //设置Tab标签的内容和显示内容
- tah.addTab(tah.newTabSpec("tab1").setIndicator("图片1").setContent(R.id.TextView01));
- tah.addTab(tah.newTabSpec("tab2").setIndicator("图片2").setContent(R.id.TextView02));
- tah.addTab(tah.newTabSpec("tab3").setIndicator("图片3").setContent(R.id.TextView03));
- }
- }
main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/FrameLayout01"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- >
- <TabHost
- android:id="@+id/TabHost01"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <TextView
- android:id="@+id/TextView01"
- android:background="@drawable/pic1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <TextView
- android:id="@+id/TextView02"
- android:background="@drawable/pic2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <TextView
- android:id="@+id/TextView03"
- android:background="@drawable/pic3"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- </FrameLayout>
效果图:
1.切换不同的Tab时候,不同Tab里面的内容在不同的Activity显示
先创建三个类FirstActivity.java,SecondActivity.java,ThirdActivity.java,都是继承Activity
FirstActivity.java
- package com.android.tabtest.activity;
- import android.app.Activity;
- import android.os.Bundle;
- import android.widget.TextView;
- public class FirstActivity extends Activity {
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- TextView textview = new TextView(this);
- textview.setText("这是Tab1");
- setContentView(textview);
- }
- }
SecondActivity.java
- package com.android.tabtest.activity;
- import android.app.Activity;
- import android.os.Bundle;
- import android.widget.TextView;
- public class SecondActivity extends Activity {
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- TextView textview = new TextView(this);
- textview.setText("这是Tab2");
- setContentView(textview);
- }
- }
ThirdActivity.java
- package com.android.tabtest.activity;
- import android.app.Activity;
- import android.os.Bundle;
- import android.widget.TextView;
- public class ThirdActivity extends Activity {
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- TextView textview = new TextView(this);
- textview.setText("这是Tab3");
- setContentView(textview);
- }
- }
在layout文件夹中对main.xml进行修改
- <?xml version="1.0" encoding="utf-8"?>
- <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
- android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <TabWidget
- android:id="@android:id/tabs"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- />
- <FrameLayout
- android:id="@android:id/tabcontent"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:padding="5dp"
- />
- </LinearLayout>
- </TabHost>
新建一个测试Tab的类TabDemo.java,继承于TabActivity类
- package com.android.tabtest.activity;
- import android.app.TabActivity;
- import android.content.Intent;
- import android.content.res.Resources;
- import android.os.Bundle;
- import android.widget.TabHost;
- import android.widget.TabHost.TabSpec;
- public class TabDemo extends TabActivity {
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);//这里使用了上面创建的xml文件(Tab页面的布局)
- Resources res = getResources(); // Resource object to get Drawables
- TabHost tabHost = getTabHost(); // The activity TabHost
- TabSpec spec;
- Intent intent; // Reusable Intent for each tab
- //第一个Tab
- intent = new Intent(this,FirstActivity.class);//新建一个Intent用作Tab1显示的内容
- spec = tabHost.newTabSpec("tab1")//新建一个 Tab
- .setIndicator("Tab1", res.getDrawable(android.R.drawable.ic_media_play))//设置名称以及图标
- .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx
- tabHost.addTab(spec);//添加进tabHost
- //第二个Tab
- intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容
- spec = tabHost.newTabSpec("tab2")//新建一个 Tab
- .setIndicator("Tab2", res.getDrawable(android.R.drawable.ic_menu_edit))//设置名称以及图标
- .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx
- tabHost.addTab(spec);//添加进tabHost
- //第三个Tab
- intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容
- spec = tabHost.newTabSpec("tab2")//新建一个 Tab
- .setIndicator("Tab3", res.getDrawable(android.R.drawable.ic_menu_help))//设置名称以及图标
- .setContent(intent);//设置显示的intent,这里的参数也可以是R.id.xxx
- tabHost.addTab(spec);//添加进tabHost
- tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1
- }
- }
在AndroidManifest.xml里加入9~29行的声明代码
- <?xml version="1.0" encoding="utf-8"?>
- <manifest xmlns:android="http://schemas.android.com/apk/res/android"
- package="com.android.tabtest.activity"
- android:versionCode="1"
- android:versionName="1.0">
- <uses-sdk android:minSdkVersion="10" />
- <application android:icon="@drawable/icon" android:label="@string/app_name">
- <activity android:name=".TabDemo"
- android:label="@string/app_name">
- <intent-filter>
- <action android:name="android.intent.action.MAIN" />
- <category android:name="android.intent.category.LAUNCHER" />
- </intent-filter>
- </activity>
- <activity android:name=".FirstActivity"
- android:label="@string/app_name">
- <intent-filter>
- <action android:name="android.intent.action.MAIN" />
- <category android:name="android.intent.category.LAUNCHER" />
- </intent-filter>
- </activity>
- <activity android:name=".SecondActivity"
- android:label="@string/app_name">
- <intent-filter>
- <action android:name="android.intent.action.MAIN" />
- <category android:name="android.intent.category.LAUNCHER" />
- </intent-filter>
- </activity>
- </application>
- </manifest>
效果图:
本文转自 lingdududu 51CTO博客,原文链接:
http://blog.51cto.com/liangruijun/643043