Programación móvil

Componentes Básicos en Jetpack Compose

Aprende a utilizar los componentes básicos de Jetpack Compose para construir interfaces de usuario en Android.

En Jetpack Compose, existen varios componentes básicos que puedes utilizar para construir tu interfaz de usuario. A continuación, te mostraré algunos de los componentes más comunes y cómo utilizarlos.

Text

El componente Text se utiliza para mostrar texto en la pantalla. Puedes personalizar su apariencia utilizando diferentes atributos, como el tamaño de fuente, el color y el estilo. Aquí tienes un ejemplo básico:

@Composable
fun MyText() {
    Text("¡Hola, Jetpack Compose!", fontSize = 24.sp, color = Color.Blue)
}

En este ejemplo, hemos creado un componente de texto que muestra el mensaje "¡Hola, Jetpack Compose!" con un tamaño de fuente de 24sp y un color azul.

Los atributos más comunes para el componente Text son los siguientes:

Atributo	Descripción
`text`	El texto que se mostrará en la pantalla.
`fontSize`	El tamaño de la fuente del texto. Puedes usar unidades como `sp` para especificar el tamaño.
`color`	El color del texto. Puedes usar la clase `Color` para definir colores personalizados o utilizar colores predefinidos.
`fontWeight`	El peso de la fuente, como `FontWeight.Bold` para texto en negrita o `FontWeight.Light` para texto más ligero.
`fontStyle`	El estilo de la fuente, como `FontStyle.Italic` para texto en cursiva.
`textAlign`	La alineación del texto, como `TextAlign.Center` para centrar el texto o `TextAlign.Start` para alinearlo a la izquierda.
`modifier`	Permite aplicar modificaciones al componente de texto, como padding, tamaño, etc.

Button

El componente Button se utiliza para crear botones interactivos en tu interfaz de usuario. Puedes personalizar su apariencia y comportamiento utilizando diferentes atributos. Aquí tienes un ejemplo básico:

@Composable
fun MyButton() {
    Button(onClick = { /* Acción al hacer clic */ }) {
        Text("Haz clic aquí")
    }
}

En este ejemplo, hemos creado un botón que muestra el texto "Haz clic aquí". El atributo onClick se utiliza para definir la acción que se ejecutará cuando el usuario haga clic en el botón.

Los atributos más comunes para el componente Button son los siguientes:

Atributo	Descripción
`onClick`	La acción que se ejecutará cuando el usuario haga clic en el botón.
`enabled`	Controla si el botón está habilitado o deshabilitado. Si se establece en `false`, el botón no será interactivo.
`modifier`	Permite aplicar modificaciones al botón, como padding, tamaño, etc.
`colors`	Permite personalizar los colores del botón utilizando la clase `ButtonDefaults`. Puedes definir colores para el fondo, el texto, etc.
`shape`	Permite personalizar la forma del botón utilizando la clase `Shape`. Puedes definir formas como `RoundedCornerShape` para botones con bordes redondeados.
`contentPadding`	Permite personalizar el padding interno del botón utilizando la clase `PaddingValues`. Puedes definir el padding para cada lado del botón.

Image

El componente Image se utiliza para mostrar imágenes en tu interfaz de usuario. Puedes cargar imágenes desde recursos locales o desde la red. Aquí tienes un ejemplo básico:

@Composable
fun MyImage() {
    Image(painter = painterResource(id = R.drawable.my_image), contentDescription = "Descripción de la imagen")
}

En este ejemplo, hemos creado un componente de imagen que carga una imagen desde los recursos locales utilizando painterResource. El atributo contentDescription se utiliza para proporcionar una descripción de la imagen para mejorar la accesibilidad.

Los atributos más comunes para el componente Image son los siguientes:

Atributo	Descripción
`painter`	El recurso de imagen que se mostrará. Puedes usar `painterResource` para cargar imágenes desde los recursos locales o `rememberImagePainter` para cargar imágenes desde la red.
`contentDescription`	Una descripción de la imagen para mejorar la accesibilidad. Es importante proporcionar una descripción significativa para que los usuarios con discapacidades visuales puedan entender el contenido de la imagen.
`modifier`	Permite aplicar modificaciones a la imagen, como padding, tamaño, etc.
`contentScale`	Controla cómo se escala la imagen dentro de su contenedor. Puedes usar valores como `ContentScale.Crop` para recortar la imagen o `ContentScale.Fit` para ajustar la imagen dentro del contenedor sin recortarla.
`alignment`	Controla la alineación de la imagen dentro de su contenedor. Puedes usar valores como `Alignment.Center` para centrar la imagen o `Alignment.TopStart` para alinearla a la esquina superior izquierda.

TextField

El componente TextField se utiliza para crear campos de texto interactivos donde los usuarios pueden ingresar información. Aquí tienes un ejemplo básico:

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Ingresa tu nombre") }
    )
}

En este ejemplo, hemos creado un campo de texto donde los usuarios pueden ingresar su nombre. El atributo value se utiliza para controlar el valor del campo de texto, mientras que onValueChange se utiliza para actualizar el valor cuando el usuario ingresa texto. El atributo label se utiliza para mostrar una etiqueta dentro del campo de texto.

Los atributos más comunes para el componente TextField son los siguientes:

Atributo	Descripción
`value`	El valor actual del campo de texto. Debe ser controlado por un estado mutable para que el campo de texto sea interactivo.
`onValueChange`	La función que se ejecutará cuando el valor del campo de texto cambie. Esta función debe actualizar el estado mutable que controla el valor del campo de texto.
`label`	Una etiqueta que se muestra dentro del campo de texto para indicar al usuario qué tipo de información se espera que ingrese.
`placeholder`	Un texto de marcador de posición que se muestra cuando el campo de texto está vacío. Proporciona una pista visual sobre el tipo de información que se espera que el usuario ingrese.
`modifier`	Permite aplicar modificaciones al campo de texto, como padding, tamaño, etc.
`keyboardOptions`	Permite configurar las opciones del teclado, como el tipo de teclado que se muestra (por ejemplo, numérico, de texto, etc.) y las acciones del teclado (por ejemplo, "Enviar", "Siguiente", etc.).

Estos son solo algunos de los componentes básicos que puedes utilizar en Jetpack Compose para construir tu interfaz de usuario. Jetpack Compose ofrece una amplia variedad de componentes adicionales, como Card, Checkbox, Switch, entre otros, que te permiten crear interfaces de usuario más complejas y personalizadas. Te recomiendo explorar la documentación oficial de Jetpack Compose para descubrir todos los componentes disponibles y cómo utilizarlos en tus proyectos Android.

Para más información sobre Jetpack Compose, puedes consultar la documentación oficial en el siguiente enlace: Jetpack Compose Documentation.

Filas y Columnas con Jetpack Compose

Aprende a organizar tu interfaz de usuario utilizando filas y columnas en Jetpack Compose.

Las Intenciones en Android con Jetpack Compose

Aprende a utilizar las intenciones en Android para navegar entre pantallas y realizar acciones específicas utilizando Jetpack Compose.