Android TabHost Tutorial

Android TabHost Tutorial

转自： http://www.androidpeople.com/android-tabhost-tutorial-part-1

Here we are going to see about simple tabhost example. To use TabHost in android we need to extends the main class with TabActivity.
To display a Tab Bar, we need 3 things.

• TabHost ( main container of tab view )
• TabWidget ( used to navigate between tabs )
• FrameLayout ( for tab content )

Files Used:-

• TabBarExample.java ( A simple TabHost contains 2 tabs )
• FirstTab.java ( first tab bar content )
• SecondTab.java ( second tab bar content )
• tab.xml ( tabhost design in xml file )

The output will looks similar to

tab.xml

[sourcecode language="xml"]
<?xml version="1.0" encoding="utf-8"?>

<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost">
<LinearLayout android:id="@+id/LinearLayout01"
android:orientation="vertical" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
</LinearLayout>

</TabHost>

[/sourcecode]

TabBarExample.java

This is main activity class this should extends with TabActivity to use TabHost.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class TabBarExample extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab);

/** TabHost will have Tabs */
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

/** TabSpec used to create a new tab.
* By using TabSpec only we can able to setContent to the tab.
* By using TabSpec setIndicator() we can set name to tab. */

/** tid1 is firstTabSpec Id. Its used to access outside. */
TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
TabSpec secondTabSpec = tabHost.newTabSpec("tid1");

/** TabSpec setIndicator() is used to set name for the tab. */
/** TabSpec setContent() is used to set content for a particular tab. */
firstTabSpec.setIndicator("First Tab Name").setContent(new Intent(this,FirstTab.class));
secondTabSpec.setIndicator("Second Tab Name").setContent(new Intent(this,SecondTab.class));

/** Add tabSpec to the TabHost to display. */
tabHost.addTab(firstTabSpec);
tabHost.addTab(secondTabSpec);

}
}
[/sourcecode]

FirstTab.java

This class contains content for First Tab.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class FirstTab extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

/* First Tab Content */
TextView textView = new TextView(this);
textView.setText("First Tab");
setContentView(textView);

}
}
[/sourcecode]

SecondTab.java

This class contains content for Second Tab.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class SecondTab extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

/* Second Tab Content */
TextView textView = new TextView(this);
textView.setText("Second Tab");
setContentView(textView);

}
}
[/sourcecode]

AndroidManifest.xml

You need to add the below lines in your AndroidManifest.xml inside the application tag.

[sourcecode language="xml"]
<activity android:name=".FirstTab" />
<activity android:name=".SecondTab" />
[/sourcecode]

That's it :)

You can download the full source code from here