Android：Tab切换方法整理

一、TabHost实现Tab切换

TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的表情，FrameLayout是Tab内容。

实现方式有两种：

1、继承TabActivity

2、继承Activity类

>>两个方法实例下载

方法一：继承TabActivity

从TabActivity中用getTabHost()方法获取TabHost，然后设置标签内容

布局：

1、TabHost　　　　必须设置android:id为@android:id/tabhost

2、TabWidget　　　必须设置android:id为@android:id/tabs

3、FrameLayout　 必须设置android:id为@android:id/tabcontent

否则将出现类似报错:



按 Ctrl+C 复制代码
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@android:id/tabhost"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<TabWidget
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
></TabWidget>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@android:id/tabcontent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/widget_layout_red"
android:background="#ff0000"
android:orientation="vertical"
></LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/widget_layout_yellow"
android:background="#FCD209"
android:orientation="vertical"
></LinearLayout>

</FrameLayout>
</LinearLayout>
</TabHost>
按 Ctrl+C 复制代码

继承TabActivity

public class MainActivity extends TabActivity {
private TabHost tabhost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.demo);

//从TabActivity上面获取放置Tab的TabHost
tabhost = getTabHost();

tabhost.addTab(tabhost
//创建新标签one
.newTabSpec("one")
//设置标签标题
.setIndicator("红色")
//设置该标签的布局内容
.setContent(R.id.widget_layout_red));
tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
}

}

其中创建标签的方法：

tabhost.addTab(tabhost
.newTabSpec("one")
.setIndicator("红色")
.setContent(R.id.widget_layout_red));

也可以拆分写成：

TabHost.TabSpec tab1 = tabhost.newTabSpec("one");
tab1.setIndicator("红色");
tab1.setContent(R.id.widget_layout_red);
tabhost.addTab(tab1);

预览：

点击"黄色"标签



点击"红色"标签



方法二：继承Activity类

布局：

1、TabHost　　　　可自定义id

2、TabWidget　　　必须设置android:id为@android:id/tabs

3、FrameLayout　 必须设置android:id为@android:id/tabcontent

public class MainActivity extends Activity{
private TabHost tabhost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.demo);

//得到TabHost对象实例
tabhost =(TabHost) findViewById(R.id.mytab);
//调用 TabHost.setup()
tabhost.setup();
//创建Tab标签
tabhost.addTab(tabhost.newTabSpec("one").setIndicator("红色").setContent(R.id.widget_layout_red));
tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));

}

}

注意的是：

在使用TabHost切换activity时出现Did you forget to call 'public void setup..

改用第一种方法吧

Android：布局实例之模仿微信Tab

微信Tab预览效果：



思路：

1、用TabHost+RadioGroup搭建基本布局，以RadioGroup代替TabWidget

2、设置按钮和文字的的样式和selector

3、创建相应的Activity

4、实现按钮和内容切换

布局：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@android:id/tabhost"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
></FrameLayout>

<!-- 隐藏TabWidget -->
<TabWidget
android:id="@android:id/tabs"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</TabWidget>

<!-- 视觉上,用单选按钮替代TabWidget -->
<RadioGroup
android:id="@+id/main_radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/mmfooter_bg"
android:paddingTop="8dp"
android:orientation="horizontal"
>
<RadioButton
android:id="@+id/tab_icon_weixin"
android:checked="true"
android:textColor="@color/tab_text"
android:drawableTop="@drawable/tab_weixin"
android:text="@string/radio1_text"
style="@style/tab_button_bg"
/>

<RadioButton
android:id="@+id/tab_icon_address"
android:textColor="@color/tab_text"
android:drawableTop="@drawable/tab_address"
android:text="@string/radio2_text"
style="@style/tab_button_bg"
/>

<RadioButton
android:id="@+id/tab_icon_friend"
android:textColor="@color/tab_text"
android:drawableTop="@drawable/tab_frd"
android:text="@string/radio3_text"
style="@style/tab_button_bg"
/>

<RadioButton
android:id="@+id/tab_icon_setting"
android:textColor="@color/tab_text"
android:drawableTop="@drawable/tab_set"
android:text="@string/radio4_text"
style="@style/tab_button_bg"
/>

</RadioGroup>
</LinearLayout>
</TabHost>

按钮样式：

<!-- 按钮文字样式 -->
<style name="tab_text_color">
<item name="android:textColor">@color/tab_text</item>
<item name="android:textSize">12dp</item>
<!-- 从左向右跑马灯效果 -->
<item name="android:ellipsize">marquee</item>
<!-- 单行显示 -->
<item name="android:singleLine">true</item>
</style>

<!-- 按钮样式 -->
<style name="tab_button_bg">
<item name="android:textAppearance">@style/tab_text_color</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/tab_bg</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">@null</item>
<item name="android:layout_weight">1</item>
</style>

按钮图片selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_address_pressed"></item>
<item android:drawable="@drawable/tab_address_normal"></item>
</selector>

按钮文字selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/white"></item>
<item android:color="@color/grey"></item>
</selector>

程序：

public class MainActivity extends TabActivity{
private TabHost tabhost;
private RadioGroup main_radiogroup;
private RadioButton tab_icon_weixin, tab_icon_address, tab_icon_friend,tab_icon_setting;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.demo);

//获取按钮
main_radiogroup = (RadioGroup) findViewById(R.id.main_radiogroup);

tab_icon_weixin = (RadioButton) findViewById(R.id.tab_icon_weixin);
tab_icon_address = (RadioButton) findViewById(R.id.tab_icon_address);
tab_icon_friend = (RadioButton) findViewById(R.id.tab_icon_friend);
tab_icon_setting = (RadioButton) findViewById(R.id.tab_icon_setting);

//往TabWidget添加Tab
tabhost = getTabHost();
tabhost.addTab(tabhost.newTabSpec("tag1").setIndicator("0").setContent(new Intent(this,Activity1.class)));
tabhost.addTab(tabhost.newTabSpec("tag2").setIndicator("1").setContent(new Intent(this,Activity2.class)));
tabhost.addTab(tabhost.newTabSpec("tag3").setIndicator("2").setContent(new Intent(this,Activity3.class)));
tabhost.addTab(tabhost.newTabSpec("tag4").setIndicator("3").setContent(new Intent(this,Activity4.class)));

//设置监听事件
checkListener checkradio = new checkListener();
main_radiogroup.setOnCheckedChangeListener(checkradio);
}

//监听类
public class checkListener implements OnCheckedChangeListener{
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
//setCurrentTab 通过标签索引设置当前显示的内容
//setCurrentTabByTag 通过标签名设置当前显示的内容
switch(checkedId){
case R.id.tab_icon_weixin:
tabhost.setCurrentTab(0);
//或
//tabhost.setCurrentTabByTag("tag1");
break;
case R.id.tab_icon_address:
tabhost.setCurrentTab(1);
break;
case R.id.tab_icon_friend:
tabhost.setCurrentTab(2);
break;
case R.id.tab_icon_setting:
tabhost.setCurrentTab(3);
break;
}

}
}

}