使用 RadioGroup+TabHost 搭建框架实现 导航 切换
编辑：www.fx114.net
本篇文章主要介绍了"[置顶]
使用 RadioGroup+TabHost 搭建框架实现 导航 切换"，主要涉及到[置顶]
使用 RadioGroup+TabHost 搭建框架实现 导航 切换方面的内容，对于[置顶]
使用 RadioGroup+TabHost 搭建框架实现 导航 切换感兴趣的同学可以参考一下。
先看效果图：
我这里要演示的效果就是使用RadioGroup+TabHost 实现如图所示的类别的切换。
不多说。看代码：
1.首先：创建项目。
2.在layout 中创建页面这里为main.xml。在.xml文件中会需要用到一些素材，这里我就不上传了。
&?xml version=&1.0& encoding=&utf-8&?&
&TabHost xmlns:android=&/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实现栏目的切换。
.util.ExitM
import android.app.AlertD
import android.app.TabA
import android.content.DialogI
import android.content.I
import android.os.B
import android.view.KeyE
import android.view.V
import android.view.View.OnClickL
import android.widget.RadioB
import android.widget.TabH
public class JdscActivity extends TabActivity {
TabHost tabH
private RadioButton main_tab_home, main_tab_catagory, main_tab_car,
main_tab_buy, main_tab_
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initTab();
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文件。
import android.app.A
import android.os.B
public class HomeActivity extends Activity{
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=&/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& /&
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& /&
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文件。
import android.app.A
import android.os.B
public class BuyActivity
extends Activity{
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=&/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& /&
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& /&
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& &
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=&证书名称:& /&
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&/&
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=&证书密码:& /&
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& /&
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=&记住我& /&
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& /&
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& &
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&&#&/item&
&item type=&drawable& name=&transparent&&#&/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&
&?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 name=&StyleListViewItem&&
&item name=&android:textSize&&20px&/item&
&item name=&android:textColor&&#ff000000&/item&
&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 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 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 name=&line1&&
&item name=&android:background&&#ffcccccc&/item&
&item name=&android:layout_width&&fill_parent&/item&
&item name=&android:layout_height&&1.0dip&/item&
&/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&
运行效果：
点击我的京东：
源码下载：& & &
本文标题：
本页链接：2884人阅读
以前用Fragment模仿过微信底部导航 不过最近一个简单的项目准备用TabHost来做底部导航 所以回顾了一下TabHost的知识，做了一个简单的用TabHost来模仿微信导航的demo & 因为图片的都是用以前的图片东西 需要的可以看&所以只贴出关键代码
效果如下图：
&?xml version=&1.0& encoding=&utf-8&?&
&TabHost xmlns:android=&/apk/res/android&
android:id=&@android:id/tabhost&
android:layout_width=&match_parent&
android:layout_height=&match_parent& &
&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=&0.0dip&
android:layout_weight=&1.0& &
&/FrameLayout&
&TabWidget
android:id=&@android:id/tabs&
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:visibility=&gone& &
&/TabWidget&
&RadioGroup
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:layout_gravity=&bottom&
android:background=&@android:color/black&
android:orientation=&horizontal& &
&RadioButton
android:id=&@+id/talk&
style=&@style/rbt_bottom&
android:drawableTop=&@drawable/take_bottom&
android:text=&@string/talk& /&
&RadioButton
android:id=&@+id/address&
style=&@style/rbt_bottom&
android:drawableTop=&@drawable/adrress_bottom&
android:text=&@string/address& /&
&RadioButton
android:id=&@+id/find&
style=&@style/rbt_bottom&
android:drawableTop=&@drawable/find_bottom&
android:text=&@string/find& /&
&RadioButton
android:id=&@+id/me&
style=&@style/rbt_bottom&
android:drawableTop=&@drawable/me_bottom&
android:text=&@string/me& /&
&/RadioGroup&
&/LinearLayout&
&/TabHost&
&?xml version=&1.0& encoding=&utf-8&?&
&selector xmlns:android=&/apk/res/android&&
&item android:drawable=&@drawable/n_address_l&
android:state_checked=&true& android:state_enabled=&true&/&
&item android:drawable=&@drawable/n_address_h&/&
&/selector&
package com.android.xiong.
import android.app.TabA
import android.content.I
import android.os.B
import poundB
import poundButton.OnCheckedChangeL
import android.widget.RadioB
import android.widget.TabH
@SuppressWarnings(&deprecation&)
public class MainActivity extends TabActivity implements
OnCheckedChangeListener {
private TabHost tabH
private Intent addressI
private Intent meI
private Intent takeI
private Intent findI
private RadioButton findBt;
private RadioButton addressBt;
private RadioButton meBt;
private RadioButton takeBt;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabhostmain);
addressIntent = new Intent(this, AddressActivity.class);
meIntent = new Intent(this, MeActivity.class);
takeIntent = new Intent(this, TakeActivity.class);
findIntent = new Intent(this, FindActivity.class);
findBt = (RadioButton) findViewById(R.id.find);
addressBt = (RadioButton) findViewById(R.id.address);
meBt = (RadioButton) findViewById(R.id.me);
takeBt = (RadioButton) findViewById(R.id.talk);
tabHost =getTabHost();
tabHost.addTab(tabHost.newTabSpec(&take&).setIndicator(&take&)
.setContent(takeIntent));
tabHost.addTab(tabHost.newTabSpec(&address&).setIndicator(&address&)
.setContent(addressIntent));
tabHost.addTab(tabHost.newTabSpec(&find&).setIndicator(&find&)
.setContent(findIntent));
tabHost.addTab(tabHost.newTabSpec(&me&).setIndicator(&me&)
.setContent(meIntent));
findBt.setOnCheckedChangeListener(this);
meBt.setOnCheckedChangeListener(this);
takeBt.setOnCheckedChangeListener(this);
addressBt.setOnCheckedChangeListener(this);
public void onCheckedChanged(CompoundButton view, boolean ischeak) {
if (ischeak) {
switch (view.getId()) {
case R.id.talk:
tabHost.setCurrentTabByTag(&take&);
case R.id.find:
tabHost.setCurrentTabByTag(&find&);
case R.id.me:
tabHost.setCurrentTabByTag(&me&);
case R.id.address:
tabHost.setCurrentTabByTag(&address&);
&manifest xmlns:android=&/apk/res/android&
package=&com.android.xiong.bkclient&
android:versionCode=&1&
android:versionName=&1.0& &
android:minSdkVersion=&8&
android:targetSdkVersion=&19& /&
&application
android:allowBackup=&true&
android:icon=&@drawable/ic_launcher&
android:label=&@string/app_name&
android:theme=&@style/AppTheme& &
&activity android:name=&com.android.xiong.bkclient.MainActivity&&
&intent-filter&
&action android:name=&android.intent.action.MAIN& /&
&category android:name=&android.intent.category.LAUNCHER& /&
&/intent-filter&
&/activity&
&activity android:name=&com.android.xiong.bkclient.AddressActivity&&&/activity&
&activity android:name=&com.android.xiong.bkclient.FindActivity&&&/activity&
&activity android:name=&com.android.xiong.bkclient.MeActivity&&&/activity&
&activity android:name=&com.android.xiong.bkclient.TakeActivity&&&/activity&
&/application&
&/manifest&
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：359857次
积分：4668
积分：4668
排名：第2762名
原创：105篇
转载：67篇
评论：153条
文章：56篇
阅读：199497
一群与二群已满
Android开发联盟③}