用FragmentTabHost加Fragment实现底部菜单+底部Tab点击事件监听

如图：

用FragmentTabHost实现底部菜单栏：

FragmentTabHost的介绍：

我们需要一个indicator的view，里面包括一个ImageView和一个TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/indicator_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:focusable="false">
    </ImageView>

    <TextView
        android:id="@+id/indicator_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:text="@string/app_name"
        android:textSize="10sp"
        android:textColor="@color/selector_tab_textcolor">
    </TextView>

</LinearLayout>

android:textColor=”@color/selector_tab_textcolor”为文字点击时候颜色的切换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#0FB22F"/>
    <item android:state_active="true" android:color="#0FB22F"/>

    <item android:state_selected="false" android:color="#545454"/>
    <item android:state_active="false" android:color="#545454"/>
</selector>

FragmentTabHost的用法：

1.布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">


    <!-- 用来装载fragment-->
    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff">

        <!-- 官方要求的写法，且 android:id="@android:id/tabcontent"不可更改-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

2.Activity：

package com.zcc.fragmenttabhost.activity;

import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;

import com.zcc.fragmenttabhost.R;
import com.zcc.fragmenttabhost.entity.Tab;
import com.zcc.fragmenttabhost.fragment.FindFragment;
import com.zcc.fragmenttabhost.fragment.MeFragment;
import com.zcc.fragmenttabhost.fragment.MessageFragment;
import com.zcc.fragmenttabhost.fragment.NewsFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost mTabHost;

    private LayoutInflater mInflater;

    private List<Tab> mTabs = new ArrayList<>(4);

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

    }

    private void initViews() {
        mInflater = LayoutInflater.from(this);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
    }

    private void initTab() {
        Tab news = new Tab(R.string.news,R.drawable.selector_icon_news,NewsFragment.class);
        Tab find = new Tab(R.string.find,R.drawable.selector_icon_find, FindFragment.class);
        Tab message = new Tab(R.string.message,R.drawable.selector_icon_message, MessageFragment.class);
        Tab me = new Tab(R.string.me,R.drawable.selector_icon_me,MeFragment.class);

        mTabs.add(news);
        mTabs.add(find);
        mTabs.add(message);
        mTabs.add(me);

        for(Tab tab: mTabs){

            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));
            tabSpec.setIndicator(buildIndicator(tab));
            mTabHost.addTab(tabSpec, tab.getFragment(), null);
        }

        //去掉分割线
        mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
        //设置默认选择第一个选项卡
        mTabHost.setCurrentTab(0);
    }

    private View buildIndicator(Tab tab){
        View view = mInflater.inflate(R.layout.tab_indicator, null);

        ImageView img = (ImageView) view.findViewById(R.id.indicator_imageview);
        TextView text = (TextView) view.findViewById(R.id.indicator_textview);
        img.setImageResource(tab.getIcon());
        text.setText(tab.getTitle());
        return view;
    }
}

这里将文字写在了string.xml里面。Tab是一个封装的实体类：

package com.zcc.fragmenttabhost.entity;

public class Tab {
    private int title;
    private int icon;
    private Class fragment;

    public Tab(int title, int icon, Class fragment) {
        this.title = title;
        this.icon = icon;
        this.fragment = fragment;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }


}

接下来是Fragment，由于4个Fragment的代码基本一样，这里只贴一个（布局就不贴了）：

package com.zcc.fragmenttabhost.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.zcc.fragmenttabhost.R;


public class NewsFragment extends Fragment {
    private View view;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.news_fragment,null);
        return view;
    }
}

最后说一下selector：

这是selector_icon_news.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:drawable="@drawable/widget_bar_news_over"/>
    <item android:state_selected="true" android:drawable="@drawable/widget_bar_news_over"/>
    <item  android:drawable="@drawable/widget_bar_news_nor" />
</selector>

最后的最后就是监听底部Tab点击事件

 mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {

                if(tabId == getString(R.string.me)){

                    refData();
                }

            }
        });
private void refData(){

        if(mMeFragment == null){
            Fragment fragment =  getSupportFragmentManager().findFragmentByTag(getString(R.string.me));
            if(fragment != null){
                mMeFragment = (MeFragment) fragment;
                mMeFragment.refData();
            }
        }
        else{
            mMeFragment.refData();

        }
    }