GUI-Layout
Du kennst schon alle GUI-Komponenten, aber weißt noch nicht so genau, was du jetzt mit ihnen anfangen sollst? In diesem Beitrag zeigen wir dir, was alles möglich ist!
Inhaltsübersicht
Verwendung des Layout-Managers
Konkret verwenden wir hierfür den LayoutManager. Dieser ist eine Schnittstelle, die die Position von GUI-Komponenten innerhalb von Fenstern und gegebenenfalls sogar in Panels festlegen kann.
Dazu stellt er dir verschiedene Layouts zur Verfügung, aus denen du wählen kannst:
Flow-Layout
Das simpelste ist das FlowLayout, das ganz dem Namen entsprechend, die Komponenten fließend anordnet, also in einer Reihe von links nach rechts. Das kannst du mit beliebig vielen Komponenten machen, indem du sie mit dem Befehl add hinzufügst.
Implementiert sieht das Ganze dann so aus:
Ab einer bestimmten Menge an Komponenten wird diese Art der Darstellung allerdings recht unübersichtlich. Deswegen gibt es noch zwei weitere Layouts.
Border-Layout
Eines ist das BorderLayout. Es ist in 5 Bereiche aufgeteilt, von denen die äußeren wie auf einer Karte mit Himmelsrichtungen bezeichnet werden. Der Bereich in der Mitte heißt ganz einfach Center.
Enthält ein Bereich kein Element, wird er erst gar nicht dargestellt, aber falls er eine Komponente enthält, wird er immer passend skaliert.
Wichtig ist noch zu wissen, dass in Bereichen des BorderLayouts, anders als beim FlowLayout nur jeweils ein Element enthalten sein darf. Dies lässt sich allerdings umgehen, indem man ein Panel als Komponente einfügt und die gewünschten Elemente darauf platziert.
Um die Elemente aber überhaupt hinzufügen zu können, müssen wir erst noch den add-Befehl anpassen, damit er für das BorderLayout geeignet ist.
Das können wir ganz einfach tun, indem wir als zweiten Parameter, also zusätzlich zur hinzuzufügenden Komponente angeben, wo diese platziert werden soll.
Grid-Layout
Als drittes und letztes der drei grundlegenden Layouts gibt es das GridLayout, dessen Name erneut Programm ist, denn hier ordnen wir die Komponenten in einem Gitter an, das einer Tabelle gleicht.
Bei diesem Layout sind alle Bereiche gleich groß, egal wie groß der Inhalt ist.
Außerdem muss dieses Layout wie eine Tabelle erzeugt werden.
X steht hierbei für die Anzahl an Spalten, y für die Anzahl an Zeilen.
Um Komponenten einzufügen, ist es hier wichtig darauf zu achten, in welcher Reihenfolge man sie hinzufügt, denn es gibt keine Möglichkeit, Komponenten gezielt in einer Zelle zu platzieren.
Stattdessen wird derselbe add-Befehl wie beim FlowLayout benutzt und es wird einfach Zeile um Zeile von rechts nach links aufgefüllt, bis die Tabelle voll ist.
Nutzung von Panels
Wie du siehst hat jedes dieser Layouts seine Vor- und Nachteile. Aber zum Glück bist du in Java nicht nur auf ein Layout beschränkt. Moderne Layouts nutzen so gut wie immer eine Kombination aus mehreren Layouts, was sich, wenn man Panels nutzt, leicht erreichen lässt.
Dazu fügt man Panels in die Bereiche des gewünschten Layouts ein und weist diesen dann ein eigenes Layout zu. In dieses kann man dann wieder ein Panel einfügen und so weiter und so fort.
So kann man durchaus sehr komplexe Strukturen erstellen. Aber wir begnügen uns erstmal mit etwas Simplerem.
Erstellen eines Layouts – Beispiel
Wie du hier siehst, erzeugen wir zunächst alle Komponenten, die wir später nutzen wollen. Wir tun das deshalb nicht lokal im Konstruktor, da wir sie später für andere Methoden der Klasse, wie zum Beispiel eine Ereignisbehandlung, brauchen könnten.
Dann deklarieren wir einen Konstruktor, in dem wir zunächst ein Fenster mit Titel und festgelegter Größe erzeugen. Danach setzen wir ein Layout sowohl für das Fenster, als auch für unser Panel fest.
Jetzt müssen wir unsere Komponenten nur noch mittels add-Befehl dort einfügen, wo wir sie haben wollen.
Und Voila! Nachdem wir unser Fenster sichtbar gemacht haben, sehen wir – Nichts. Das macht auch vollkommen Sinn, denn zuerst müssen wir unseren Konstruktor noch von der Main-Methode in der Hauptklasse aus aufrufen. Nachdem das dann erledigt ist, haben wir nach dem Ausführen eine schlichte, wohlgeordnete Benutzeroberfläche.
Du siehst: Ein GUI programmieren ist nicht schwer, erfordert aber einiges an Schreibarbeit, bis etwas Annehmbares auf dem Bildschirm zu sehen ist. Noch mehr Arbeit ist es, auch noch dafür zu sorgen, dass die Buttons und Felder eine Funktion haben.
Falls du jedoch einmal faul sein solltest und zufällig mit Netbeans arbeitest, kannst du auch einfach den dort vorhandenen GUI-Editor verwenden.
Nun kannst du deine User mit einem komplexen Layout beeindrucken und bist auch sonst bestens gewappnet, deine Programme auf das nächste Level zu bringen.