5.1 Android Basic QuickStart Layouts Tab Layout

TabLayout 选项卡布局

创建一个Tab用户界面,你需要使用一个TabHost和TabWidget。这个TabHost必须在根节点布置,包含了TabWidget显示制表符和FrameLayout标签显示的内容。

新建项目 HelloTabWidget。

首先在项目中创建3个Activity类：ArtistsActivity,AlbumsActivity和SongsActivity，使用TextView显示一条简单的信息。
package com.helloview.layout;

import android.app.Activity;

import android.os.Bundle;

import android.widget.*;

public class ArtistsActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

TextView textview = new TextView(this);

textview.setText("This is the Artists tab");

setContentView(textview);

}

}

AndroidManifest.xml中添加配置

<activity android:name=".AlbumsActivity" android:label="AlbumsActivity输出"></activity>

<activity android:name=".ArtistsActivity" android:label="ArtistsActivity输出"></activity>

<activity android:name=".SongsActivity" android:label="SongsActivity输出"></activity>

</application>

3. 还需要为每个tab准备2个icon图标，一个用于正常显示，一个用于选中状态。一般选中的icon是黑色的，不选中的是白色。





现在创建state-list drawable为每个选项卡指定图像。

保存icon 图像到 res/drawable 目录

在res/drawable 目录创建ic_tab_artists.xml文件：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- when selected use grey-->

<item android:drawable="@drawable/ic_tab_artists_grey"

android:state_selected="true"/>

<!-- when no selected-->

<item android:drawable="@drawable/ic_tab_artists_white"/>

</selector>

4. 打开 res/layout/main.xml文件，用下面内容替换:

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<LinearLayout

android:orientation="vertical"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:padding="5dp">

<TabWidget

android:id="@android:id/tabs"

android:layout_height="fill_parent"

android:layout_width="wrap_content"

/>

<FrameWidget

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="5dp" />

</LinearLayout>

</TabHost>

5. 打开 HeloTabWidget.java 确定他继承自TabActivity

public class HelloTabWidget extends TabActivity {

6. 使用下面的代码在onCreate()方法

public class HelloTabWidget extends TabActivity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

setContentView(R.layout.main);

Resources res = getResources(); // Resource object to get Drawables

TabHost tabHost = getTabHost(); // The activity TabHost

TabHost.TabSpec spec; // Resusable TabSpec for each tab

Intent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)

intent = new Intent().setClass(this, ArtistsActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost

spec = tabHost.newTabSpec("artists").setIndicator("Artists",res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);

tabHost.addTab(spec);

// Do the same for the other tabs

intent = new Intent().setClass(this, AlbumsActivity.class);

spec = tabHost.newTabSpec("albums").setIndicator("Albums",

res.getDrawable(R.drawable.ic_tab_artists))

.setContent(intent);

tabHost.addTab(spec);

intent = new Intent().setClass(this, SongsActivity.class);

spec = tabHost.newTabSpec("songs").setIndicator("Songs",

res.getDrawable(R.drawable.ic_tab_artists))

.setContent(intent);

tabHost.addTab(spec);

tabHost.setCurrentTab(2);

}

}

7. 去除标题拦

<activity android:name=".HelloTabWidget"

android:label="@string/app_name"

android:theme="@android:style/Theme.NoTitleBar">