目前最常见的app首页样式就是底部tab+多个Fragment这样的方式了，写法也有很多，基本都是在布局里写好布局，然后Activity中做点击的处理，切换样式啦、切换页面啦、记录事件啦等等。为了简化这一操作，稍微写了个控件封装了一小波，使用配置文件的方式处理这种模式。

使用方式

very easy，首先布局中添加该布局，并使用container_id指定Fragment的容器布局

    <FrameLayout
        android:id="@+id/flFragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/layoutBottomTab" />

    <oms.mmc.tempapplication.HomeBottomTabLayout
        android:id="@+id/layoutBottomTab"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:background="#e9e9e9"
        app:container_id="@id/flFragmentContainer" />

然后再assets文件中添加配置文件 tab.json

{
  "tabs": [
    {
      "tabName": "黄历",
      "tabTag": "key_almanac_fragment",
      "iconNormal": "main_home_tab_huangli_normal",
      "iconSelected": "main_home_tab_huangli_selected",
      "textColorNormal": "#A4A3A3",
      "textColorSelected": "#C02221"
    },
    {
      "tabName": "工具",
      "tabTag": "key_discover_fragment",
      "iconNormal": "main_home_tab_tool_normal",
      "iconSelected": "main_home_tab_tool_selected",
      "textColorNormal": "#A4A3A3",
      "textColorSelected": "#C02221"
    },
    {
      "tabName": "福利",
      "tabTag": "key_makemoney_money_fragment",
      "iconNormal": "main_home_tab_money_normal",
      "iconSelected": "main_home_tab_money_selected",
      "textColorNormal": "#A4A3A3",
      "textColorSelected": "#C02221"
    }
  ]
}

如此便能初始化一个底部tab+Fragment的首页样式了。那Fragment怎么配置进去呢？

请看上面，我们每个tab都加了一个字段：tagTag，对的咯，就是根据这个tag，然后我们去拿到一个fragment。

所以第三步，就是在Activity中，实现控件中定义的接口，实现获取Fragment的方法，这里就要根据之前配置的tag，逐一去对应。

    @Override
    public Fragment getFragmentByTag(@NotNull String tabTag) {
        switch (tabTag) {
            case TAG_HOME_ALMANAC:
                return AlmanacService.getAlmanacFragment();
            case TAG_HOME_CALENDAR:
                return CalendarService.getCalendarFragment();
            case TAG_HOME_TOOLS:
                return DiscoverService.getDiscoverFragment();
            case TAG_HOME_MONEY:
                return MakeMoneyService.getMoneyFragment();
            case TAG_HOME_USER_CENTER:
                return UserService.getUserHomeMainFragment();
            default:
                return null;
        }
    }

到这一步基本上就ok了，整个效果和模式就ok了，然后，如果你需要在tab切换的时候做一些其他特殊操作，咋办？别急，对外暴露了接口的，实现这个方法onClickChangeTab()，可以做一些上报事件、更改样式等行为操作。

实现原理

原理很简单咯，其实就是封装，把那些要在布局中写的东西、要在activity中判断处理的一些东西，都放在这里集中处理了，使用方便粗暴。

第一步：读配置

读取asserts中的文件，以流的方式读取并转换成字符串，然后根据这个json字符串转换成我们的配置文件。

第二步：生成视图

直接都是代码生成的，图片+文字，用weight平分，设置点击事件

第三步：点击切换tab

这里的话，要分两步，一是切换tab的样式，二是切换fragment。这里要注意的是Fragment的切换，我们用的是hide和show方法，如果是第一次添加，就用add方法，不能用replace方法去进行切换，否则fragment要重建，所有生命周期又得重来一遍。

    private fun setFragmentSelected(selectedIndex: Int) {
        val beginTransaction = mFragmentManager?.beginTransaction()
        val tabConfig = mTabs?.get(selectedIndex)
        var fragmentByTag = mFragmentManager?.findFragmentByTag(tabConfig?.tabTag)
        val isFirstInit: Boolean
        if (fragmentByTag == null) {
            fragmentByTag = mCallback?.getFragmentByTag(tabConfig?.tabTag ?: "")
            mFragmentList?.set(selectedIndex, fragmentByTag)
            isFirstInit = true
        } else {
            isFirstInit = false
        }
        mFragmentList?.forEachIndexed { index, fragment ->
            if (fragment != null && fragment.isAdded) {
                beginTransaction?.hide(fragment)
            }
        }
        if (isFirstInit) {
            beginTransaction?.add(mFragmentContainerId, fragmentByTag!!, tabConfig?.tabTag)
        } else {
            beginTransaction?.show(fragmentByTag!!)
        }
        beginTransaction?.commit()
    }

第四步：对外提供一些常用的方法

由于经常会要用到获取当前fragment、当前index等等方法，所以对外暴露出这些方法，因为是维护了fragment列表、视图列表、当前index，所以这些方法，直接取出相应值就ok了

使用效果

怎么说呢？Activity和布局中代码量少了挺多的，使用也比较简单，反正我感觉是挺香的。

因为是读取配置文件设置布局，所以耗时也看了一下，基本上100ms以内完成这些个操作了

TIM截图20191123115504.png