Jetpack Compose Bottom Sheet a través de Android View con Kotlin Extension | de Ziv Kesten | junio 2022

En este artículo, aprenderá cómo crear extensiones de Kotlin para Actividades y Fragmentos para mostrar las hojas inferiores con Jetpack Compose.Foto de Ziv Kesten Uno de los componentes de interfaz de usuario más elegantes que existen es la hoja inferior, una vista que aparece en la parte inferior de la pantalla para mostrar información o mostrar un flujo interno sin abandonar por completo el contexto actual. Es utilizado por muchas aplicaciones hoy en día y probablemente también lo encontrará útil en su aplicación algún día.La visualización de una hoja inferior con la redacción de Jetpack está bien documentada en varios artículos, incluido este de Ahmed Tikiwa, ingeniero de software sénior @Luno, que usa ModalBottomSheetLayout. Y la de Rasul Aghakishiyev, que se centra en BottomSheetScaffold. En nuestro ejemplo, elegimos ModalBottomSheetLayout porque nos permite obtener un cambio de estado tocando fuera del área de la hoja inferior. Si solo vino aquí por el código, aquí está, lo desglosaremos más adelante en esta publicación en los componentes de la interfaz de usuario que desearíamos poder escribir con Jetpack Compose y cargarlos en nuestras vistas heredadas. ¡Gracias a la interoperabilidad de Jetpack Compose, podemos! Para hacer esto, declaramos una función de extensión para Actividad como estaActividad divertida en línea.mostrarAsBottomSheet(contenido: @Composable (() -> Unidad) -> Unidad) { val viewGroup = this.findViewById(android.R.id.content) as ViewGroup addContentToView(viewGroup, contenido)} Esta función de extensión, que se puede llamar en cualquier lugar de cualquier actividad, toma una función componible como parámetro: contenido: @Componible (() -> unidad) -> Unidad Tenga en cuenta que el tipo de parámetro es una función de Kotlin que toma una lambda como parámetro. Esta es la acción para cerrar la hoja de abajo cuando queremos que este evento se propague desde un evento de usuario (botón de cierre, respuesta de red, etc.). Extraemos el grupo de vista de contenido, que es la vista superior en cada jerarquía de actividad, encima de todo el contenido actualmente en Activity.private addContentToView(viewGroup: ViewGroup,contenido: @Composable (() -> unidad) -> unidad) { viewGroup.addView(ComponerVista(viewGroup.context).apply {setContent {BottomSheetWrapper(viewGroup, this, contenido)}})}Para agregar contenido componible al viewGroup, simplemente le agregamos un nuevo ComposeView. ComposeView es una vista de Android que puede configurar un contenido componible usando la extensión setContent, al igual que una actividad. En su bloque de contenido colocaremos nuestro componible envuelto en un BottomSheetWrapper, este contenedor contendrá toda la lógica de la hoja inferior y será llenado por el componible contenido pasamos como parámetro a la función de extensión. Así que la mayor parte de nuestro trabajo se realiza en BottomSheetWrapper: como en cualquier código destinado a ser utilizado en una composición, almacenamos variables como «remember elements.val coroutineScope» = «rememberCoroutineScope()val». modalBottomSheetState = RememberModalBottomSheetState(ModalBottomSheetValue.Hidden)val isSheetOpened = Remember { mutableStateOf(false) }Así que mantenemos tres valores almacenados:

alcance de rutina

Queremos tener un CoroutineScope recordado para poder lanzar animaciones de diapositivas en una rutina para mejorar el rendimiento. val coroutineScope = RememberCoroutineScope()

estado de la hoja inferior

El estado de la hoja inferior también se pasa al contenido para que pueda reaccionar a los cambios. También se observa en un LaunchedEffect para garantizar que el menú desplegable completo de la hoja inferior exit()val modalBottomSheetState = RememberModalBottomSheetState( ModalBottomSheetValue.Hidden)

Hoja inferior abierta – estado inicial

También recordaremos el estado inicial de la hoja, ya que queremos saber si la hoja se ha cerrado debido a una acción del usuario o si está cerrada porque aún no la hemos animado en la vista compose ofrece dos componentes que definen el modal. comportamiento de la hoja inferior y, como se mencionó antes, usamos ModalBottomSheetLayout para nuestro caso porque obtenemos el comportamiento de colapsar la hoja inferior al hacer clic fuera de la hoja inferior. ModalBottomSheetLayout(sheetBackgroundColor = Color.Transparent, sheetState = modalBottomSheetState,sheetContent = { contenido { // acción de paso para hacer clic en el botón de cerrar en el contenidocoroutineScope.launch {modalBottomSheetState.hide() // Disparador lanzadoEfecto}}}) {}Vamos a anotarlo con el sheetState que recordamos anteriormente y content(), ese es el contenido real de la hoja inferior y se proporcionará como un parámetro para la función de extensión. También proporcionamos al contenido una acción para realizar una vez que se inicia el flujo de salida dentro del contenido (por ejemplo, presionando una X o el botón de cerrar). Hay tres escenarios en los que queremos cerrar y quitar la hoja inferior.Que Haga clic en el evento del contenido se manejó antes cuando declaramos: sheetContent = { contenido { // acción de paso para hacer clic en el botón de cerrar en el contenidocoroutineScope.launch {modalBottomSheetState.hide() // Trigger LaunchedEffect}}}Haga clic de nuevo en el dispositivo ejecuta el mismo código en la función auxiliar BackHandler proporcionada por Jetpack Dependencies // haciendo clic en el dispositivoBackHandler {coroutineScope.launch {modalBottomSheetState.hide() // activa el LaunchedEffect}} Como hemos visto, cuando terminamos con la hoja inferior, llamamos a hide() en modalBottomSheetState, que anima la hoja fuera de la vista del la hoja todavía está adjunta al viewGroup de la actividad. Recuerda que llamamos: viewGroup.añadirVer(ComposeView(…).apply { … } Así que todavía tenemos que eliminar la vista de la actividad, y podemos hacerlo escuchando el estado de la hoja inferior con LaunchedEffect// Acto basado en el estado ocultoLaunchedEffect(modalBottomSheetState.currentValue) { if (modalBottomSheetState.currentValue) { ModalBottomSheetValue.Hidden -> { parent.removeView(composeView)}diferente -> { Log.i(ETIQUETA, «Hoja inferior ${…} Estado») }}}

caso extremo

Hay un caso límite cuando inicializamos la actividad por primera vez y la hoja inferior está oculta. En este caso, usaremos isSheetOpened que recordamos anteriormente y mostraremos la hoja inferior mientras inicializamos esa variable. En todos los demás casos llamamos removeView// Acto basado en el estado ocultoLaunchedEffect(modalBottomSheetState.currentValue) { if (modalBottomSheetState.currentValue) { ModalBottomSheetValue.Hidden -> {si {esHojaAbierta -> parent.removeView(composeView)de lo contrario -> {isSheetOpened = truemodalBottomSheetState.show()}}}diferente -> { Log.i(TAG, «Bottom sheet ${…} state») }}}¡Y eso es todo! Ahora podemos mostrar componibles como hojas inferiores, sobre la vista anterior de Android, se pueden arrastrar hacia arriba y hacia abajo, mostrar información importante o iniciar un flujo de página sin salir visualmente del contexto de flujo principal.El código de ejemplo completo está disponible en GitHub y se puede ver aquí. Espero que hayan disfrutado el artículo, aplaudan y sigan! Pero solo si crees que me lo merezco 😉