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">
