首页 > 代码库 > tabhost实现android菜单切换
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=http://www.mamicode.com/"@drawable/main_bottom_tab_home_normal" />>
注意:代码中设计到了其它跳转页面的xml。须要的话自己建立空白的xml页面就可以!
虽然实现了须要的功能,可是对于tabhost的理解还有待提高。对于tabhost中固定使用的三个函数还会在之后的文章中具体介绍。敬请期待!
tabhost实现android菜单切换