Audiocurso Jetpack Compose 12 TopAppBar
La TopAppBar es uno de los elementos que podemos utilizar como topBar en el Scaffold de nuestras pantallas en Jetpack Compose.
Este contenido está restringido.
Adquiere alguna formación.
O suscríbete para difrutar de los audios y vídeos exclusivos de Los androides Premium.
A destacar es que le podemos pasar un title con el texto que queremos que se muestre en la barra superior. Es muy común usar un simple Text para esto.
También un navigationIcon si es que queremos añadirle un icono para navegar a otra pantalla. Esto es lo típico de ponerle una flecha hacia atrás a la izquierda del título para volver a la pantalla anterior. Es recomendable usar un IconButton para esto.
También tenemos actions. Que son los distintos iconos a continación del title para hacer acciones determinadas. Igualmente, los IconButton harán buen fit aquí al ser clicables.
Por cierto, vaya mejora esto con respecto a toda la parafernalia que había que hacer con los menús históricamente en Android. Lo de crear un XML, el onOptionsItemSelected() y demás boilerplate.
Y finalmente, por supuesto, podemos cambiar el color de fondo con backgroundColor y el del contenido con contentColor.
Internamente la TopAppBar se compone de lo siguiente:
@Composable fun TopAppBar( title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable (() -> Unit)? = null, actions: @Composable RowScope.() -> Unit = {}, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = AppBarDefaults.TopAppBarElevation )Y si lo que quieres es hacer una versión más custom, pues muy fácil, usa este otro TopAppBar: 😉
@Composable fun TopAppBar( modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = AppBarDefaults.TopAppBarElevation, contentPadding: PaddingValues = AppBarDefaults.ContentPadding, content: @Composable RowScope.() -> Unit )
Hay un detalle que me gustaría resaltar y es que por ejemplo, en el caso del title, puedes simplemente pasarle un Text. Pero como admite un composable como parámetro, realmente puedes hacer cosas mucho más elaboradas. Y lo mismo con los otros parámetros. Esto es parte de la magia de Jetpack Compose. 🧙♂️
En la siguiente lección del audiocurso, seguiré explicándote más elementos que se usan en el día a día.