MigLayout: hoja de consulta

Todas las reglas de MigLayout que vas a usar, ordenadas por lo que quieres conseguir: busca la fila que empieza por lo que necesitas y copia el ejemplo. Cómo funciona la rejilla, con ejemplos completos, está en el tema anterior, MigLayout.

Dónde va cada regla#

Java

new MigLayout("wrap 2, insets 20", "[right][grow, fill]", "[]10[]")
//            └ 1. panel ┘        └ 2. columnas ┘         └ 3. filas
panel.add(boton, "span 2, align right");     // 4. el componente

Dentro de cada texto, las reglas van separadas por comas. Si escribes mal una, Java no se queja al compilar, sino al ejecutar: Error parsing Constraint.

1. El panel: el primer texto#

Quiero que…	Regla	Ejemplo
salte de fila cada N componentes	`wrap N`	`"wrap 2"`
haya margen entre el borde y la rejilla	`insets N`	`"insets 20"`, o `"insets 10 20 10 20"` (arriba, izquierda, abajo, derecha)
cambie el hueco entre celdas	`gap X Y`	`"gap 12 8"`
la rejilla ocupe todo el panel	`fill`	`"fill"`, `"fillx"`, `"filly"`
los componentes vayan en columna, no en fila	`flowy`	`"flowy"`
se vean las celdas, para entender qué pasa	`debug`	`"wrap 2, debug"`

2. Las columnas y las filas: el segundo y el tercer texto#

Una pareja de corchetes […] por columna (o por fila). Lo que escribes entre dos corchetes es el hueco que las separa.

Quiero que la columna…	Regla	Ejemplo
alinee lo que tiene	`[left]`, `[center]`, `[right]`	`"[right][grow, fill]"`
crezca cuando se agranda la ventana	`[grow]`	`"[][grow]"`
estire lo que tiene dentro	`[fill]`	`"[grow, fill]"`
mida exactamente N píxeles	`[N!]`	`"[200!]"`
tenga un mínimo, un tamaño normal y un máximo	`[min:normal:max]`	`"[100:200:300]"`
mida lo mismo que otras	`[sg]`	`"[sg][sg][sg]"`: tres columnas iguales

Quiero que el hueco entre columnas sea…	Escribe entre los corchetes	Ejemplo
de N píxeles	`N`	`"[]20[]"`
el normal entre cosas que van juntas	`rel`	`"[]rel[]"`
más grande, para separar grupos	`unrel`	`"[]unrel[]"`
elástico: que se quede con lo que sobra	`push`	`"[]push[]"`: la segunda columna se va al extremo

3. El componente: el texto del `add`#

Las restricciones más usadas de MigLayout: wrap, span, skip, split, growx y push

Dónde se coloca#

Quiero que…	Regla	Ejemplo
después de él, se salte a la fila siguiente	`wrap`	`panel.add(campo, "wrap")`
ocupe varias celdas	`span N`	`"span 2"` (`spany 2` para dos filas)
varios compartan una celda	`split N`	`panel.add(b1, "split 2"); panel.add(b2);`
se deje una celda vacía antes	`skip`	`"skip"`, o `"skip 2"` para dos
vaya a una celda concreta	`cell columna fila`	`"cell 2 1"` (se cuenta desde 0)
empiece una fila nueva antes de él	`newline`	`"newline"`

Qué tamaño tiene#

Quiero que…	Regla	Ejemplo
se estire hasta llenar su celda	`growx`, `growy`, `grow`	`"growx"`
no se estire, aunque la columna sea `fill`	`growx 0`	`panel.add(edad, "growx 0")`
su fila o su columna se quede con el sitio que sobra	`pushx`, `pushy`, `push`	`"growy, pushy"`
tenga un ancho o un alto fijo	`w N!`, `h N!`	`"w 150!"`, `"h 36!"`
tenga un mínimo, un tamaño normal y un máximo	`w min:normal:max`	`"w 100:200:300"`
mida un porcentaje del panel	`w N%`	`"w 50%"`
mida lo mismo que otros	`sg nombre`	`"sg botones"` en cada botón

Nota

grow y push no son lo mismo. grow estira el componente hasta llenar su celda; push hace que la celda se quede con el sitio que sobra en la ventana. Un growy sin sitio que llenar no hace nada: por eso un área de texto que debe crecer a lo alto lleva "growy, pushy".

Cómo se alinea en su celda#

Quiero que…	Regla	Ejemplo
vaya a la izquierda, al centro o a la derecha	`align left`, `align center`, `align right`	`"align right"`
vaya arriba o abajo	`top`, `bottom`, `aligny center`	`panel.add(etiqueta, "top")`

Qué hueco deja#

Quiero que…	Regla	Ejemplo
tenga un hueco a un lado	`gapleft N`, `gapright N`, `gaptop N`, `gapbottom N`	`"gaptop 12"`
se vaya al extremo derecho	`gapleft push`	`"gapleft push"`
se vaya al extremo de abajo	`gaptop push`	`"gaptop push"`
si lo ocultas, no deje hueco	`hidemode 3`	`panel.add(error, "hidemode 3")`

4. Recetas#

Para…	Así
Un formulario	`new MigLayout("wrap 2", "[right][grow, fill]")`, y después etiqueta, campo, etiqueta, campo…
Dos botones a la derecha y del mismo ancho	`panel.add(cancelar, "skip, split 2, growx 0, gapleft push, sg b"); panel.add(guardar, "growx 0, sg b");`
Un campo corto en una columna que se estira	`panel.add(edad, "growx 0")`, o `panel.add(edad, "w 120!")`
Una etiqueta arriba, junto a un área de texto	`panel.add(etiqueta, "top"); panel.add(new JScrollPane(area), "growy, pushy");`
Un mensaje de error debajo de un campo	`panel.add(error, "skip, hidemode 3"); error.setVisible(false);`
Un título a la izquierda y un botón a la derecha	`panel.add(titulo, "span 2, split 2"); panel.add(boton, "gapleft push, wrap");`
Las tarjetas de un dashboard	`new MigLayout("", "[grow, fill, sg][grow, fill, sg][grow, fill, sg]")`, y cada tarjeta dice su `span`
Un menú lateral fijo y el resto que crece	`new MigLayout("fill", "[200!][grow, fill]")`

Errores frecuentes#

Mensaje o síntoma	Qué significa	Cómo se arregla
`IllegalArgumentException: Error parsing Constraint: 'grwox'`	Una regla mal escrita (aquí, `grwox` en vez de `growx`)	Corrige la palabra que dice el mensaje
Todo sale en una sola fila	Falta `wrap`	`"wrap 2"` en el panel, o `"wrap"` en el último componente de cada fila
Los campos no se estiran al agrandar la ventana	La columna no tiene `grow` y `fill`	`"[right][grow, fill]"`
Un componente se estira y no debería	La columna es `fill`	`"growx 0"` en ese componente
Un `growy` no hace nada	Su fila no recibe el sitio que sobra	Añade `pushy`, o `[grow]` a la fila
Dos componentes con `split` quedan muy separados	La celda reparte su sitio entre los dos	`"gapright push"` en el último
Un componente oculto deja un hueco	Sigue ocupando su celda	`"hidemode 3"` en su `add`
No entiendes por qué algo sale donde sale	—	Añade `debug` al panel y mira las celdas