做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中固定使用的三个函数还会在之后的文章中具体介绍。敬请期待！
时间： 2024-10-08 10:28:09