使用 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{   @Overrideprotected 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{   @Overrideprotected 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