Saltar al contenido
CrossFly es 100% open sourceSíguenos en GitHub
CrossFlyCrossFly
Empezar

Esta página fue traducida automáticamente del portugués y puede contener errores. La versión en portugués es la canónica.

Toque y feedback

La respuesta visual al toque (el “hundirse” de un botón) es automática en CrossFly cuando el estilo está marcado como presionable — no escribes ninguna animación.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle

/** 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();
      setLayout(new VerticalLayout());

      // Feedback automático de pulsación: estilo custom con .pressable()
      Button botao = new Button("Enviar");
      botao.style(new ComponentStyle().backColor(0xFF0173ED).pressable());
      add(LAY_AUTO, botao);

      // Control manual de opacidad para representar estado (seleccionado/deshabilitado)
      Label item = new Label("Item");
      add(LAY_AUTO, item);
      boolean selecionado = false;
      item.alpha(selecionado ? 1f : 0.5f);
      Component.repaint();

      // Alterna el estado con feedback: al tocar, resalta el ítem volviéndolo a opaco
      botao.onAction(c -> { item.alpha(1f); Component.repaint(); });
   }
}

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

Feedback automático de presión — pressable()

Marca el estilo como pressable() y el componente se anima solo al ser tocado (usando la animationDuration del tema):

Button b = new Button("Enviar");
b.style(Styles.button());   // el estilo de botón del Skin ya viene con .pressable()

// en un estilo custom, habilítalo explícitamente:
b.style(new ComponentStyle().backColor(0xFF0173ED).pressable());

El Skin genera el estado pressed a partir del normal (por defecto, fondo más oscuro). Para personalizar, define un pressedStyle(...) (ver Estilizar componentes).

Duración del feedback

Viene de Styles.animationDuration (por defecto 0.3s) y es leída por los estilos del Skin. Ajuste global:

Styles.animationDuration = 0.2f;   // toque más "seco" en toda la app

Control manual de opacidad — alpha(...)

Para atenuar/resaltar un componente por tu cuenta (ej.: deshabilitar visualmente, destacar selección), usa alpha(float) (0 = transparente, 1 = opaco):

item.alpha(selecionado ? 1f : 0.5f);
Component.repaint();

Para una transición suave de opacidad, combínalo con AlphaAnimation:

AlphaAnimation fade = new AlphaAnimation(item.alpha(), 1f, 0.2f);
fade.onUpdate(() -> { item.alpha(fade.getValue()); Component.repaint(); }).start();

Buenas prácticas

  • Deja que pressable() se encargue del feedback de toque — no animes la presión a mano.
  • Usa alpha() para estado (deshabilitado/seleccionado); anima solo cuando la transición aporte.
  • Un componente deshabilitado ya se atenúa por el disabledAlpha del estilo — no lo dupliques.

Errores comunes

  • Estilo custom sin pressable() → botón sin feedback al toque.
  • Setear alpha(...) y olvidar Component.repaint() (render bajo demanda).

Véase también

¿Te resultó útil esta página?