Compose Apuntes

@Composable

@Preview

content: @Composable ( ) → Unit

Modifier

• padding
• clip
• border
• size

Column

Row

MaterialTheme

• Colors

• Typografy

  .body2

  .h6

• Shapes

Surface

Crossfade

Text
TextField

Image

• preferredHeight
• fillMaxWidth
• contentScale

Button

• Button
• OutlinedButton
• TextButton
• IconButton
• IconToggleButton

FloatingActionButton

Spacer

Divider

Shape

• RoundedCornerShape
• CircleShape

MutableState

value

onValueChange

Stack

Icon

LazyColumnFor(substituye RecyclerView)

Scaffold

State Hoisting

Card

Diseños Compuestos Estándar

Con los siguientes bloques puede construir todo lo que necesites.

• Column: emplaza los elementos verticalmente en la pantalla

• Row: emplaza los elementos horizontalmente en la pantalla

  • Soportan configurar la gravedad de los elementos contenidos
  ​​​​Row(verticalGravity = Alignment.CenterVertically)
  

• Stack: emplaza un elemento encima de otro.

Puedes construir tus propios compuestos combinando estos bloques y hacer diseños más elaborados.

Modifiers

Backlog Componentes

• @Composable
• @Preview
• Column
• Row
• ScrollableRow
• ScrollableColumn
• FlowColumn
• RadioButton
• RadioGroup
• Checkbox
• TriStateCheckbox
• Arrengement
• Switch
• SnackBar
• Border
• AndroidView
• Gestures
• Stack
• FlowRow
• Padding
• Spacer
• ConstraintLayout
• Using drawable resources
• Using string resources
• Single value animation
• Crossfade animation
• Progress Indicator
• Card
• FloatingActionButton
• Snap animations
• Tween animations
• Vector animations
• Animated values
• Spring animation
• Accessing value resources
• Color resource
• Testing
• Text
• Alert Dialog
• Styling Text
• Scaffold
• Drawer
• Button
• Shapes
• Slider
• Shape
• Color
• TextField
• Handling Locales in Text
• Handle fonts
• Modifiers
• Alignment Line
• Alignment
• Color Painter
• Image painter
• Android Image Asset
• Table
• App Bar
• Bottom App Bar
• Theming
• Data table
• Divider
• Emphasis
• Icon Button
• List Item
• Surface
• Tab
• TabRow
• Typography
• Icons
• Units
• Previewing Components
• Handling State
• Font resource

Material Widgets

Jetpack Compose Terms

Architecture

Unidirectional data flow

A pattern where data flows in only one direction. Imagine that we have a screen made up of components, and these components are made up of smaller components and so on. Data flows down from parent components to their child components, and events flow up from child components to their parent components, which are responsible for altering the child components’ state in response to these events.

Example:

The above screen could be said to consist of three components: one for username, one for name, and another for birthday. When the screen is created, the data is perhaps retrieved from a database and then passed from the screen to each of these components. For example, the username “frodo” is passed to the username component.

If the user enters a value “frodobaggins” and presses the “Save” button, the internal state of the username component does not yet change. Rather, the save user event is sent to the screen, and the screen saves the data to the database and sends the new state again to the child components.

Imperative user interfaces

A style of developing user interfaces where the developer specifies how to mutate the user interface in response to events. The Android view system is an example of this style. While the views are usually described in XML, the user interface tree hierarchy is mutated in response to events. For example, to set text on a TextView, findViewById is used to find the view and then setText to alter the text.

Declarative user interfaces

A style of developing user interfaces where the developer describes what the user interface should look like based on the current state. The user interface is not mutated in response to events, but rather the whole user interface is regenerated when the state changes, and only the necessary changes are applied. Jetpack Compose is an example of this style.

Basics

Composable functions

The building block of creating user interfaces in Jetpack Compose. To create a composable function, annotate a Kotlin function with @Composable. The function is unrestricted in terms of parameters but must not have an explicit return type (other than Unit).

Example:

Below is an example of a composable function that will display a screen with movie details.

@Composable
fun NetflixClone(movie: Movie){
  ...
}

Modifiers

Alters a composable's size, layout, behaviour, and appearance. To create a modifier, use one of the Modifier factory methods. Modifiers can be chained, but note that the order of modifiers matter. If a particular composable doesn't take the explicit argument that you want, it's probably a modifier.

Example:

Below is an example of a text composable displaying the name of an epic movie ️🧝‍♀️ with a little vertical and horizontal padding.

Text(
        text = "The Fellowship of the Ring",
        style = MaterialTheme.typography.h1,
        modifier = Modifier.padding(
                horizontal = 16.dp, 
                vertical = 4.dp
        )
)

Recomposition

Automatically calling a composable function again with new data, so that the emitted user interface components are redrawn with new data. Jetpack Compose uses intelligent recomposition to only redraw what needs to change.

Layout & design

LazyRow / LazyColumn

Composables that only compose and lay out child composables visible in the viewport. This is particularly for use cases where there are many child composables in the layout, so that the user interface stays performant. LazyRow lays out components horizontally, whereas LazyColumn lays out components vertically.

Content composable lambda

Lambda taking a content parameter with the type @Composable () -> Unit

Slot APIs

Takes several content composable lambdas to place the resulting components in specific predefined positions in a user interface. Scaffold, defined below, is an example of a composable that makes use of slot APIs.

Scaffold

Simplifies creating a Material Design user interface by providing a structure in which to slot in your custom composables. For example, Scaffold provides slots for the top bar, bottom bar, floating action button, drawer and your screen content.

State

State

A value that changes over time. For example, a simple variable is state. The family of stateOf functions create value holders where the Compose scope will subscribe to the changes of the value.

State hoisting

A pattern where a child composable's state is moved (or hoisted) to its parent composable. This means that only the parent composable can change the state, and the child component is therefore stateless.

Stable

Composables that only accept stable inputs can safely be skipped during recomposition. Primitives, String objects, and interfaces are inherently stable, and objects explicitly marked with the @Stable annotation can be made stable.

Key composable

Identifies content composables with a key of one or more values. Keys do not have to be globally unique, only among the composables at the specific call site.

Remember

A composable function that stores the state in memory during initial composition and returns the value during recomposition.

Advanced topics

Side-effect

Change to the state of the application that happens outside the scope of the composable function.

Effect

A composable function that doesn't emit user interface components but causes side effects to run when composition completes. An example of an effect in Jetpack Compose is LaunchedEffect, which launches a composable lifecycle-aware coroutine outside the composable.

Compose y los recursos

// Integer
integerResource(id = R.integer.some_integer)

// Array
integerArrayResource(id = R.array.some_integer_array)

// Boolean
booleanResource(id = R.bool.is_feature_enabled)

// Dimens
dimensionResource(id = R.dimen.padding)

// String
stringResource(id = R.string.app_name)

Text(
    text = stringResources(id = R.string.app_name_formatting),
     formatArgs = arrayOf(stringRespurce(id = R.string.app_name)),
     modifier = Modifier.padding(16.dp)
)

   
// Color
colorResource(id = R.color.colorPrimary)

// Drawable or Vector
painterResource(id = R.drawable.ic_logo)

Icon(
    painter = painterResource(id = R.drawable.ic_logo)
    contentDescription = stringResource(id = R.string.content_description)
)