先上效果图:
实现上述效果,我们按照以下几个步骤逐一的实现
1.定义TabHost的布局,TabHost布局 android 有一定的规定:
一般包含id为@android:id/tabhost的Tabhost,id为@android:id/tabs的TabWidget,id为@android:id/tabcontent的FrameLayout
这里结合RadioGroup实现点击切换Activity,RadioButton可以方便设置图片和文字的上下左右位置。
以下为布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabHost android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="gone">
</TabWidget>
<FrameLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<RadioGroup android:id="@+id/main_radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:gravity="bottom"
android:background="@drawable/bottom1">
<RadioButton android:id="@+id/workspace" android:checked="true" style="@style/TabButton" android:text="工作区" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_0"/>
<RadioButton android:id="@+id/entertainment" style="@style/TabButton" android:text="娱乐生活" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_1"/>
<RadioButton android:id="@+id/tools" style="@style/TabButton" android:text="工具箱" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_2"/>
<RadioButton android:id="@+id/setting" style="@style/TabButton" android:text="个人中心" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_3"/>
</RadioGroup>
</FrameLayout>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="@android:id/tabs">
</FrameLayout>
</RelativeLayout>
</TabHost>
</RelativeLayout>
2.编写Activity
Activity需实现TabActivity,初始化Tab 设置RadioButton的选择监听事件用于切换Activity
代码如下:
import com.nisco.twp.R;
import android.app.Activity;
import android.app.ActivityGroup;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TabHost;
public class MainTabHost extends TabActivity
{
private TabHost tabHost=null;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabhost);
tabHost=(TabHost)findViewById(android.R.id.tabhost);
tabHost.setFocusable(true);
TabHost.TabSpec tabSpec=tabHost.newTabSpec("1");
Intent intent=new Intent(this, MainActivity.class);
tabSpec.setIndicator("工作区").setContent(intent);
tabHost.setup(this.getLocalActivityManager());
tabHost.addTab(tabSpec);
TabHost.TabSpec tabSpec2=tabHost.newTabSpec("2");
Intent intent2=new Intent(this, EntertainmentMainActivity.class);
tabSpec2.setIndicator("娱乐生活").setContent(intent2);
tabHost.addTab(tabSpec2);
TabHost.TabSpec tabSpec3=tabHost.newTabSpec("3");
Intent intent3=new Intent(this, ToolsMainActivity.class);
tabSpec3.setIndicator("工具箱").setContent(intent3);
tabHost.addTab(tabSpec3);
TabHost.TabSpec tabSpec4=tabHost.newTabSpec("4");
Intent intent4=new Intent(this, MainActivity.class);
tabSpec4.setIndicator("个人中心").setContent(intent4);
tabHost.addTab(tabSpec4);
tabHost.setCurrentTab(0);
RadioGroup radioGroup=(RadioGroup)findViewById(R.id.main_radiogroup);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId)
{
switch (checkedId) {
case R.id.workspace:
tabHost.setCurrentTab(0);
break;
case R.id.entertainment:
tabHost.setCurrentTab(1);
break;
case R.id.tools:
tabHost.setCurrentTab(2);
break;
case R.id.setting:
tabHost.setCurrentTab(3);
break;
}
}
});
}
}
Tab切换对应的几个Activity都相对简单,这里就不再赘述了。