利用FragmentTabHost完成底部菜單

利用FragmentTabHost完成底部菜單

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--注意id是系統內部的tabhost-->
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--注意id是系統內部的tabcontent-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/tabbar_content_bg" />

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/margin_1_dp"
            android:background="@color/tabbar_line_color" />
        <!--注意id是系統內部的tabs-->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tabbar_height"
            android:layout_gravity="bottom" />

    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

tab_indicator.xml（每個tab對應的佈局視圖）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/white">

    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:contentDescription="@null"
        android:src="@mipmap/apk_bottom_ic_first"/>

    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tabbar_home_text"
        android:textColor="@color/tabbar_text_normal_color"
        android:layout_marginTop="@dimen/margin_2_dp"
        android:textSize="10sp"/>

</LinearLayout>

4個fragment

fragment中大家可能會發現沒onCreare()、onCreateView()這些方法，是因爲我是基於自己定義的BaseFragment，省去了大部分的寫法，大家可以不用太在意

CartFragment.class

package com.tc.mobileshop.project.cart.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.mvp.presenter.MvpPresenter;
import com.tc.mobileshop.mvp.view.MvpView;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 購物車
 * Created by 輝神 on 2016/8/8.
 */

public class CartFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_cart;
    }


}

HomeFragment.class

package com.tc.mobileshop.project.home.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 主頁
 * Created by 輝神 on 2016/8/8.
 */

public class HomeFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_home;
    }


}

MineFragment.class

package com.tc.mobileshop.project.mine.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 我的
 * Created by 輝神 on 2016/8/8.
 */

public class MineFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_mine;
    }


}

TataFragment.class

package com.tc.mobileshop.project.tata.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 她她圈
 * Created by 輝神 on 2016/8/8.
 */

public class TataFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_tata;
    }


}

TabItem.class

    /**
     * tab數據
     */
    private class TabItem {
        //正常的tab圖片
        private int tabImageNomalRes;
        //tab被點擊時的圖片
        private int tabImagePressRes;
        //tab標題
        private int tabtextRes;
        //當前tab所屬的fragment
        private Class<? extends Fragment> fragmentClass;
        //當前tab的視圖
        private View view;
        //當前tab的文字標題
        private TextView tabTitle;
        //當前tab的圖標
        private ImageView tabImage;

        public TabItem(
                int tabImageNomalRes,
                int tabImagePressRes,
                int tabtext,
                Class<? extends Fragment> fragmentClass) {
            this.tabImageNomalRes = tabImageNomalRes;
            this.tabImagePressRes = tabImagePressRes;
            this.tabtextRes = tabtext;
            this.fragmentClass = fragmentClass;
        }

        /***
         * 返回tab標題
         *
         * @return
         */
        private String getTitleStr() {
            return (String) getResources().getText(tabtextRes);
        }

        /**
         * 初始化tab中的View，並返回View
         * @return
         */
        public View getIndicator() {
            if (view == null) {
                view = getLayoutInflater().inflate(R.layout.tab_indicator, null);
                tabTitle = (TextView) view.findViewById(R.id.tv_tab);
                tabImage = (ImageView) view.findViewById(R.id.iv_tab);
                tabImage.setImageResource(tabImageNomalRes);//默認正常圖片
                tabTitle.setText(getTitleStr());
            }
            return view;
        }

        /**
         * 通過判斷是否選中，來變更圖片
         *
         * @param checked
         */
        private void setChecked(boolean checked) {
            if (checked) {
                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_press_color));
                tabImage.setImageResource(tabImagePressRes);
            } else {
                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_normal_color));
                tabImage.setImageResource(tabImageNomalRes);
            }
        }
    }

初始化tab數據

    /**
     * 初始化tab數據
     */
    private void initTabItemData() {
        tabItems = new ArrayList<>();
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_first, R.mipmap.apk_bottom_ic_first_up, R.string.tabbar_home_text, HomeFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_tata, R.mipmap.apk_bottom_ic_tata_up, R.string.tabbar_tata_text, TataFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_buy, R.mipmap.apk_bottom_ic_buy_up, R.string.tabbar_cart_text, CartFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_mine, R.mipmap.apk_bottom_ic_mine_up, R.string.tabbar_mine_text, MineFragment.class));
    }

初始化tabHost

    /**
     * 初始化tabHost
     */
    private void initTabHost() {
        fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        fragmentTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
        //去掉tab的分隔線
        fragmentTabHost.getTabWidget().setDividerDrawable(null);
        for (int i = 0; i < tabItems.size(); i++) {
            TabItem tabitem = tabItems.get(i);
            //創建一個Tab
            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(tabitem.getTitleStr()).setIndicator(tabitem.getIndicator());
            //將tab添加到tabHost中
            fragmentTabHost.addTab(tabSpec, tabitem.fragmentClass, null);
            //指定Tab的北景
            fragmentTabHost.getTabWidget().setBackgroundColor(Color.WHITE);
            //設置tab改變的監聽
            fragmentTabHost.setOnTabChangedListener(this);
            //首頁是默認選中，所以應該設置首頁爲選中的圖片
            if (i == 0) {
                tabitem.setChecked(true);
            }
        }

    }
    /**
     * 監聽改變，用於點擊時改變圖標
     * @param tabId
     */
    @Override
    public void onTabChanged(String tabId) {
        for (int i = 0; i < tabItems.size(); i++) {
            TabItem tabItem = tabItems.get(i);
            if (tabId.equals(tabItem.getTitleStr())) {
                tabItem.setChecked(true);
            } else {
                tabItem.setChecked(false);
            }
        }
    }