Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

Responsividade em todos os layouts

O CrossFly usa pixels lógicos e recalcula o layout ao rotacionar/redimensionar. Se você seguir os princípios abaixo, a tela se readapta sozinha — sem código de resize.

Este é o resumo prático. O guia completo, com exemplo em cada layout e um exemplo de tela de ponta a ponta, é o Capítulo 36 — Boas Práticas de Layout e Responsividade.

Os 5 princípios

  1. Nunca posicione em pixels fixos. Use frações, Relative e LAY_FILL/LAY_AUTO / RelSize.FILL.
  2. Deixe o layout medir. LAY_AUTO, RelSize.AUTOSIZE e Relative.AUTO reportam o tamanho natural.
  3. Espaçamento também escala. Padding (ingap) e margem (outgap) via Gap.ofFont(...) / Gap.ofScreen(...).
  4. Uma área “elástica”. Marque um componente com LAY_FILL (Vertical/Horizontal) para absorver a sobra.
  5. Resize é automático — se você usou os itens acima. Só posicionamento manual (setBounds) exige código.

A ferramenta central: Relative

Forma Resultado
Relative.ofFont(1.5f) 1,5 × altura da fonte (escala com a fonte/DPI)
Relative.ofScreen(0.8f) 80% da dimensão da tela
Relative.ofScreen(0.5f, ScreenSize.MIN) 50% do menor lado (adapta a portrait/landscape)
Relative.FULL / AUTO / CENTER preenche o pai / tamanho de conteúdo / centraliza

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   private Component painel;      // reorganizado a cada resize/rotação
   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() é chamado no primeiro layout e a cada resize/rotação:
      // ele escolhe o arranjo do painel conforme a orientação.
   }

   @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);
      }
   }
}

Os trechos abaixo mostram só o miolo (o que vai dentro de onShow()). Para rodar, coloque-os no esqueleto MainWindow acima.

Quando o arranjo deve MUDAR por orientação

Sobrescreva Window.onReposition() (chamado antes do relayout) e reescolha o 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: use Screen.minSize (o menor lado é estável entre orientações), ex.: tablet = Screen.minSize >= 600.

Veja também

Esta página foi útil?