【需求】 如下图：

效果图.png

【解决方案】
现在大部分App底部都有一个菜单，实现这个功能也有好多办法：

（1） TabHost+Fragment
（2） RadioGroup+Fragment
（3） FragmentTabHost+Fragment
（4） 5.0以后有个新控件，BottomNavigator

【总】 今天重点介绍下FragmentTabHost

ragmentTabHost简单介绍

首先我们看下官方文档的介绍

image

【结构图】

图片.png

【步骤】

（1）FragmentTabHost 布局问题

<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"
          tools:context=".activity.FragmentTabHostActivity">

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

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

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0"/>

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

【注意】
1.id必须是android:id=”@android:id/tabhost”这个；
2 里面的FrameLayout的id必须是android:id=”@android:id/tabcontent”

（2）初始化Tab集合

    //实例化5个Tab类的对象
    Tab Tab_home = new Tab(R.drawable.home, R.string.home, HomeFragment.class);
    Tab Tab_hot = new Tab(R.drawable.notice, R.string.notice, NoticeFragment.class);
    Tab Tab_discover = new Tab(R.drawable.apply, R.string.apply, ApplyFragment.class);
    Tab Tab_cart = new Tab(R.drawable.product, R.string.product, ProductFragment.class);
    Tab Tab_user = new Tab(R.drawable.user, R.string.mine, UserFragment.class);

    //将这5个对象加到一个List中
    mTabs.add(Tab_home);
    mTabs.add(Tab_hot);
    mTabs.add(Tab_discover);
    mTabs.add(Tab_cart);
    mTabs.add(Tab_user);

（3）setUp

    mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup(this, getSupportFragmentManager(), R.id.realcontent);
    mInflater = LayoutInflater.from(this);

（4）添加TabSpec

  //通过循环实例化一个个TabSpec ,并调用其中setIndicator方法 , 然后将TabSpec加到TabHost中
    for (Tab tab : mTabs) {
        TabHost.TabSpec tabSpec = mTabHost.newTabSpec(String.valueOf(tab.getText()));
        tabSpec.setIndicator(buildView(tab));
        mTabHost.addTab(tabSpec, tab.getFragment(), null);
    }

    // 通过这行代码可以去除掉底部菜单5个图表之间的分割线
    mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}


    //设置Indicator中的View
    private View buildView (Tab tab){
        View view = mInflater.inflate(R.layout.tab_indicator, null);
        ImageView Tab_img = (ImageView) view.findViewById(R.id.tab_img);
        TextView Tab_txt = (TextView) view.findViewById(R.id.tab_txt);
        Tab_img.setBackgroundResource(tab.getImage());
        Tab_txt.setText(tab.getText());
        return view;
    }

（5）设置默认显示第一个

    mTabhost.setCurrentTab(0);

（6）设置没有分割线

mTabhost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);

【完整代码】

/**
 * @Author Lee
 * @Time 2018/2/28
 * @Theme FragmentTabHost使用
*/

public class FragmentTabHostActivity extends FragmentActivity {

private FragmentTabHost mTabHost;
private LayoutInflater mInflater;
private ArrayList<Tab> mTabs = new ArrayList<Tab>(5);

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fragment_tab_host);
    initTab();
}

private void initTab() {

    //实例化5个Tab类的对象
    Tab Tab_home = new Tab(R.drawable.home, R.string.home, HomeFragment.class);
    Tab Tab_hot = new Tab(R.drawable.notice, R.string.notice, NoticeFragment.class);
    Tab Tab_discover = new Tab(R.drawable.apply, R.string.apply, ApplyFragment.class);
    Tab Tab_cart = new Tab(R.drawable.product, R.string.product, ProductFragment.class);
    Tab Tab_user = new Tab(R.drawable.user, R.string.mine, UserFragment.class);

    //将这5个对象加到一个List中
    mTabs.add(Tab_home);
    mTabs.add(Tab_hot);
    mTabs.add(Tab_discover);
    mTabs.add(Tab_cart);
    mTabs.add(Tab_user);

    mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup(this, getSupportFragmentManager(), R.id.realcontent);
    mInflater = LayoutInflater.from(this);


    //通过循环实例化一个个TabSpec ,并调用其中setIndicator方法 , 然后将TabSpec加到TabHost中
    for (Tab tab : mTabs) {
        TabHost.TabSpec tabSpec = mTabHost.newTabSpec(String.valueOf(tab.getText()));
        tabSpec.setIndicator(buildView(tab));
        mTabHost.addTab(tabSpec, tab.getFragment(), null);
    }

    // 通过这行代码可以去除掉底部菜单5个图表之间的分割线
    mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}


    //设置Indicator中的View
    private View buildView (Tab tab){
        View view = mInflater.inflate(R.layout.tab_indicator, null);
        ImageView Tab_img = (ImageView) view.findViewById(R.id.tab_img);
        TextView Tab_txt = (TextView) view.findViewById(R.id.tab_txt);
        Tab_img.setBackgroundResource(tab.getImage());
        Tab_txt.setText(tab.getText());
        return view;
    }
}

【xml 布局】 activity_fragment_tab_host

<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"
          tools:context=".activity.FragmentTabHostActivity">

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

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

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0"/>

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

</LinearLayout>

【tabSpac布局】 tab_indicator

<?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:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">

<ImageView
    android:id="@+id/tab_img"
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:background="@mipmap/ic_launcher"
    />

<TextView
    android:id="@+id/tab_txt"
    android:text="主页"
    android:textSize="@dimen/textSize_18sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>

【tab实体类】

/**
* @Author Lee
* @Time 2018/2/28
* @Theme 主页tab对应实体
*/

public class Tab {

private int Image;
private int Text;
private Class Fragment;

public Tab(int image, int text, Class fragment) {
    Image = image;
    Text = text;
    Fragment = fragment;
}

public int getImage() {
    return Image;
}

public void setImage(int image) {
    Image = image;
}

public int getText() {
    return Text;
}

public void setText(int text) {
    Text = text;
}

public Class getFragment() {
    return Fragment;
}

public void setFragment(Class fragment) {
    Fragment = fragment;
    }
}

【来源】 https://www.jianshu.com/p/491386d6435c