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

置顶 于 2013-12-25 16:02:13 发布
阅读量1.1k 收藏
点赞数
分类专栏： android 开发学习 文章标签： android tabhost rediobutton 导航切换 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010469432/article/details/17555731
版权

先看效果图：


我这里要演示的效果就是使用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.youkuaiyun.com/detail/u010469432/6767435     

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值