Alinhando componentes utilizando o alinhamento X/Y

Ao definir a propriedade de layout de um componente para nulo, você pode utilizar a janela Personalizar Layout para alinhar componentes com base em seus limites.

Com o layout definido para nulo, cada componente é independentemente colocado e dimensionado na interface com o usuário com base em seu limite. Para evitar a tarefa cansativa e propensa ao erro de atualizar individualmente o limite de cada componente, você pode utilizar o editor visual para alinhar e ajustar os tamanhos e a colocação dos componentes com base nas relações.

Quando o layout é definido para nulo, a janela Personalizar Layout tem várias ações que funcionam em um grupo de componentes. Você pode:
  • Alinhar componentes com base nas bordas
  • Alinhar componentes com base nos pontos centrais
  • Fazer com que os componentes tenham a mesma largura e altura
  • Distribuir componentes de maneira uniforme, vertical e horizontalmente, através de um determinado espaço

Para alinhar, redimensionar e distribuir os componentes no layout nulo:

  1. Nas visualizações Design ou Beans Java, selecione dois ou mais componentes que deseja alinhar ou ajustar em relação uns com os outros. Você pode utilizar a ferramenta de seleção Marquee ou manter pressionada a tecla Ctrl para selecionar vários componentes. O último componente selecionado é o componente de controle ou âncora. O componente âncora é indicado por alças de redimensionamento pretas, enquanto que os outros componentes selecionados têm alças brancas.
  2. Execute uma das seguintes etapas para abrir a janela Personalizar Layout:
    • Clique com o botão direito do mouse e selecione Personalizar Layout no menu pop-up.
    • Clique em Personalizar Layout mostrar ícone da janela de alinhamento na barra de ferramentas.

    Janela Personalizar Layout para layout nulo
  3. Para alinhar os componentes uns com os outros, utilize os botões a seguir:
    • Alinhar à esquerda - alinha os componentes com a borda esquerda do componente âncora.
    • Alinhar ao centro - alinha os componentes com o centro do componente âncora ao longo de um plano vertical.
    • Alinhar à direita - alinha os componentes com a borda direita do componente âncora.
    • Alinhar na parte superior - alinha os componentes com a borda superior do componente âncora.
    • Alinhar no meio - alinha os componentes com o meio do componente âncora ao longo de um plano horizontal.
    • Alinhar na parte inferior - alinha os componentes com a borda inferior do componente âncora.
  4. Para ajustar o tamanho dos componentes selecionados, utilize os botões a seguir:
    • Corresponder largura - faz com que os componentes tenham a mesma largura que o componente âncora.
    • Corresponder altura - faz com que os componentes tenham a mesma altura que o componente âncora.
  5. Para distribuir o espaçamento dos componentes, primeiro proceda de uma das seguintes maneiras para especificar os limites da área de distribuição:
    • Clique em nada para utilizar o contêiner como a área de distribuição (que é o procedimento padrão) ou clique em Ocultar caixa de distribuição se a caixa já estiver sendo mostrada.
    • Clique em Mostrar caixa de distribuição e arraste as alças da caixa para criar o tamanho desejado para a distribuição.
    Em seguida, utilize um dos botões a seguir para distribuir os componentes:
    • Distribuir horizontalmente - faz com que os componentes tenham a mesma largura que o componente âncora.
    • Distribuir verticalmente - faz com que os componentes tenham a mesma altura que o componente âncora.

Por exemplo, é possível selecionar três componentes JButton e especificar que eles devem ter a mesma largura e devem ser alinhados uns com os outros no limite à esquerda. O último componente JButton selecionado é utilizado como âncora ou controle, para os outros dois botões. A ação Alinhar à esquerda alinha os componentes JButton com a borda esquerda do último componente JButton selecionado e a ação Corresponder largura faz com que os componentes JButton selecionados tenham a mesma largura que o componente JButton de controle.

Os botões de alinhamento na janela Personalizar Layout serão ativados apenas se as seguintes condições forem verdadeiras:

Além de alinhar os componentes e fazer a correspondência de largura e altura, você pode distribuir os componentes. Quando os componentes são distribuídos, suas posições são alteradas para que eles sejam espaçados de maneira uniforme dentro de uma caixa delimitadora definida por seu contêiner pai. Por exemplo, antes de clicar no botão Distribuir verticalmente botão distribuir verticalmente, três botões possuem espaçamento irregular, conforme mostrado na seguinte imagem:


beans conforme colocados na visualização Design

Depois de clicar em Distribuir verticalmente, os componentes são espaçados uniformemente, conforme mostrado na seguinte imagem:


beans distribuídos verticalmente

Observe que os três botões são distribuídos dentro da altura do pai (a borda superior e inferior do quadro).

Para permitir um maior controle sobre a área utilizada para a distribuição, você pode ativar a caixa de distribuição, clicando no botão Mostrar caixa de distribuição caixa de distribuição. Ao clicar nesse botão, é desenhada uma caixa ao redor da área de todos os componentes selecionados. Essa caixa pode ser movida e redimensionada utilizando suas alças. Quando você utiliza uma caixa de distribuição e a caixa está ativa, a caixa de distribuição define a área que é utilizada para reposicionar os controles. Sem uma caixa de distribuição, o contêiner pai define a área utilizada para distribuição. A seguinte imagem mostra uma caixa de distribuição:


beans com caixa de distribuição

A caixa pode ser movida e redimensionada, conforme mostra a seguinte imagem:


beans na caixa de distribuição redimensionada

Se você realizar uma distribuição vertical enquanto utiliza a caixa de distribuição, a distribuição ocorrerá dentro dos limites da caixa, em vez de nos do contêiner pai, conforme mostra a seguinte imagem:


beans distribuídos verticalmente dentro da caixa

Tópico pai: Fazendo o Layout de Componentes Utilizando o Editor Visual

Conceitos Relacionados
Gerenciadores de Layout e Contêineres

(C) Copyright IBM Corporation 1999, 2004. Todos os Direitos Reservados.