目前最常见的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以内完成这些个操作了
