Scaffold en Jetpack Compose
Tags: android, jetpackcompose, kotlin, mobile
Published: 2023-04-04 10:08:29


![Scaffold Jetpack Compose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c6ccoge81n23l93c2lv.png)

---

## Indice
 * [Definición](#definición)
 * [Elementos de scaffold](#elementos-de-scaffold)
 * [Uso básico](#uso-básico)
   * [Función que define el Scaffold](#función-que-define-el-scaffold)
   * [Barra superior](#barra-superior)
   * [Barra inferior](#barra-inferior)
   * [Botón flotante](#botón-flotante)
   * [Contenido principal](#contenido-principal)
 * [Resultado](#resultado)
 * [Referencias](#referencias)

---

### Definición

Es un componente de diseño en Android mediante Jetpack Compose _(un kit de desarrollo de IU basado en kotlin, una de sus principales funciones es accelerar el desarrollo, usar menos código, que sea mas sencillo, etc)_.

El uso fundamental de este composable es tener una **estructura estándar** para los elementos visuales de la app, no es un elemento visual, más bien es un layout. Nos ayuda de manera muy **rápida** a **posicionar** **elementos** comunes en la **pantalla** sin programarlo de cero. También sigue el patrón de diseño Material Design.

---

### Elementos de scaffold

Los elementos que se pueden utilizar en un scaffold son los siguientes:

1. **Top app bar**: es la **barra** de la parte **superior**
1. **Content**: el **contenido** principal de la aplicación
1. **FAB** _(Floating Action Button)_: botón flotante
1. **Bottom Bar**: es la **barra** de la parte **inferior**, o barra de navegación
1. **Drawer**: es el **menú lateral** que se expande/contrae

Todos ellos son opcionales y personalizables, para hacer utilizar cada elemento, debemos generar un `Composable` para dicho elemento, como veremos en el uso básico.

---

### Uso básico


#### Función que define el Scaffold

```java
// Función Composable que crea un Scaffold personalizado
@Composable
fun CustomScaffold() {
    Scaffold(
        // Barra superior
        topBar = { CustomTopBar() },
        
        // Barra inferior
        bottomBar = { CustomBottomBar() },

        // Botón flotante personalizado
        floatingActionButton = { CustomFAB() }, 
        
        // Contenido principal
        content = { padding ->
            CustomContent(padding)
        }
    )
}
```

La función `Scaffold` tiene bastantes parámetros, yo en este caso he utilizado los siguientes:

- `topBar`: hace referencia a la barra superior, acepta un `Composable` de tipo [`TopAppBar`](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp))

- `bottomBar`: hace referencia a la barra inferior, por lo general su uso está destinado a la navegación dentro de la aplicación, acepta un `Composable` [`BottomAppBar`](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1))

- `floatingActionButton`: es el botón flotante que se encuentra por encima de todos los demás elementos, se permite fusionar con la barra inferior, acepta un [`FloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0))

- `content`: hace referencia al contenido principal de la aplicación, se puede poner cualquier `Composable` pero se suelen poner filas, columnas, surface, box, etc. En el ejemplo he utilizado `Column`

Estos cuatro parámetros aceptan funciones de tipo `@Composable` las que muestro a continuación

---

#### Barra superior

```kotlin
@Composable
fun CustomTopBar() {
    TopAppBar(
        // Título de la barra superior
        title = { Text(text = "Hello World!") }, 
    )
}
```

---

#### Barra inferior

```kotlin
@Composable
fun CustomBottomBar() {
    BottomAppBar(content = {
        // Contenido de la barra inferior
        Text(text = "Item One")
    })
}
```

---

#### Botón flotante


```kotlin
@Composable
fun CustomFAB() {
    FloatingActionButton(
        // Color de fondo
        backgroundColor = MaterialTheme.colors.primary,
        // Acción al hacer clic en el botón (sin definir)
        onClick = { /*TODO*/ }) { 
        Text(
            fontSize = 24.sp, // Tamaño de fuente del texto del botón
            text = "+" // Texto del botón
        )
    }
}
```

---

#### Contenido principal


```kotlin
@Composable
fun CustomContent(padding: PaddingValues) {
    Column(
        // Modificadores de estilo de la columna
        modifier = Modifier
            // Ocupar todo el espacio disponible
            .fillMaxSize() 
            .padding(padding),
        
        // Contenido de la aplicación
        content = {
            Text(text = "My app content") 
        }
    )
}
```
### Resultado


![Scaffold Jetpack Compose result on android device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82w57v0j9t11erp8gqup.png)

### Referencias

{% embed https://developer.android.com/jetpack/compose/tutorial?hl=es-419 %}

{% embed https://developer.android.com/jetpack/compose/layouts/material?hl=es-419#scaffold %}