做APP项目已经有半个月了，慢慢地熟悉了这个开发环境和开发套路。尽管是摸着石头过河，但也渐渐看到了水的深度！
作为一个电商项目APP，势必会涉及到底部菜单栏的功能，自己实现这个功能的过程是崎岖的，最总完成之后才发现这种崎岖对于自己的学习是很有帮助的！对于这部分的探索拿来和大家分享，希望可以相助于大家！
实现app底部菜单栏的方法有很多种，亲身尝试了tabhost和fragment两种方式，最终还是成功做成了tabhost,拿来和大家分享。其实tabhost实现底部菜单栏的功能很简单，真正的高手已经给我们建立了基础，需要我们做的就是熟悉并运用好它即可实现我们要的功能。所以我们就很有必要认真地研究一下abhost内部究竟有什么好东西，它又是怎么帮助我们实现的页面切换。
首先让我们来认识一下tabhost中非常重要的一些函数indicator(指示器)、content和tag.一个tab通常包含了indiicator(指示器)、content（tab对应展示的页面view，可以为这个view的id或者是一个intent）、tag。其中TabSpec就是用来辅助设置这些选项：
<1> Indicator通常是设置tab的名称label和icon;
<2> Content：可以是一个view的id，也可以通过TabContentFactory创建一个view，还可以是一个Intent组件来加载一个activity。
用到的java类代码：
<span style="font-family:KaiTi_GB2312;">package jczb.shoping.ui;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.TabSpec;
public class MenuActivity extends TabActivity implements OnClickListener{
LinearLayout llchannel1,llchannel2,llchannel3,llchannel4;
ImageView ivMain,ivCart,ivMine;
Intent itMain,itCart,itMine;
int mCurTabId = R.id.channel1;
//定义tab的四个按钮
public static String TAB_TAG_ANBIAOCHECK="anbiaocheck";
public static String TAB_TAG_SETTINGS="settings";
public static String TAB_TAG_DOWNLOAD="download";
public static TabHost mTabHost;
private Animation left_in,left_out;
private Animation right_in,right_out;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu);
prepareAnim();
prepareIntent();
setupIntent();
findViewById();
initView();
}
/*根据ID拿到控件*/
protected void findViewById() {
ivMain = (ImageView)findViewById(R.id.imageView1);
ivCart = (ImageView)findViewById(R.id.imageView2);
ivMine = (ImageView)findViewById(R.id.imageView3);
llchannel1 = (LinearLayout)findViewById(R.id.channel1);
llchannel2 = (LinearLayout)findViewById(R.id.channel2);
llchannel3 = (LinearLayout)findViewById(R.id.channel3);
}
/**
* 动画效果
*/
private void prepareAnim() {
left_in = AnimationUtils.loadAnimation(this, R.anim.left_in);
left_out = AnimationUtils.loadAnimation(this, R.anim.left_out);
right_in = AnimationUtils.loadAnimation(this, R.anim.right_in);
right_out = AnimationUtils.loadAnimation(this, R.anim.right_out);
}
/**
* Intent跳转信息
*/
private void prepareIntent(){
//首页
itMain = new Intent(this,MainActivity.class);
//购物车
itCart = new Intent(this,CartActivity.class);
//我的
itMine = new Intent(this,MineActivity.class);
}
/*供setupIntent调用
* 标记tag、加载图片，切换页面
* */
private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,
final Intent content) {
return mTabHost
.newTabSpec(tag)
.setIndicator(getString(resLabel),
getResources().getDrawable(resIcon))
.setContent(content);
}
public static void setCurrentTabByTag(String tab) {
mTabHost.setCurrentTabByTag(tab);
}
/**
* 获取Tabhost
*/
private void setupIntent() {
mTabHost = getTabHost();
mTabHost.addTab(buildTabSpec(TAB_TAG_ANBIAOCHECK, R.string.securitycheck_btn_str,
R.drawable.main_bottom_tab_home_normal, itMain));
mTabHost.addTab(buildTabSpec(TAB_TAG_SETTINGS,R.string.securitycheck_btn_str,
R.drawable.main_bottom_tab_cart_focus, itCart));
mTabHost.addTab(buildTabSpec(TAB_TAG_DOWNLOAD, R.string.securitycheck_btn_str,
R.drawable.main_bottom_tab_personal_focus, itMine));
}
/*单击事件监听器*/
protected void initView() {
llchannel1.setOnClickListener(this);
llchannel2.setOnClickListener(this);
llchannel3.setOnClickListener(this);
}
@Override
public boolean onKeyDown(int keyCode,KeyEvent event){
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
ivMain.performClick();
return true;
}
return super.onKeyDown(keyCode, event);
}
/*响应单价事件、改变按钮图片*/
@Override
public void onClick(View v){
if (mCurTabId == v.getId()) {
return;
}
int checkedId = v.getId();
final boolean o;
if (mCurTabId < checkedId) {
o = true;
} else {
o = false;
}
if (o) {
mTabHost.getCurrentView().startAnimation(left_out);
} else {
mTabHost.getCurrentView().startAnimation(right_out);
}
switch (checkedId) {
//实现类似于各个子tabhost点击之后图片切换的效果
case R.id.channel1:
mTabHost.setCurrentTabByTag(TAB_TAG_ANBIAOCHECK);
ivMine.setImageResource(R.drawable.main_bottom_tab_personal_focus);
ivCart.setImageResource(R.drawable.main_bottom_tab_cart_focus);
ivMain.setImageResource(R.drawable.main_bottom_tab_home_normal);
break;
case R.id.channel2:
mTabHost.setCurrentTabByTag(TAB_TAG_SETTINGS);
ivMine.setImageResource(R.drawable.main_bottom_tab_personal_focus);
ivCart.setImageResource(R.drawable.main_bottom_tab_cart_normal);
ivMain.setImageResource(R.drawable.main_bottom_tab_home_focus);
break;
case R.id.channel3:
mTabHost.setCurrentTabByTag(TAB_TAG_DOWNLOAD);
ivMine.setImageResource(R.drawable.main_bottom_tab_personal_normal);
ivCart.setImageResource(R.drawable.main_bottom_tab_cart_focus);
ivMain.setImageResource(R.drawable.main_bottom_tab_home_focus);
break;
default:
break;
}
if (o) {
mTabHost.getCurrentView().startAnimation(left_in);
}else {
mTabHost.getCurrentView().startAnimation(right_in);
}
mCurTabId = checkedId;
}
}
</span>页面的xml代码；
<span style="font-family:KaiTi_GB2312;"><?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"
android:background="@color/black"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/white"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:visibility="gone" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/whitesmoke" >
<!-- 主页 -->
<LinearLayout
android:id="@+id/channel1"
style="@style/main_tab_but_linear" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:src="@drawable/main_bottom_tab_home_normal" />
</LinearLayout>
<!-- 购物车 -->
<LinearLayout
android:id="@+id/channel2"
style="@style/main_tab_but_linear" >
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:src="@drawable/main_bottom_tab_cart_focus"/>
</LinearLayout>
<!-- 我的-->
<LinearLayout
android:id="@+id/channel3"
style="@style/main_tab_but_linear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:src="@drawable/main_bottom_tab_personal_focus" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</TabHost>
</span>代码中设计到了其他跳转页面的xml，需要的话自己建立空白的xml页面即可！
尽管实现了需要的功能，但是对于tabhost的理解还有待提高。对于tabhost中固定使用的三个函数还会在之后的文章中详细介绍，敬请期待！
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/u010508826/article/details/47059455
