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;
            }
        }
    }
}

下面是效果圖