Esta página fue traducida automáticamente del portugués y puede contener errores. La versión en portugués es la canónica.
Responsividad en todos los layouts
CrossFly usa píxeles lógicos y recalcula el layout al rotar/redimensionar. Si sigues los principios de abajo, la pantalla se readapta sola — sin código de resize.
Este es el resumen práctico. La guía completa, con un ejemplo en cada layout y un ejemplo de pantalla de extremo a extremo, es el Capítulo 36 — Buenas Prácticas de Layout y Responsividad.
Los 5 principios
- Nunca posiciones en píxeles fijos. Usa fracciones,
RelativeyLAY_FILL/LAY_AUTO/RelSize.FILL. - Deja que el layout mida.
LAY_AUTO,RelSize.AUTOSIZEyRelative.AUTOreportan el tamaño natural. - El espaciado también escala. Padding (
ingap) y margen (outgap) víaGap.ofFont(...)/Gap.ofScreen(...). - Un área “elástica”. Marca un componente con
LAY_FILL(Vertical/Horizontal) para absorber el sobrante. - El resize es automático — si usaste los elementos anteriores. Solo el posicionamiento manual (
setBounds) exige código.
La herramienta central: Relative
| Forma | Resultado |
|---|---|
Relative.ofFont(1.5f) |
1,5 × altura de la fuente (escala con la fuente/DPI) |
Relative.ofScreen(0.8f) |
80% de la dimensión de la pantalla |
Relative.ofScreen(0.5f, ScreenSize.MIN) |
50% del lado menor (se adapta a portrait/landscape) |
Relative.FULL / AUTO / CENTER |
rellena el padre / tamaño de contenido / centra |
Ejemplo completo (copiar, pegar y ejecutar)
package com.exemplo;
import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
private Component painel; // reorganizado en cada resize/rotación
private Component lista;
private Component detalhe;
@Override
public void onShow() throws Exception
{
super.onShow();
lista = new Label("Lista");
detalhe = new Label("Detalhe");
painel = new Component();
setLayout(new VerticalLayout(Position.START, Position.START));
add(LAY_FILL, painel);
// onReposition() se llama en el primer layout y en cada resize/rotación:
// elige la disposición del panel según la orientación.
}
@Override
protected void onReposition() throws Exception
{
painel.removeAll();
if (Screen.isLandscape) {
painel.setLayout(new HorizontalLayout());
painel.add(0.5f, lista); painel.add(0.5f, detalhe);
} else {
painel.setLayout(new VerticalLayout());
painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
}
}
}
Los fragmentos siguientes muestran solo el núcleo (lo que va dentro de
onShow()). Para ejecutar, colócalos en el esqueletoMainWindowanterior.
Cuándo el arreglo debe CAMBIAR por orientación
Sobrescribe Window.onReposition() (llamado antes del relayout) y vuelve a elegir el layout:
@Override protected void onReposition() throws Exception {
painel.removeAll();
if (Screen.isLandscape) {
painel.setLayout(new HorizontalLayout());
painel.add(0.5f, lista); painel.add(0.5f, detalhe);
} else {
painel.setLayout(new VerticalLayout());
painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
}
}
Breakpoints: usa Screen.minSize (el lado menor es estable entre orientaciones), ej.: tablet = Screen.minSize >= 600.
Ver también
- Catálogo de layouts · Primitivas:
Relative/Gap