tabhost实现android菜单切换

做APP项目已经有半个月了。慢慢地熟悉了这个开发环境和开发套路。

虽然是摸着石头过河。但也渐渐看到了水的深度！

作为一个电商项目APP，势必会涉及究竟部菜单条的功能。自己实现这个功能的过程是崎岖的，最总完毕之后才发现这样的崎岖对于自己的学习是非常有帮助的！

对于这部分的探索拿来和大家分享，希望能够相助于大家！

实现app底部菜单条的方法有非常多种，亲身尝试了tabhost和fragment两种方式，终于还是成功做成了tabhost,拿来和大家分享。

事实上tabhost实现底部菜单条的功能非常easy。真正的高手已经给我们建立了基础。须要我们做的就是熟悉并运用好它就可以实现我们要的功能。所以我们就非常有必要认真地研究一下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的四个button
	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);
	}

	/*响应单位价格事件、改变button图片*/
	@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中固定使用的三个函数还会在之后的文章中具体介绍。敬请期待！