首页 > 代码库 > tabhost实现android菜单切换

tabhost实现android菜单切换

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

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

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

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

    实现app底部菜单条的方法有非常多种,亲身尝试了tabhostfragment两种方式,终于还是成功做成了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:能够是一个viewid,也能够通过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=http://www.mamicode.com/"@drawable/main_bottom_tab_home_normal" />>
注意:

    代码中设计到了其它跳转页面的xml。须要的话自己建立空白的xml页面就可以!

    虽然实现了须要的功能,可是对于tabhost的理解还有待提高。对于tabhost中固定使用的三个函数还会在之后的文章中具体介绍。敬请期待!



tabhost实现android菜单切换