使用 RadioGroup+TabHost 搭建框架实现 导航 切换

先看效果图：



我这里要演示的效果就是使用RadioGroup+TabHost 实现如图所示的类别的切换。
不多说。看代码：
1.首先：创建项目。
2.在layout 中创建页面这里为main.xml。在.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:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_weight="1.0" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:visibility="gone" />

<LinearLayout
android:id="@+id/console_line_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@drawable/main_navigation_background"
android:orientation="horizontal" >

<RadioGroup
android:id="@+id/main_tab_group"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/main_navigation_background"
android:gravity="bottom"
android:orientation="horizontal"
android:paddingTop="2.0dip" >

<RadioButton
android:id="@+id/main_tab_home"
style="@style/main_tab_bottom"
android:checked="true"
android:drawableTop="@drawable/main_navigation_home"
android:text="@string/main_navigation_home" />

<RadioButton
android:id="@+id/main_tab_catagory"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/main_navigation_catagory"
android:text="@string/main_navigation_catagory" />

<RadioButton
android:id="@+id/main_tab_car"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/main_navigation_car"
android:text="@string/main_navigation_car" />

<RadioButton
android:id="@+id/main_tab_buy"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/main_navigation_personal"
android:text="@string/main_code_buy" />

<RadioButton
android:id="@+id/main_tab_more"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/main_navigation_more"
android:text="@string/main_navigation_more" />
</RadioGroup>
</LinearLayout>
</LinearLayout>

</TabHost>

3.在src中创建Activity ，这里为JdscActivity.结合TabHost实现栏目的切换。

import cn.com.util.ExitManager;
import android.app.AlertDialog;
import android.app.TabActivity;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RadioButton;
import android.widget.TabHost;

public class JdscActivity extends TabActivity {
TabHost tabHost;
private RadioButton main_tab_home, main_tab_catagory, main_tab_car,
main_tab_buy, main_tab_more;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initTab();
init();
ExitManager.getInstance().addActivity(this);
}
//获取页面上的5个RadioButton。根据tabHost.setCurrentTabByTag("home");并分别绑定点击事件。

public void init(){
main_tab_home=(RadioButton)findViewById(R.id.main_tab_home);
main_tab_catagory = (RadioButton) findViewById(R.id.main_tab_catagory);
main_tab_car = (RadioButton) findViewById(R.id.main_tab_car);
main_tab_buy = (RadioButton) findViewById(R.id.main_tab_buy);
main_tab_more = (RadioButton) findViewById(R.id.main_tab_more);
main_tab_home.setOnClickListener(new OnClickListener() {

public void onClick(View view) {
tabHost.setCurrentTabByTag("home");

}
});

main_tab_catagory.setOnClickListener(new OnClickListener() {

public void onClick(View view) {
tabHost.setCurrentTabByTag("catagory");

}
});
main_tab_car.setOnClickListener(new OnClickListener() {

public void onClick(View view) {
tabHost.setCurrentTabByTag("car");

}
});
main_tab_buy.setOnClickListener(new OnClickListener() {

public void onClick(View view) {
tabHost.setCurrentTabByTag("buy");

}
});
main_tab_more.setOnClickListener(new OnClickListener() {

public void onClick(View view) {
tabHost.setCurrentTabByTag("more");

}
});
}
//tabHost点击事件。
public void initTab(){
tabHost=getTabHost();
tabHost.addTab(tabHost.newTabSpec("home").setIndicator("home")
.setContent(new Intent(this, HomeActivity.class)));
tabHost.addTab(tabHost.newTabSpec("catagory").setIndicator("catagory")
.setContent(new Intent(this, HomeActivity.class)));
tabHost.addTab(tabHost.newTabSpec("car").setIndicator("car")
.setContent(new Intent(this, HomeActivity.class)));
tabHost.addTab(tabHost.newTabSpec("buy").setIndicator("buy")
.setContent(new Intent(this, BuyActivity.class)));
tabHost.addTab(tabHost.newTabSpec("more").setIndicator("more")
.setContent(new Intent(this, HomeActivity.class)));
}
//获取手机的返回键，并绑定返回事件。弹出框
public boolean dispatchKeyEvent( KeyEvent event) {
int keyCode=event.getKeyCode();
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (event.getRepeatCount() == 0) {
AlertDialog.Builder alertDialog = new AlertDialog.Builder(
JdscActivity.this);
alertDialog.setTitle(JdscActivity.this
.getString(R.string.app_close));
alertDialog.setPositiveButton(JdscActivity.this
.getString(R.string.btn_ok),
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int which) {
ExitManager.getInstance().exit();
}
});
alertDialog.setNegativeButton(JdscActivity.this
.getString(R.string.btn_cancel),
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int which) {
}
});
alertDialog.show();
}
}
return super.dispatchKeyEvent(event);
}

}

4.到此时其实切换的效果已经实现了，不过在第3步中Rediobutton有需要绑定的事件，这里我再写两个页面进行来测试。

（1）创建HomeActivity类和main_home.xml文件。

package cn.com.jdsc;

import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_home);
}
}

main_home.xml：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/empty_cart_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffefebe7">

<RelativeLayout
android:id="@+id/top_relative"
android:layout_width="fill_parent"
android:layout_height="50.0dip" >

<ImageView
android:id="@+id/titleBg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#106184" />

<ImageView
android:id="@+id/progressImage"
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:background="@drawable/android_title_bg_progress"
android:visibility="gone" />

<Button
android:id="@+id/titleRightButton"
style="\@style/title_right_button"
android:layout_width="100.0dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginRight="5.0dip"
android:layout_marginTop="2.0dip"
android:visibility="gone" />

<TextView
android:id="@+id/titleText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="15dp"
android:padding="10.0dip"
android:text="我的京东"
android:textColor="@color/white"
android:singleLine="true" />

</RelativeLayout>
</RelativeLayout>

（2）创建BuyActivity类和main_buy.xml文件。

package cn.com.jdsc;

import android.app.Activity;
import android.os.Bundle;

public class BuyActivity  extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_buy);
}
}

main_buy.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/empty_cart_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffefebe7">

<RelativeLayout
android:id="@+id/top_relative"
android:layout_width="fill_parent"
android:layout_height="50.0dip" >

<ImageView
android:id="@+id/titleBg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#106184" />

<ImageView
android:id="@+id/progressImage"
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:background="@drawable/android_title_bg_progress"
android:visibility="gone" />

<Button
android:id="@+id/titleRightButton"
style="\@style/title_right_button"
android:layout_width="100.0dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginRight="5.0dip"
android:layout_marginTop="2.0dip"
android:visibility="gone" />

<TextView
android:id="@+id/titleText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="15dp"
android:padding="10.0dip"
android:text="我的京东"
android:textColor="@color/white"
android:singleLine="true" />

</RelativeLayout>

<ScrollView
android:id="@+id/regist_scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/top_relative"
android:background="#ffefebe7">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<RelativeLayout
android:id="@+id/regist_scroller_relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10.0dip" >

<TextView
android:id="@+id/login_page_input_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10.0dip"
android:layout_marginTop="20.0dip"
android:paddingTop="10.0dip"
android:textColor="@color/black"
android:text="证书名称:" />

<EditText
android:id="@+id/login_input_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/login_page_input_name"
android:layout_toRightOf="@+id/login_page_input_name"
android:background="@drawable/edit_text_x"
android:hint="请选出证书"
android:singleLine="true"
android:editable="false"/>

<TextView
android:id="@+id/login_page_input_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/login_page_input_name"
android:layout_marginLeft="10.0dip"
android:layout_marginTop="25.0dip"
android:paddingTop="10.0dip"
android:textColor="@color/black"
android:text="证书密码:" />

<EditText
android:id="@+id/login_input_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/login_input_name"
android:layout_alignTop="@+id/login_page_input_password"
android:layout_below="@+id/login_input_name"
android:layout_toRightOf="@+id/login_page_input_password"
android:background="@drawable/edit_text_x"
android:hint="请输入证书密码"
android:inputType="textPassword"
android:singleLine="true" />

<CheckBox
android:id="@+id/remember_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/login_input_password"
android:layout_below="@+id/login_input_password"
android:layout_marginTop="15.0dip"
android:button="@drawable/login_remember"
android:textColor="@color/black"
android:text="记住我" />

<Button
android:id="@+id/login_comfirm_button"
android:layout_width="145.0dip"
android:layout_height="wrap_content"
android:layout_below="@+id/remember_user"
android:layout_marginLeft="10.0dip"
android:layout_marginTop="15.0dip"
android:text="登录"
android:background="@drawable/android_big_button_x"
android:gravity="center"
android:textColor="#ff000000"
android:textSize="20.0sp" />

<Button
android:id="@+id/register_link"
android:layout_width="145.0dip"
android:layout_height="wrap_content"
android:layout_below="@+id/remember_user"
android:layout_marginLeft="5.0dip"
android:layout_marginTop="15.0dip"
android:background="@drawable/android_big_button_x"
android:gravity="center"
android:layout_toRightOf="@+id/login_comfirm_button"
android:text="注册"
android:textColor="#ff000000"
android:textSize="20.0sp" />

</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

5.最后别忘记在AndroidManifest.xml中配置Activity、

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:label="@string/app_name"
android:name=".JdscActivity" >
<intent-filter >
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".HomeActivity"/>
<activity android:name=".BuyActivity"/>
</application>

6.以下是.xml文件中用到的样式，以及显示的汉字。

页面显示的样式自己可以更改。我这里写出来的是我图片上的效果。但是还有一些图片我就不上传了。有点多。
drawables.xml

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

<item type="drawable" name="transparent_background">#99000000</item>
<item type="drawable" name="transparent">#00000000</item>
<item type="drawable" name="list_row_mormal">#ffffffff</item>
<item type="drawable" name="list_row_zeng">#fffffddd</item>
<item type="drawable" name="list_row_pressed">#ffeeeeee</item>
</resources>

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Title">
<item name="android:textColor">#ff000000</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:paddingLeft">10dip</item>
</style>

<style name="StyleListViewItem">
<item name="android:textSize">20px</item>
<item name="android:textColor">#ff000000</item>
</style>

<style name="main_tab_bottom">
<item name="android:textSize">@dimen/bottom_tab_font_size</item>
<item name="android:ellipsize">marquee</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:background">@drawable/home_btn_bg</item>
<item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">@null</item>
<item name="android:singleLine">true</item>
<item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
<item name="android:layout_weight">1.0</item>
</style>

<style name="Transparent">
<item name="android:windowBackground">@drawable/transparent_background</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
</style>
<style name="layout_title">
<item name="android:textSize">15.0dip</item>
<item name="android:textColor">#ffffffcc</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="line1">
<item name="android:background">#ffcccccc</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">1.0dip</item>
</style>
</resources>

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="button_height">45.0dip</dimen>
<dimen name="bottom_tab_font_size">12.0dip</dimen>
<dimen name="bottom_tab_padding_up">5.0dip</dimen>
<dimen name="bottom_tab_padding_drawable">2.0dip</dimen>

</resources>

string.xml

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

<string name="app_name">京东商城</string>
<string name="ActivityMainTitle">京东商城</string>
<string name="main_navigation_home">首页</string>
<string name="main_navigation_catagory">分类</string>
<string name="main_navigation_car">购物车</string>
<string name="main_code_buy">我的京东</string>
<string name="main_navigation_more">更多</string>
<string name="app_close">关闭应用程序</string>
<string name="btn_cancel">取 消</string>
<string name="btn_ok">确 定</string>
<string name="cart_item_hint">购物车还是空的,快去选购吧~ !</string>

</resources>

colors.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="white">#ffffffff</color>
<color name="light_gray">#ffe6e6e6</color>
<color name="black">#ff000000</color>
</resources>

运行效果：



点击我的京东：



源码下载：http://download.csdn.net/detail/u010469432/6767435