底部菜单栏实现之TabHost

     近期因为一个项目需要用到底部菜单,楼主安卓菜鸟虽然知道现在Fragment才是主流,但是鉴于TabHost实现简单,于是花了点时间学习了一下。尽管官方对于TabHost不建议了,但是其实现方式还是很值得学习的。废话不多说了,下面先上效果图:

    底部菜单栏实现之TabHost_第1张图片

   先来看看整体布局文件:(activity_main.xml)

  



    
        
        
        
    
这里要注意TabHost、FramLayout和TabWidget的id。实现的效果如上图。

接下来就是Activity(MainActivity)的逻辑了,图中底部四个按钮,分别对应了四个界面。代码如下:

package com.knightboy.coolshoes.activitys;

import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import com.knightboy.coolshoes.R;

/**
 * Created by knightBoy on 2015/8/12.
 */
public class MainActivity extends TabActivity {

    private TabHost tabHost;
    //表示标签的字符串常量
    private static final String HEALTH = "健康";
    private static final String NAVIGATION = "导航";
    private static final String PLAN = "计划";
    private static final String COMMUNITY = "社区";

    //界面跳转的Intent
    private Intent healthIntent;
    private Intent navigationIntent;
    private Intent planIntent;
    private Intent communityIntent;

    //用于切换的常量
    private int[] drawables = new int[]{R.drawable.health,R.drawable.foot,R.drawable.time,R.drawable.message};
    private int[] drawables_click = new int[]{R.drawable.health_click,R.drawable.foot_click,R.drawable.time_click, R.drawable.message_click};
    private String[] tabs = new String[]{HEALTH,NAVIGATION,PLAN,COMMUNITY};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 注意id
        tabHost = (TabHost) findViewById(android.R.id.tabhost);
        prepareIntent();
        setupIntent();

        //设置为健康页面
        tabHost.setCurrentTab(0);

        //为标签的改变添加监听器
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                initTabWiget();
                for (int i = 0; i < 4; i++) {
                    if (tabId.equals(tabs[i])) {
                        //取得符合条件的标签
                        View mView = tabHost.getTabWidget().getChildAt(i);
                        ImageView imageView = (ImageView) mView.findViewById(R.id.tab_iv_icon);
                        TextView t = (TextView) mView.findViewById(R.id.tab_tv_text);
                        imageView.setImageResource(drawables_click[i]);
                        t.setTextColor(Color.BLACK);
                    }
                }
            }

            //初始化标签,主要是设置图片和文字颜色为未选中状态
            private void initTabWiget() {
                for (int i = 0; i < 4; i++) {
                    View mView = tabHost.getTabWidget().getChildAt(i);
                    ImageView imageView = (ImageView) mView.findViewById(R.id.tab_iv_icon);//获取控件imageView
                    TextView t = (TextView) mView.findViewById(R.id.tab_tv_text);//获取控件imageView
                    imageView.setImageResource(drawables[i]);
                    t.setTextColor(Color.WHITE);
                }
            }
        });
    }

    /**
     * 添加标签
     */
    private void setupIntent(){
        tabHost.addTab(buildTabSpec(HEALTH, R.drawable.health_click, healthIntent));
        tabHost.addTab(buildTabSpec(NAVIGATION, R.drawable.foot, navigationIntent));
        tabHost.addTab(buildTabSpec(PLAN, R.drawable.time, planIntent));
        tabHost.addTab(buildTabSpec(COMMUNITY, R.drawable.message, communityIntent));
    }

    /**
     * 添加一个标签的具体方法
     * @param tag 标签名
     * @param icon 图标
     * @param intent 跳转的Intent
     * @return
     */
    private TabHost.TabSpec buildTabSpec(String tag, int icon, Intent intent) {
        View view = View.inflate(MainActivity.this, R.layout.tab, null);
        ((ImageView)view.findViewById(R.id.tab_iv_icon)).setImageResource(icon);
        ((TextView)view.findViewById(R.id.tab_tv_text)).setText(tag);
        //处理初始状态健康页选中的效果
        if(HEALTH.equals(tag)){
            ((TextView)view.findViewById(R.id.tab_tv_text)).setTextColor(getResources().getColor(R.color.selectedText));
        }
        return tabHost.newTabSpec(tag).setIndicator(view).setContent(intent);
    }

    /**
     * 准备好所有的Intent对象
     */
    private void prepareIntent() {
        healthIntent=new Intent(this, HealthActivity.class);
        navigationIntent=new Intent(this, NavigationActivity.class);
        planIntent=new Intent(this, PlanActivity.class);
        communityIntent=new Intent(this,CommunityActivity.class);
    }
}

逻辑是不是特别简单。接下来就可以分别书写四个界面的代码了。

你可能感兴趣的:(安卓)