FragmentTabHost的使用

使用FragmentTabHost+Fragment实现底部tab切换，直接先上效果图

1.MainActivity的布局：

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context="com.wkw.fragmenttabhost.MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">
        
    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:paddingBottom="4dp"

        android:background="@color/white"
        android:layout_height="wrap_content">

        <android.support.v4.app.FragmentTabHost
            android:id="@+id/main_tabhost"
            android:paddingTop="4dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/line_color" />

    </FrameLayout>

</LinearLayout>

2：MainActivity的代码

package com.wkw.fragmenttabhost;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;


/**
 * Author:  wkw
 * Email:
 * Date:    2016/1/14
 * Description:
 */
public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener {

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

    private void init() {
        tabHost = (FragmentTabHost)findViewById(R.id.main_tabhost);
        tabHost.setup(this, getSupportFragmentManager(), R.id.fl_content);
        initTab();
        if (android.os.Build.VERSION.SDK_INT > 10) {
            tabHost.getTabWidget().setShowDividers(0);
        }
        tabHost.setCurrentTab(0);
        tabHost.setOnTabChangedListener(this);
    }

    private void initTab() {
        Tabs[] tabs = Tabs.values();
        int tabSize = tabs.length;
        for (int i = 0; i < tabSize; i++) {
            Tabs mainTab = tabs[i];
            TabHost.TabSpec tab = tabHost.newTabSpec(getString(mainTab.getResName()));
            View indicator = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_indicator, null);
            TextView title = (TextView) indicator.findViewById(R.id.tab_title);
            Drawable drawable=this.getResources().getDrawable(mainTab.getResIcon());
            title.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null, null);
            title.setText(getString(mainTab.getResName()));
            tab.setIndicator(indicator);

            tab.setContent(new TabHost.TabContentFactory() {
                @Override
                public View createTabContent(String tag) {
                    return new View(MainActivity.this);
                }
            });
            tabHost.addTab(tab, mainTab.getClz(), null);
        }
    }

    @Override
    public void onTabChanged(String tabId) {
        final int size = tabHost.getTabWidget().getTabCount();
        for (int  i = 0; i < size; i++){
            View view = tabHost.getTabWidget().getChildAt(i);
            if(i == tabHost.getCurrentTab()){
                view.setSelected(true);
            } else {
                view.setSelected(false);
            }
        }
        supportInvalidateOptionsMenu();
    }
}

3：Tabs是一个枚举（存放着所有信息，这样就不会显得很混乱）

package com.wkw.fragmenttabhost;

import com.wkw.fragmenttabhost.fragment.CommunityFragment;
import com.wkw.fragmenttabhost.fragment.FamilyFragment;
import com.wkw.fragmenttabhost.fragment.FindFragment;
import com.wkw.fragmenttabhost.fragment.HomeFragment;
import com.wkw.fragmenttabhost.fragment.MyFragment;

/**
 * Author:  wkw
 * Email:
 * Date:    2016/1/14
 * Description:
 */
public enum Tabs {

    HOME(0, R.string.main_tab_name_home,R.drawable.tab_ioc_home, HomeFragment.class),
    COMMUNITY(1, R.string.main_tab_name_community,R.drawable.tab_ioc_community, CommunityFragment.class),
    FIND(2,R.string.main_tab_name_find,R.drawable.tab_ioc_find, FindFragment.class),
    FAMILY(3,R.string.main_tab_name_family,R.drawable.tab_ioc_family, FamilyFragment.class),
    MY(4, R.string.main_tab_name_my,R.drawable.tab_ioc_my, MyFragment.class);

    public int getIdx() {
        return idx;
    }

    public void setIdx(int idx) {
        this.idx = idx;
    }

    public int getResName() {
        return resName;
    }

    public void setResName(int resName) {
        this.resName = resName;
    }

    public int getResIcon() {
        return resIcon;
    }

    public void setResIcon(int resIcon) {
        this.resIcon = resIcon;
    }

    public Class<?> getClz() {
        return clz;
    }

    public void setClz(Class<?> clz) {
        this.clz = clz;
    }

    private int idx;
    private int resName;
    private int resIcon;
    private Class<?> clz;

    Tabs(int idx, int resName, int resIcon, Class<?> clz) {
        this.resName = resName;
        this.resIcon = resIcon;
        this.idx = idx;
        this.clz = clz;
    }
}

4：tab_indicator是每个tab的布局

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

    <TextView
        android:layout_marginTop="5dp"
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@drawable/tab_ioc_home"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:text=""
        android:textColor="@color/tab_txt"
        android:textSize="12sp" />
</RelativeLayout>

5：tab_ioc_home:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@mipmap/main_home_down" />
    <item android:state_checked="true" android:drawable="@mipmap/main_home_down" />
    <item android:state_selected="true" android:drawable="@mipmap/main_home_down" />
    <item android:drawable="@mipmap/main_home_up" />
</selector>

6:tab_txt：

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

注意FragmentTabHost在切换tab的时候，是会对fragment的ui进行重新的绘制，要是想避免这个问题，可以对fragment进行缓存，以下是FamilyFragment的代码：

public class FamilyFragment extends Fragment {

    private View mView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        if(null != mView) {
            ViewGroup parent = (ViewGroup) mView.getParent();
            if(null != parent) {
                parent.removeView(mView);
            }
        } else {
             mView = inflater.inflate(R.layout.fragment_family,container,false);
        }
        return mView;
    }
}