En la actualidad, el estilo de página de inicio de la aplicación más común es la pestaña inferior + varios Fragmentos. Hay muchas formas de escribirlo. Básicamente, escribe el diseño en el diseño y luego realiza el procesamiento de clics en la Actividad, cambia de estilo, cambia de página y registra eventos. Espera un minuto. Para simplificar esta operación, se escribió un pequeño control para encapsular una ondícula, y se usó un archivo de configuración para manejar este modo.
Cómo utilizar
Muy fácil, primero agregue el diseño al diseño y use container_id para especificar el diseño del contenedor de 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" />
Luego agregue el archivo de configuración al archivo de activos 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"
}
]
}
De esta manera, puede inicializar un estilo de página de inicio de pestaña + Fragmento en la parte inferior. ¿Cómo configurar Fragment?
Por favor mire lo anterior, hemos agregado un campo a cada pestaña: tagTag, sí, basado en esta etiqueta, luego vamos a obtener un fragmento.
Por tanto, el tercer paso es implementar la interfaz definida en el control en la Actividad, e implementar el método de obtención del Fragmento, aquí debemos corresponder una a una según las etiquetas previamente configuradas.
@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;
}
}
Este paso está básicamente bien, y todo el efecto y el modo están bien. Entonces, si necesita realizar otras operaciones especiales al cambiar de pestaña, ¿qué debe hacer? No se preocupe, si la interfaz está expuesta al exterior, si implementa este método onClickChangeTab(), puede realizar algunas acciones como informar eventos y cambiar estilos.
Principio de realización
El principio es muy simple. De hecho, es la encapsulación. Las cosas que se escribirán en el diseño y algunas cosas que se juzgarán y procesarán en la actividad se colocan aquí para un procesamiento centralizado, que es conveniente y de mala educación.
Paso 1: lee la configuración
Lea el archivo en afirma, léalo en una secuencia y conviértalo en una cadena, y luego conviértalo en nuestro archivo de configuración basado en esta cadena json.
Paso 2: generar la vista
Generado directamente por código, imagen + texto, dividido igualmente por peso, evento de clic establecido
Paso 3: haga clic para cambiar de pestaña
Aquí, hay dos pasos, uno es cambiar el estilo de pestaña y el otro es cambiar el fragmento. A lo que debemos prestar atención aquí es al cambio de Fragmento. Usamos métodos hide y show. Si es la primera vez que agrega, use el método add. No puede usar el método replace para cambiar, de lo contrario el fragmento se reconstruirá y todos los ciclos de vida deberán reiniciarse. Otra vez.
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()
}
Paso 4: proporcione algunos métodos comunes al exterior
Debido a que a menudo se usan métodos como obtener el fragmento actual, el índice actual, etc., estos métodos están expuestos al exterior. Debido a que se mantienen la lista de fragmentos, la lista de vistas y el índice actual, estos métodos están bien para eliminar directamente los valores correspondientes.
Efecto
¿cómo decir? La cantidad de código en la actividad y el diseño es mucho menor, y es relativamente simple de usar. De todos modos, siento que es muy fragante.
Debido a que está leyendo el archivo de configuración para establecer el diseño, lleva tiempo echar un vistazo. Básicamente, estas operaciones se completan en 100 ms
