Skins

Un Skin define la identidad visual estructural de todos los componentes: forma (esquinas), grosor de borde, espaciado, sombras e iconos predeterminados. Hay tres integrados: MaterialSkin, IOSSkin y FlutterSkin.

Skin ≠ colores. Skin = estructura/renderer; la paleta (claro/oscuro, primary/surface…) viene del ColorScheme/ThemeMode. Un skin custom cambia forma/espaciado, no color.

Skin predeterminado

Skin.get() retorna MaterialSkin por defecto — o IOSSkin automáticamente en iOS.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles
import dev.crossfly.ui.skin.*;    // Skin, MaterialSkin, IOSSkin, FlutterSkin

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Skin.set(new IOSSkin());   // skin global = estructura/forma iOS (los colores siguen viniendo del tema)
      setLayout(new VerticalLayout());

      // Botones para cambiar el skin global en tiempo real:
      Button material = new Button("Skin Material");
      material.onAction(c -> { Skin.set(new MaterialSkin()); restyle(); });
      add(LAY_AUTO, material);

      Button ios = new Button("Skin iOS");
      ios.onAction(c -> { Skin.set(new IOSSkin()); restyle(); });
      add(LAY_AUTO, ios);

      Button flutter = new Button("Skin Flutter");
      flutter.onAction(c -> { Skin.set(new FlutterSkin()); restyle(); });
      add(LAY_AUTO, flutter);

      // Skin por componente: este botón queda iOS aunque el global cambie.
      Button fixoIos = new Button("Sempre iOS");
      fixoIos.skin(new IOSSkin());
      add(LAY_AUTO, fixoIos);
   }
}

Los fragmentos siguientes muestran solo el núcleo (lo que va dentro de onShow()). Para ejecutar, colócalos en el esqueleto MainWindow de arriba.

Cambiar el skin global

Afecta a todos los componentes que no tienen skin propio:

Skin.set(new IOSSkin());       // toda la UI gana el aspecto iOS
Skin.set(new FlutterSkin());   // … o Flutter

Skin por componente

Sobrescribe el global solo en ese componente:

meuBotao.skin(new IOSSkin());  // este botón queda en iOS, el resto sigue Material

Skin personalizado (cambia forma/espaciado, no color)

Extiende un skin y sobrescribe los hooks de estructura:

public class RoundedSkin extends MaterialSkin {
   @Override public float borderRadius() { return 1.5f; }  // esquinas bien redondeadas
   @Override public float borderThick()  { return 0.05f; } // borde fino
}
// aplicar globalmente:
Skin.set(new RoundedSkin());

Para adaptar colores al claro/oscuro, no toques el skin — usa ColorScheme/ThemeMode (ver Modo claro/oscuro).

Cómo interactúan las capas

Buenas prácticas

• Elige un skin global en el bootstrap; usa .skin(...) por componente solo en excepciones.
• Skin custom = forma/espaciado/sombra. Color y claro/oscuro = ColorScheme.

Errores comunes

• Intentar cambiar colores sobrescribiendo el skin — los colores vienen del ColorScheme, no del skin.
• Mezclar skins diferentes en la misma pantalla sin necesidad (inconsistencia visual).

Véase también

• Esquemas de colores · Modo claro/oscuro · Estilizar componentes