Android 使用 FragmentTabHost 实现底部菜单

例子效果

为了方便这里只做了一个菜单，需要多个的重复添加即可

项目结构

代码

MainActivity

package com.diabin.minda;

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.TabHost;
import android.widget.TextView;

import com.diabin.minda.fragment.HomeFragment;

//FragmentTabHost使用第一步，继承FragmentActivity
// AppCompatActivity已经默认继承FragmentActivity，不用再继承FragmentActivity
public class MainActivity extends AppCompatActivity {

    //读取View时用到LayoutInflater
    private LayoutInflater mInflater;

    private FragmentTabHost mTabhost;

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

        mInflater = LayoutInflater.from(this);

        //找到mTabhost
        mTabhost = this.findViewById(android.R.id.tabhost);

        //第二步，重写setup方法
        //第三个参数是用来装载FragmentTabHost的容器的id
        mTabhost.setup(this,getSupportFragmentManager(),R.id.realtabcontent);

        //第三步，添加TabSpec
        TabHost.TabSpec tabSpec = mTabhost.newTabSpec("home");


        View view = mInflater.inflate(R.layout.tab_indicator,null);
        ImageView img = (ImageView)view.findViewById(R.id.icon_tab);
        TextView text = (TextView)view.findViewById(R.id.txt_indicator);

        //添加自己的背景图片
        img.setBackgroundResource(R.drawable.selector_icon_home);
        //添加背景图片下方的文字
        text.setText("主页");

        //第四步，往Indicator添加View
        tabSpec.setIndicator(view);

        //最后一步，将tabSpec添加到mTabhost
        mTabhost.addTab(tabSpec,HomeFragment.class,null);

    }
}

HomeFragment

package com.diabin.minda.fragment;

import android.support.v4.app.Fragment;

public class HomeFragment extends Fragment {

}

改变字体颜色的xml文件
selector_tab_text.xml

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

改变图片的xml文件
selector_icon_home.xml

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



    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
    <item android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />

</selector>

activity_main.xml

<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:clipToPadding="true"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >
    //真正用来装载FragmentTabHost
    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/bg_color"
        />
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        >
        //官方要求的写法（id也要照写），只写入，不使用
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"
            />
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

tab_indicator.xml

<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"
    android:paddingBottom="3dp"
    android:paddingTop="3dp"
    >


    <ImageView
        android:id="@+id/icon_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:id="@+id/txt_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/selector_tab_text"
        android:layout_marginTop="2dp"
        android:textSize="12sp"
        />

</LinearLayout>

两张图片
icon_home_press.png

icon_home.png

**结语：**由于这里只添加了一个底部菜单，所以没有演示点击改变图片的效果，多添加几个菜单，点击切换时是有图片变换效果的。另外，添加多个底部菜单时，由于很多操作是重复的，所以可以将其进行封装，这里就不演示了。