Onderdelen uitlijnen met X/Y-uitlijning

Wanneer u de layouteigenschap voor een component op null instelt, kunt u het venster Opmaak aanpassen gebruiken om onderdelen uit te lijnen op basis van hun grenzen.

Als de layout is ingesteld op null, wordt iedere component onafhankelijk geplaatst op basis van de randen en wordt onafhankelijk de grootte bepaald in de gebruikersinterface. Om te voorkomen dat u de randen van de componenten afzonderlijk moet berekenen, wat tijdrovend is en waarbij fouten kunnen optreden, kunt u met Visual Editor de grootte en positie van de componenten uitlijnen op basis van relaties.

Als de layout is ingesteld op null, biedt het venster Layout aanpassen een aantal acties voor groepen componenten. U kunt het volgende doen:
  • Componenten uitlijnen op basis van randen
  • Componenten uitlijnen op basis van centreerpunten
  • Componenten maken met dezelfde hoogte en breedte
  • Componenten gelijkmatig verdelen in een bepaalde ruimte, zowel horizontaal als verticaal

Om componenten in een null-layout uit te lijnen, te verdelen of de grootte te wijzigen, gaat u als volgt te werk:

  1. Selecteer in de view Ontwerp of Java-beans twee of meer componenten die u wilt uitlijnen of in relatie tot elkaar wilt aanpassen. U kunt de markeringsfunctie gebruiken of de Ctrl-toets ingedrukt houden om meerdere componenten te selecteren. De laatst geselecteerde component is de controlecomponent, ook wel anker genoemd. Het anker wordt aangegeven met zwarte formaatgrepen, terwijl de andere componenten witte formaatgrepen hebben.
  2. Open op een van de volgende manieren het venster Layout aanpassen:
    • Klik met de rechtermuisknop en kies Layout aanpassen in het voorgrondmenu.
    • Klik op de werkbalk op de knop Layout aanpassen Knop Layout aanpassen.

    Venster Layout aanpassen voor null-layout

  3. Om de componenten met elkaar uit te lijnen gebruikt u de volgende knoppen:
    • Links uitlijnen - lijnt de componenten uit op de linkerrand van het anker.
    • Centreren - lijnt de componenten uit op het midden van het anker langs een verticale lijn.
    • Rechts uitlijnen - lijnt de componenten uit op de rechterrand van het anker.
    • Boven uitlijnen - lijnt de componenten uit op de bovenrand van het anker.
    • Midden uitlijnen - lijnt de componenten uit op het midden van het anker langs een horizontale lijn.
    • Onder uitlijnen - lijnt de componenten uit op de onderrand van het anker.
  4. Om de grootte van de geselecteerde componenten aan te passen, gebruikt u de volgende knoppen:
    • Breedte aanpassen - geeft componenten dezelfde breedte als het anker.
    • Hoogte aanpassen - geeft componenten dezelfde hoogte als het anker.
  5. Om de afstand tussen de componenten in te delen, doet u een van de volgende dingen om het kader van het distributiegebied aan te geven:
    • Klik nergens op als u de container als distributiegebied wilt gebruiken (het standaardgedrag) of klik op Distributiekader verbergen als het kader al wordt weergegeven.
    • Klik op Distributiekader afbeelden en versleep de formaatgrepen tot de distributie de gewenste grootte heeft.
    Gebruik vervolgens een van de volgende knoppen om de componenten te distribueren:
    • Horizontaal distribueren - geeft componenten dezelfde breedte als het anker.
    • Verticaal distribueren - geeft componenten dezelfde hoogte als het anker.

U kunt bijvoorbeeld drie JButton-componenten selecteren en opgeven dat deze dezelfde breedte moeten hebben en met elkaar uitgelijnd moeten zijn op de linkerrand. De laatst geselecteerde JButton fungeert als anker of besturingselement voor de andere twee knoppen. Met de actie Links uitlijnen lijnt u de JButton-componenten uit op de linkerrand van de laatst geselecteerde JButton. Met de actie Breedte aanpassen geeft u de geselecteerde JButton dezelfde breedte als de controlecomponent.

De uitlijningsknoppen in het venster Layout aanpassen zijn alleen beschikbaar als aan de volgende voorwaarden is voldaan:

U kunt de componenten niet alleen uitlijnen en de breedte en hoogte aanpassen, maar ook distribueren. Als componenten worden gedistribueerd, wordt de positie zo gewijzigd dat de componenten in het omringende kader, dat is gedefinieerd door de bovenliggende container, gelijkelijk zijn verdeeld. Voordat op de knop Verticaal distribueren Knop Verticaal distribueren is geklikt, zijn de drie voorbeeldknoppen in de afbeelding ongelijkmatig verdeeld:


Beans in de view Ontwerp

Na een klik op Verticaal distribueren worden de componenten gelijkelijk over de ruimte verdeeld, zoals in de volgende afbeelding te zien is:

Verticaal gedistribueerde beans

U ziet dat de drie koppen gedistribueerd worden op basis van de hoogte van het bovenliggende item (de boven- en onderrand van het frame).

Voor een beter beheer van het distributiegebied kunt u het distributiekader inschakelen door te klikken op Distributiekader afbeelden Distributiekader. Als u op deze knop klikt, wordt een kader om het gebied met de geselecteerde componenten afgebeeld. U kunt het kader verplaatsen en de grootte aanpassen met behulp van de formaatgrepen. Als u een actief distributiekader gebruikt, vormt het kader het gebied waarin de besturingselementen opnieuw worden gepositioneerd. Zonder distributiekader is de bovenliggende container het distributiegebied. In de volgende afbeelding ziet u een distributiekader:

Beans in distributiekader

U kunt een distributiekader verplaatsen en de grootte ervan wijzigen, zoals in de volgende afbeelding is te zien:

Beans in distributiekader waarvan de grootte is gewijzigd

Als u een verticale distributie uitvoert in een distributiekader, vindt de distributie plaats binnen het distributiekader in plaats van in de bovenliggende container, zoals in de volgende afbeelding te zien is:

Verticaal gedistribueerde beans in kader

(C) Copyright IBM Corporation 1999, 2004. Alle rechten voorbehouden.