Javafree

Tudo sobre o GridBagLayout.

Publicado por vfpamp em 18/09/2015 - 244.419 visualizações

Por Vitor Pamplona

Tudo sobre o GridBagLayout.

Trabalhando com Swing você, frequentemente, criará telas de propriedades. Que são aquelas telas tradicionais com um label e um componente para edição. Um belo exemplo de uma tela como essa é a tela de cadastro de cliente, que possui vários campos, criando uma dificuldade a mais na hora da confecção da tela.

O GridBagLayout é um gerenciador de layout para swing muito flexível. Similar ao GridLayout, o GridBagLayout possui uma matriz de células, porém cada coluna ou linha da matriz pode ter um tamanho e comportamento diferente, assim como cada célula também possuirá as suas variações. O layout é tão flexível que ao inluir um componente em determinada célula, você até pode definir que o mesmo componente ocupará várias células.


GridBagConstraints
Este layout tem como base a utilização de um GridBagConstraints para cada componente inserido. É este objeto que proporcionará a liberdade que queremos com o layout. A GridBagConstraints é uma classe que não possui métodos, ela servirá simplesmente para armazenar as informações para cada componente adicionado. Vamos dar uma olhada nas propriedades da classe:

anchor: Essa propriedade é utilizada somente quando o tamanho do componente é menor que a área que lhe foi concedida. Normalmente, queremos que nosso componente ocupe toda a área disponível, mas em casos especiais, não podemos redimensionar os componentes. Sendo assim, o layout precisa saber em que posição da célula deixará o componente. Os valores para esse campo são de dois tipos: Absolutos (CENTER, NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, e NORTHWEST) e Relativos (PAGE_START, PAGE_END, LINE_START, LINE_END, FIRST_LINE_START, FIRST_LINE_END, LAST_LINE_START and LAST_LINE_END). O valor padrão é CENTER.

fill: Determina como redimensionar o componente. Valores possíveis para esta propriedade são:
NONE: Não redimensiona o componente
HORIZONTAL: Redimensiona horizontalmente, fazendo com que o mesmo ocupe toda a área horizontal na célula
VERTICAL: Redimensiona verticalmente, fazendo com que o mesmo ocupe toda a área vertical na célula
BOTH: Redimensiona para ambas as direções.
Valor padrão é NONE

gridx e gridy: Especificam a posição X,Y para adicionar o componente. Não é necessário alterar seus valores, pois seu valor padrão é a constante RELATIVE e portanto o layout adicionará após o último componente que foi colocado.
- gridx: Permite especificar qual a posição absoluta horizontalmente que o componente será adicionado.
- gridy: Permite especificar qual a posição absoluta verticalmente que o componente será adicionado.

gridheight e gridwidth Especificam o tamanho do componente baseado em células. É com essa propriedade que você indicará que um componente seu ocupará duas células, ou ocupurá tantas quanto forem necessárias para ir até o final da tela. Lembrem-se é células e não pixels
Nestes valores podem ser utilizadas duas constantes: REMAINDER e RELATIVE. REMAINER fará com que o componente se estique até a última célula. Já o RELATIVE fará com que o componente ocupe todas as casas com excessão da última.
- gridheight: Especifica o número de células que o componente ocupará verticalmente. Valor padrão é 1.
- gridwidth: Especifica o número de células que o componente ocupará horizontalmente. Valor padrão é 1.

insets: Indica as distãncias entre os componentes do lauout. Um Insets possui valores para as 4 direções, cima, baixo, direita e esquerda. Permitindo com isso muita flexibilidade no gerenciador. Valor padrão é new Insets(0, 0, 0, 0)

weight: Essas propriedades especificam um percentual de crescimento da célula, não do componente, quando a mesma precisa ser redimensionada. É dito isso, pois se o componente não pode se redimensionar, pois a propriedade fill do constraint afirma isso, o componente não vai sofrer as alterações, mas a célula irá aumentar.
Com este layout é possível informar que uma célula redimensionará 75% e o outra 25%, portanto o primeiro componente receberá 3 vezes mais tamanho do que o segundo.
O valor padrão é 0 e os valores percentuais são dados em casas decimais, por exemplo: 0.03 é igual a 3%, 1.00 é igual a 100% e por aí vai.
- weightx: Peso em x. Especifica um peso no redimensionamento. Este peso será utilizado para um cálculo que o layout faz para determinar quais as células irão redimensionar horizontalmente, quais não irão, e quais aumentarão mais que os outros.
- weighty: Peso em y. Especifica um peso no redimensionamento. Este peso será utilizado para um cálculo que o layout faz para determinar quais as células irão redimensionar verticalmente, quais não irão, e quais aumentarão mais que os outros.

ipadx e ipady Determina um adicional nas bordas internas do componenete. Essa propriedade modifica o tamanho mínimo de cada componente. O tamanho mínimo será o ipad + o valor mínimo do componente.
- ipadx: Valor para ser adicionado horizontalmente.
- ipady: Valor para ser adicionado verticalmente.

Exemplos.
Como primeiro exemplo iremos utilizar todos os atributos como default.
Relembrando os atributos default:
anchor: CENTER
fill: NONE
gridx: RELATIVE
gridy: RELATIVE
gridheight: 1
gridwidth: 1
insets: Insets(0, 0, 0, 0)
weightx: 0
weighty: 0
ipadx: 0
ipady: 0

Portanto ele ficará assim:



Neste exemplo1 criamos um layout com as células com o mesmo tamanho dos botões. Portanto nenhuma das propriedades invocada, pois o tamanho das células é igual ao tamanho dos componentes. Sendo assim, nenhum ajuste precisa ser feito pelo layout.

Analizando o ipad
Vamos fazer um teste de ipadx e ipady. Coloque esses valores após o setLayout e execute o programa.


Os dois botões ficarão com o tamanho de width = 141 e height= 225. Sem isto o tamanho dele era width = 91, height = 25

Retire a linha adicionada para seguirmos para o próximo teste.

Analizando o insets
Adicione a seguinte linha depois do setLayout;


Isto fará com que cada componente adicionado crie um espaço de 10 pixels para cada uma das direções: acima, abaixo, direita e esquerda. Portanto a distância entre o botão da direita e o da esquerda é 20 pixels.

Retire a linha adicionada para seguirmos para o próximo teste.

Analizando o weight
Se você adicionar as linhas abaixo depois do setLayout, irá alterar o tamanho das células, como foi explicado anteriormente.


Esta alteração fará com que o GridBagLayout ocupe todo o frame, e aumente também o tamanho das células. Portanto agora, o tamanho das células é 300 de largura x 600 de altura. Agora podemos perceber que os dois botões ficam centralizados nas suas células, porque estão ancorados no centro. Como o fill deles é NONE, eles não se redimensionáram.

Deixe esta linha para continuarmos os testes.

Analizando o anchor
Adicione a seguinte linha após o setLayout;


Isto fará com que os botões permaneçam no sudeste de suas células. Portanto, aparecerão no canto inferior direito. Faça testes com as outras constantes, lembrando que as relativas são mais complexas de analisar.

Analizando o fill
Vamos fazer nosso botão preencher toda a tela e se tornar redimensionável.


Irão aparecer como se estivessem em um BorderLayout. Só que ao redimensionar, ambos estarão recebendo a mesma quantidade de pixels para aumentar de tamanho. Assim, eles possuirão sempre as mesmas alturas e larguras. Altere os valores do weightx e weighty para cada um dos botões. Será interessante ver como funciona o cálculo do redimensionamento

De uma olhada neste exemplo:



Agora o botão esquerda ocupará sempre 75% da tela, enquanto o botão da direita, sempre 25%

Analizando gridx e gridy

De uma olhada neste código:


Este código está setando as posições x e y para tornar mais maleável a criação das telas.

Analizando gridwidth e gridheight

Baseado no código do exemplo anterior criei este outro. Com apenas a mudança no primeiro botão, codifiquei o gridwidth para ter o tamanho de duas células. E o layout assim entendeu.



Por aqui termina os nossos testes com esse layout.

Produtividade

Como é possível ser produtivo ao desenhar uma tela dessas a mão? Simples, estipule padrões nas telas. Com esses padrões criaremos um componente específico para a nossa aplicação, tornando a fabricação das telas muito mais rápida.

Digamos que a nossa aplicação tem como padrão colocar os Labels com alinhamento a esquerda, os componentes de edição irão ocupar todo o espaço disponível até o final da tela. Caso houverem duas colunas de componentes de edição na tela o espaço horizontal será dividido entre os dois componentes. Ao ser redimensionada, somente os componentes de edição poderão aumentar o tamanho. Os outros ficarão imóveis.

Bom, agora é só apelar para Orientação a Objeto e detonar um componente para criação rápida de telas. Segue um exemplo abaixo:



Valeu pessoal, espero que vocês tenham gostado.

Vitor Pamplona está cursando o 4º ano de Ciências da Computação da Universidade Regional de Blumenau. É entusiasta do Prevayler e XP, mas participa profissionalmente de um projeto envolvendo Swing, J2EE e Hibernate. É um dos administradores do portal sobre Java e Software Livre JavaFree.com.br

comentários: 28

Tópicos Relacionados