Android之玩转选项卡（TabHost、TabWidget、FrameLayout）

选项卡(TabHost、TabWidget、FrameLayout)

       选项卡由TabHost、TabWidget、FrameLayout 这3个组件构成，用于实现一个多标签页的用户界面，不费话了，先爆图，就知道是什么鬼了，怎么用了。

第一步  配置activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >
<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"
></TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="你喜欢安卓吗？"
></TextView>
<TextView
android:id="@+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="你喜欢j2ee吗？"
></TextView>
<TextView
android:id="@+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="你喜欢ios吗？"
></TextView>
<TextView
android:id="@+id/textview4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="你喜欢html5吗？"
></TextView>
</FrameLayout>
</LinearLayout>
</TabHost>

要记住 是<TabHost></TabHost> 不是其它布局，然后就得写<TabWidget/>，然后再写<FrameLayout/>，在里面放入4个<TextView>
   
第二步 写MainActivity.java

package com.example.tabhost;

import android.app.AlertDialog;
import android.app.Dialog;
import android.app.TabActivity;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View.OnClickListener;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

public class MainActivity extends TabActivity {

private TabHost tabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tabHost = getTabHost();

addTab();// 添加标签
// 设置TabHost背景颜色
tabHost.setBackgroundColor(Color.argb(150, 20, 80, 150));
// 设置TabHost背景图片资源
tabHost.setBackgroundResource(R.drawable.ic_launcher);
// 设置当前显示哪一个标签 我的理解就是当你第一次启动程序默认显示那个标签 这里是指定的选项卡的ID从0开始
tabHost.setCurrentTab(0);
// 标签切换事件处理，setOnTabChangedListener 注意是标签切换事件不是点击事件，而是从一个标签切换到另外一个标签会触发的事件
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
Dialog dia;
builder.setTitle("提示");
builder.setMessage("当前选中了" + tabId + "标签");
//记得这个时候要加上new DialogInterface. 不然会报错 一定要记得
builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
});
dia = builder.create();
dia.show();
}
});
}
// 为TabHost添加标签 新建一个newTabSped(new TabSpec) 设置其标签和图标（setIndicator）、设置内容(setContent)
// TabSpec是TabHost的内部类 TabHost对象的 newTabSpec()方法返回一个TabSpec对象
// 源码里边是这么写的 public TabSpec newTabSpec(String tag)
// { return new TabSpec(tag); }
private void addTab() {
tabHost.addTab(tabHost
.newTabSpec("tab1")
.setIndicator("TAB1",
getResources().getDrawable(R.drawable.ic_launcher))// setIndicator()此方法用来设置标签和图表
.setContent(R.id.textview1));
// 指定内容为一个TextView --->public TabHost.TabSpec setContent(int viewId) 此方法需要一个 viewId 作为参数
tabHost.addTab(tabHost
.newTabSpec("tab2")
.setIndicator("TAB2",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(R.id.textview2));

tabHost.addTab(tabHost
.newTabSpec("tab3")
.setIndicator("TAB3",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(R.id.textview3));

tabHost.addTab(tabHost
.newTabSpec("tab4")
.setIndicator("TAB4",
getResources().getDrawable(R.drawable.ic_launcher))
.setContent(R.id.textview4));
}

}

如果你不熟悉AlertDialog 可以快速学习下，运行起来就有这样的效果了。
                                                       


如果没有看懂可以问，我的QQ 2657607916 随时可以交流