Android学习笔记---使用TabHost实现微信底部导航栏效果

一. TabHost介绍

TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;

1. TabHost常用组件

TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

-- 添加选项卡 : addTab(tabSpec);

2. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

3. 将按钮放到下面

布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;

设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;

设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;

下面上代码先是main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0.0dip"
                android:layout_weight="1.0" />

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.0"
                android:visibility="gone" />

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <RadioGroup
                    android:id="@+id/main_tab_group"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:gravity="bottom"
                    android:orientation="horizontal" >

                    <RadioButton
                        android:id="@+id/guide_home"
                        style="@style/main_tab_bottom"
                        android:checked="true"
                        android:drawableTop="@drawable/guide_home"
                        android:text="首页" />

                    <RadioButton
                        android:id="@+id/guide_store"
                        style="@style/main_tab_bottom"
                        android:drawableTop="@drawable/guide_group"
                        android:text="商城" />

                    <RadioButton
                        android:id="@+id/guide_cart"
                        style="@style/main_tab_bottom"

                        android:drawableTop="@drawable/guide_cart"
                        android:text="购物车" />

                    <RadioButton
                        android:id="@+id/guide_ww"
                        style="@style/main_tab_bottom"
                        android:drawableTop="@drawable/guide_setting"
                        android:text="我的" />
                </RadioGroup>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

Activity.main.java  代码

package com.example.myapplication;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.TabHost;

public class MainActivity extends TabActivity {
    private RadioButton guide_home, guide_store, guide_cart,guide_ww;
    private Intent intent1;
    private Intent intent2;
    private Intent intent3;
    private Intent intent4;
    private String tab="tab0";
    private int currIndex = 0;
    private TabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化四个Activity
        intent1 = new Intent(this, Main2Activity.class);
        intent2 = new Intent(this, Main3Activity.class);
        intent3 = new Intent(this, Main4Activity.class);
        intent4 = new Intent(this, Main5Activity.class);
        init();
        inittAB();
    }

    /**
     * 初始化组件
     */
    private void init() {
            guide_home = (RadioButton) findViewById(R.id.guide_home);
            guide_cart = (RadioButton) findViewById(R.id.guide_cart);
            guide_ww = (RadioButton) findViewById(R.id.guide_ww);
            guide_store=(RadioButton) findViewById(R.id.guide_store);
            //设置点击事件
            guide_home.setOnClickListener(new MyOnPageChangeListener());
            guide_store.setOnClickListener(new MyOnPageChangeListener());
            guide_cart.setOnClickListener(new MyOnPageChangeListener());
            guide_ww.setOnClickListener(new MyOnPageChangeListener());
    }

    //填充TabHost
    private void inittAB() {
        tabHost = getTabHost();
        //这里tab0是第一个，tab1是第二个窗口，以此类推
        tabHost.addTab(tabHost.newTabSpec("tab0")
                .setIndicator("tab0")
                .setContent(intent1));
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1")
                .setContent(intent2));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(intent4));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(intent3));
        if(tab.equalsIgnoreCase("tab0")){
            tabHost.setCurrentTabByTag("tab0");
        }
    }

    /**
     * 点击事件类
     */
    private class MyOnPageChangeListener implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.guide_home:
                    currIndex = 0;
                    //切换第一个窗口
                    tabHost.setCurrentTabByTag("tab0");
                    break;
                case R.id.guide_cart:
                    currIndex = 3;
                    //切换第二个窗口
                    tabHost.setCurrentTabByTag("tab2");
                    break;
                case R.id.guide_store:
                    currIndex = 4;
                    //切换第三个窗口
                    tabHost.setCurrentTabByTag("tab1");
                    break;
                case R.id.guide_ww:
                    currIndex = 5;
                    //切换第四个窗口
                    tabHost.setCurrentTabByTag("tab3");
                    break;
            }
        }
    }
}

下面是效果图