Hola Underc0der's!!
Jetpack compose es una forma de programar aplicaciones Android junto con kotlin ya que para la lógica y la vista puedes usar el mismo lenguaje, la diferencia es que para una función de la vista debe ser con la siguiente anotación @Composable, estas funciones solo se pueden llamar desde otra función composable, ya dentro de un proyecto de Android studio baja la empty activity y un proyecto composable, podemos agregar un nuevo file con el formato kt y ponerle el nombre que queramos, ya abierto el archivo en el ide de Android la forma mas simple seria:
@Composable
fun MiBotonParaGuardar() {
//FILA (Row)
//COLUMNA (Column)
//ESPACIO (Spacer)
//TEXTO (Text)
//ICONO (Icon)
//IMAGEN (Bitmap,drawable)
//LIENZO (Canvas)
//QUERY (Room)
//SERVICIO (Retrofit)
//ETC ETC ETC
}
para esta ocasión usaremos un Text() el cual tiene todas estas propiedades:
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
onTextLayout: ((TextLayoutResult) -> Unit)? = null,
style: TextStyle = LocalTextStyle.current
si usamos el Android studio por defecto podemos leer la documentación de cada uno y profundizar en su funcionamiento. Centrémonos en el primero que es de tipo string, para llamarlo y pasarle el parámetro del texto que queremos imprimir en la pantalla de Android seria la siguiente:
Text(text = "Hi! Underc0der!!")
y con esto ya tenemos nuestro texto en la pantalla sin ningún formato, ni layout ni nada, un solo texto en pantalla y ya.
Para visualizarlo sin iniciar el emulador o nuestro dispositivo solo hay que agregar la anotación arriba de Composable de la siguiente forma:
@Preview
@Composable
fun MiBotonParaGuardar() {
Text(text = "Hi! Underc0der")
}
Se vería de la siguiente forma:
(https://i.imgur.com/K9VcKyC.jpeg)
Así es como se ve nuestro saludo, para ver el background y que no se vea así hay que agregar entre paréntesis seguido de la anotación @Preview(showbackground = true)
(https://i.imgur.com/fZYEvUi.jpeg)
Nuestro texto esta listo para ser leído, ahora agregaremos nuestro botón de la siguiente manera debajo de nuestro text:
Button(onClick = { /*TODO*/ }) {
}
(https://i.imgur.com/Oiba1Ik.jpeg)
Como vemos se encima uno de otro porque no tiene un layout básico que los ordene, usaremos un componible Column que ordenara uno debajo de otro nuestro texto y nuestro nuevo botón:
(https://i.imgur.com/6nSArgm.jpeg)
Para ponerle una descripción a nuestro botón usaremos de nuevo nuestro componible Text()
@Preview(showBackground = true)
@Composable
fun MiBotonParaGuardar() {
Column {
Text(text = "Hi! Underc0der")
Button(onClick = { /*TODO*/ }) {
Text(text = "Recomponer")
}
}
}
ahora declararemos una variable que inicializaremos vaciá y para que el componible lo recomponga debemos agregarle un estado con la siguiente definición:
var underSaludo by remember { mutableStateOf("") }
se declara el by remember para permitir la delegacion de los valores usando el estado que necesitamos para recomponer nuestro underSaludo y a nuestro onClick le agregaremos el nuevo valor a nuestra variable que queremos que recomponga en la vista:
(https://i.imgur.com/3mTWUed.jpeg)
Excelente, tenemos todo para poner a prueba nuestro boton: ;D
(https://i.imgur.com/lnaCQeY.jpeg)
Y listo, nuestra UI recompone nuestro string, para alinear nuestros dos componentes dentro de nuestra columna agregamos paréntesis seguido del componible
Column(horizontalAlignment = Alignment.CenterHorizontally) y lo que hará es alinear dando direccion a todo el contenido.
(https://i.imgur.com/RQWFidn.jpeg)
Deseo sea útil esta pequeño tutorial sobre como recomponer la vista de Android usando solo kotlin con jetpack compose.
Hail Underc0de!