Entrixy — guía de diseño

El problema

Los iconos Material de androidx.compose.material.icons.outlined.* comparten un tamaño nominal —una rejilla de 24×24— pero la parte dibujada difiere de uno a otro. Dales a todos un simple Modifier.size(24.dp)y unos se verán grandes y pesados (Bolt, Delete) mientras otros parecerán diminutos (Contacts, VpnKey). Hay que calibrarlos a mano.

El método de calibración

1. Hacer una captura de la pantalla con los iconos en sus círculos de 38 dp: nuestro hueco de aterrizaje.
2. Con Python, PIL y numpy, medir el rectángulo delimitador del glifo dibujado: su anchura y altura máximas en píxeles.
3. La fórmula: new_size = 24 × 52 / measured_px, acotado a [18..28].
4. Después centrarlo en el hueco de 38 dp, en vertical y en horizontal.

52 px es el glifo de referencia, Fingerprint; todo se mide contra él como unidad.

El mapa de tamaños resultante

AutoMode

Se usa allí donde antes estaba Bolt: el botón de Automatización en la tarjeta de la clave, el icono de la sección en los ajustes. Tamaño 26 dp, igual que Bolt.

Dónde vive la tabla en el código

IconsDebugSheet.kt — el mapa iconSizeByName. La pantalla de depuración se abre desde SettingsScreen con el botón Iconos UI (depuración): arriba una FlowRow de iconos calibrados y abajo una lista de nombres, tamaños y contextos.

Usamos los roles estándar de Material 3, limitados a propósito a cuatro:

La escala

Acordamos trabajar en múltiplos de 2 / 4 / 8 / 10 / 14 / 16 / 20. Nada de festín o hambruna: los elementos iguales reciben espacios iguales.

Entre tarjetas en el desplazamiento principal

• El contenedor de la hoja inferior: spacedBy(12.dp). Las tarjetas quedan a 12 dp entre sí.
• Relleno horizontal del contenido de la hoja: padding(horizontal=20.dp).

Dentro de una tarjeta (RuleCard)

• Relleno por todos los lados: 16 dp.
• La cabecera —círculo, título, galón, interruptor— es una fila: 14 dp entre el círculo y el título, 12 dp entre el título y el interruptor.
• De la cabecera al cuerpo cuando está desplegada: padding(top=16.dp).
• El cuerpo usa verticalArrangement = spacedBy(16.dp) entre los bloques grandes.

Dentro de una FieldSection (etiqueta más contenido)

• Columnarrangement: spacedBy(2.dp). Solo 2 dp entre la etiqueta en negrita y el estado o la pista debajo, para que se lean como un par de título y pie.
• La misma regla vale para cualquier texto emparejado: 2 dp en todas partes, sin excepciones. Antes había 0 dp en un sitio y 2 dp en otro, y chirriaba.

Botones píldora y estados

• Del estado o la pista al botón píldora: Spacer(10.dp). Lo mismo en Geo, la conexión Wi-Fi y la lista de Wi-Fi.

Los deslizadores son un caso aparte

Un deslizador de Material 3 ocupa unos 48 dp de maquetación por el área táctil mínima, de los cuales la pista visible son solo unos 4 dp en el centro, con unos 22 dp de zona táctil vacía arriba y abajo. De ahí que:

• Entre el texto de estado y el deslizador aplicamos Modifier.offset(y=-16.dp) para acercar el mango al texto.
• Debajo del deslizador aplicamos Modifier.sliderTrim() (un ayudante en GuestAutomationEditor.kt), que informa al padre de una altura de 22 dp en vez de 48 dp. Así, el padding(16.dp) da el mismo hueco del mango al borde inferior que en las tarjetas que acaban en un botón píldora.

Tres niveles de confianza en el invitado

Cada regla —Geolocalización, Wi-Fi, Tiempo, Autorización, Confirmación— y el bloque de Activación toman uno de tres niveles. El círculo del icono de la tarjeta toma el color correspondiente cuando el interruptor está encendido.

Con el interruptor apagado el círculo se vuelve gris (#9AA0A6), sea cual sea el nivel elegido.

Reglas para las descripciones de los niveles

• Escribir en tercera persona, nunca yo ni por mí. Decir el invitado, el ajuste, el valor.
• Una sola frase no lleva punto (véase Reglas del texto).

El círculo de color con icono (38 dp)

Un único hueco de aterrizaje de 38 dp en toda la aplicación:

• Tamaño: 38dp, CircleShape, con el fondo del color del nivel.
• Dentro se sitúa el icono en su tamaño calibrado (véase la sección 1), en blanco.
• El contenido va centrado: contentAlignment = Alignment.Center.

Botones de opción

Envolverlos en Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } para que el centro del círculo del botón coincida con el centro del círculo de color de arriba. Sin la envoltura el botón se desplaza en horizontal, porque RadioButton se dibuja con sus propios rellenos.

Entre el botón de opción y su texto: Spacer(14.dp). Entre filas de botones de opción de un grupo: Column(spacedBy(4.dp)).

El área táctil mínima está desactivada: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — si no, cada fila de opción se hincha hasta 48 dp y rompe el ritmo.

Switch

Un interruptor estándar de Material 3, a la derecha del título de la tarjeta. Apaga la regla entera y entonces no se muestra el color del nivel: el círculo queda gris.

Fila segmentada

Un control propio para cambiar de modo dentro de una regla, hoy solo en Wi-Fi: Por una red concreta / Por las redes de alrededor. Dos elementos en una Row, cada uno con weight(1f):

• El fondo del conjunto: colorScheme.surface, RoundedCornerShape(10.dp), relleno 4dp.
• Seleccionado: fondo de primaryContainer, RoundedCornerShape(8.dp), con texto SemiBold.
• No seleccionado: transparente, grosor normal.

Botones píldora

Un contorno, un icono y texto, del todo redondeados. Para acciones secundarias: Usar la posición actual, Capturar las redes de alrededor. Cuando están desactivados, el contorno y el texto bajan a alpha=0.4.

Slider

Véase la sección 3 sobre offset(y=-16.dp) y sliderTrim(). Antes de un deslizador siempre va un StatusLine con texto de estado (bodySmall, atenuado): 74 m · máximo, el invitado puede reducirlo.

El desplegable de niveles

Se abre tocando la fila de título de la tarjeta: toda la Row salvo el interruptor. Aparece justo bajo la cabecera, a todo el ancho del contenido de la tarjeta. Para eso:

• la Row se envuelve en Box con onGloballyPositioned, y medimos su anchura en dp.
• El DropdownMenu recibe esa anchura mediante DropdownMenuItem con el modificador Modifier.width(anchorWidthDp).

Los elementos del desplegable respiran en vez de ser filas planas: un marcador de color a la izquierda, la etiqueta en negrita y debajo la descripción en letra pequeña y atenuada. Se alinean en vertical por la primera línea, la etiqueta.

El círculo pulsante de Activación

A diferencia de los círculos de color normales de las reglas, el círculo de la cabecera de Activación late.

• Dentro del hueco de 38 dp: un círculo macizo de 28 dp, sin icono.
• Encima: dos ondas concéntricas dibujadas con drawBehind + Stroke(width=6dp).
• El radio de la onda crece linealmente de 14 dp a 19 dp: la mitad de 38 dp.
• El ciclo dura 2000 ms, con la segunda onda desfasada 1000 ms.
• Suavizado: estrictamente LinearEasing. No FastOutSlowInEasing — si no, al reiniciarse el ciclo se ve un tirón.
• La opacidad sigue la curva sin(π·p) × 0.6: en p=0 y p=1 la opacidad es 0, con el pico en el medio. El reinicio es invisible.

Punctuation

Una sola frase en una cadena de la interfaz no lleva punto. Los puntos aparecen solo cuando hay dos frases o más, para separarlas. Vale para toda descripción, pista, estado, indicación emergente, encabezado y frase suelta.

En qué voz escribimos

• No se permite: Fijo el valor exacto, No restrinjo nada.
• Se permite: El valor está fijado, El invitado elige él mismo el ajuste.

Elegir entre un máximo y un valor exacto

En los estados del deslizador en modo amarillo (Predefinido) indicamos sin rodeos la dirección de la libertad:

• Radio: 74 m · máximo, el invitado puede reducirlo: menos es más estricto.
• Umbral Wi-Fi: 5 de 7 · mínimo, el invitado puede aumentarlo: más es más estricto.

En rojo (Bloqueado): 74 m · exactamente / 5 de 7 · exactamente.

Los nombres de los niveles están asentados

Decide el invitado / Predefinido / Bloqueado han cuajado; no los cambiamos.

Un interruptor o una opción de radio no seleccionado

Si una regla tiene estado apagado, exprésalo con un interruptor y no con una opción de radio del tipo No hace falta / No / Apagado. Si no, el usuario tiene dos maneras de apagar lo mismo, y eso confunde.

Examples:

• Authorisation: interruptor apagado significa que no se pide. Encendido muestra solo los tres métodos reales: PIN, biometría, o PIN o biometría.
• Confirmation: interruptor apagado significa que la llamada sale automáticamente. Encendido significa que el invitado pulsa un botón. Dentro no hacen falta botones de opción: el interruptor lo dice todo.

Las coordenadas y las acciones a la derecha

En el bloque de Coordenadas los iconos de copiar y borrar están a la derecha a la altura de ambas líneas (la etiqueta y el estado). Implementado como Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. Los iconos se centran en vertical respecto al par completo.

Mostrar y ocultar el cuerpo de una tarjeta

El cuerpo se despliega solo cuando:

• el interruptor está encendido, y
• el nivel no es OWN: con Decide el invitado el cuerpo carece de sentido, porque no fijamos nada.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) al abrir, shrinkVertically(tween(180)) + fadeOut(tween(120)) al cerrar.

Cuándo mostrar el diálogo Clave añadida

Al recibir una clave de invitado, solo si la aplicación está en pantalla y la clave es nueva y no repetida. Si no, la guardamos en silencio.

• Los iconos LocationOn y LocationOff — acordados píxel a píxel; son la referencia.
• Los iconos ExpandMore y ExpandLess (los galones) — 22 dp, sin calibrar.
• La fórmula de opacidad en PulsatingCircle — sin(π·p) × 0.6. Cualquier simplificación estropea el resultado.
• LinearEasing en las ondas. Ease-in o ease-out provocan un tirón.
• Los nombres de los niveles — Decide el invitado / Predefinido / Bloqueado. Las descripciones han cambiado con el tiempo; los nombres están fijados.
• FieldSection spacedBy(2.dp) — deliberadamente apretado, para el par de título y pie.