Android 底部菜单栏

工具：
Android studio
*环境：
compileSdkVersion 28
com.android.tools.build:gradle:3.3.2
*
简介：使用到了FragmentTabHost实现底部导航，实现图标选中与未被选中的变化，更改了开启时默认页面。

效果：

Activity的布局

    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tabHost">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <FrameLayout
                android:id="@+id/realtabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"/>
            <FrameLayout
                android:layout_weight="1"
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp">
            </FrameLayout>
            <TabWidget
                android:background="#ffffff"
                android:divider="@null"
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </TabWidget>
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

新建一些Fragment

新建的时候选择BlankFragment即可，需要几个底部导航的页面就新建几个，我这里需要四个页面，新建完后将Fragment里面的代码需要修改，因为在我的环境下默认的新建代码运行会出bug。

下面给出一个fragment代码示例

//周边
public class MapFragment extends Fragment {
    //在Fragment声明context
    private Context context;
    
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_map, container, false);
    }
}

准备小图标

各种小图标可以去阿里巴巴矢量图标库下载，十分方便便捷。

每种图标下载一个被选中和未被选中两种状态的颜色，然后放入项目-android-app-res-drawable文件夹

为每种图标新建一个drawable资源文件，这个文件用于图标是否被选中发生的变化
例如：对于地图的图标，新建一个文件名为：ic_tab_map_selector.xml
文件内容如下,其中ic_tab_map_normal和ic_tab_map_selected是两个放在drawable文件夹里png格式的图标

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_map_normal" android:state_selected="false"/>
    <item android:drawable="@drawable/ic_tab_map_selected" android:state_selected="true"/>
</selector>

文字的变化

图标下方文字的颜色也会随选中状态的更改而变化，需要新建一个drawable资源文件

例如：txt_tab_selector.xml

文字颜色的正常状态和选中后的颜色可以自行在res-values-color.xml文件里面添加，tab_txt_selected和tab_txt_normal是我自行添加的颜色（淡蓝色和灰色）。

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

图标文字组合布局

新建一个layout资源文件，这是个包含图片和文字的view。

作用：简单来说这个view将图片和文字组成一个整体，我的项目中需要四个导航，所以实例化了四个这样的view，分别赋予不同的图片和文字，放入底部导航栏中，这样就有了导航栏的四个图标显示。

tab_item.xml文件

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

    <ImageView
        android:layout_marginTop="8dp"
        android:layout_gravity="center"
        android:id="@+id/iv_tab"
        android:layout_width="22dp"
        android:layout_height="22dp"/>

    <TextView
        android:textSize="13dp"
        android:id="@+id/tv_tab"
        android:layout_marginTop="2dp"
        android:layout_gravity="center"
        android:textColor="@drawable/txt_tab_selector"
        android:text="首页"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

Activity里面的代码

这里将Activity的超类更改为了FragmentActivity

public class MainActivity extends FragmentActivity{
    //底部导航栏
    FragmentTabHost mTabHost;
    //需要导航的页面
    private Class[] fragments = new Class[]{
            MapFragment.class,
            EducationFragment.class,
            AmuseFragment.class,
            ServiceFragment.class};
    //导航页面对应小图标
    private int[] imgRes = new int[]{
            R.drawable.ic_tab_education_selector,
            R.drawable.ic_tab_map_selector,
            R.drawable.ic_tab_amuse_selector,
            R.drawable.ic_tab_service_selector
    };
    //导航页面对应的文字
    private String[] tabTitles=new String[]{
            "教育",
            "周边",
            "娱乐",
            "服务"
    };

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

        //初始化底部导航菜单栏
        initFragmentTabhost();

    }

    private void initFragmentTabhost() {
        //初始化
        mTabHost=findViewById(R.id.tabHost);
        mTabHost.setup(MainActivity.this, getSupportFragmentManager(), android.R.id.tabcontent);

        //循环初始化每个fragment对应的图标，并且加入tabhost
        for (int i = 0; i < fragments.length; i++) {
            //得到设置图标和文字的view
            View inflate = getLayoutInflater().inflate(R.layout.tab_item, null);
            //设置view里面的图片和文字
            ImageView ivTab = inflate.findViewById(R.id.iv_tab);
            TextView tvTab = inflate.findViewById(R.id.tv_tab);
            ivTab.setImageResource(imgRes[i]);
            tvTab.setText(tabTitles[i]);
            //将改好的view放入tabhost
        	mTabHost.addTab(mTabHost.newTabSpec(tabTitles[i]).setIndicator("tab1").setIndicator(inflate), fragments[i], null);
        }
        //设置初始化页面为第二个页面：“周边“”
        mTabHost.setCurrentTab(1);
    }
}