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:
Studyflix vernetzt: Hier ein Video aus einem anderen Bereich
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.
GUI-Layout — häufigste Fragen
(ausklappen)
GUI-Layout — häufigste Fragen
(ausklappen)-
Wie setzt man das Layout richtig für ein JFrame?Das Layout für ein
JFramesetzt man, indem man nach dem Erzeugen des Fensters den Layout-Manager amJFrame(bzw. seiner Content-Pane) setzt und erst danach Komponenten hinzufügt, z. B.frame.setLayout(new BorderLayout()). Für ein Panel setzt man das Layout separat mitpanel.setLayout(...). -
Warum sieht man nach dem Starten des Programms trotz add() nichts im Fenster?Nichts im Fenster trotz
add()sieht man meist, weil der Code mitadd()gar nicht läuft, wenn die GUI-Klasse in dermain-Methode nicht als Objekt erzeugt wird. Dann werden weder Layout gesetzt noch Komponenten hinzugefügt. Deshalb mussmainden Konstruktor aufrufen, z. B.new MeineGUI();. -
Wie fügt man im BorderLayout mehrere Buttons in denselben Bereich ein?Mehrere Buttons im selben
BorderLayout-Bereich fügt man ein, indem man statt eines Buttons ein Panel in diesen Bereich setzt. Danach gibt man dem Panel ein eigenes Layout, zum BeispielFlowLayout, und fügt die Buttons mitpanel.add(...)in dieses Panel ein. -
In welcher Reihenfolge werden Komponenten im GridLayout eingefügt, wenn man nur add() benutzt?Man fügt Komponenten im
GridLayoutbeiadd()zeilenweise von links nach rechts und von oben nach unten ein, bis alle Zellen belegt sind. Eine gezielte Platzierung pro Zelle gibt es dabei nicht. Beispiel: Bei 2×2 landen A, B, C, D in (0,0), (0,1), (1,0), (1,1).
Nach Beantwortung speichern wir deine Antwort, um Studyflix zu verbessern. Mehr dazu erfährst du in unserer Datenschutzerklärung.
GUI-Programmierung verstehen
GUI-Layouts gehören zur GUI-Programmierung und sind ein wichtiger Teil beim Aufbau von Benutzeroberflächen. Wer sich mit GUI-Programmierung beschäftigt, ordnet Komponenten im Fenster, setzt Panels ein und kombiniert verschiedene Elemente zu einer klaren Oberfläche. So erkennst du, wie einzelne Teile einer Oberfläche zusammenwirken und warum die Struktur im Code für die Anordnung im Fenster wichtig ist. Weitere Videos dazu findest du in unserem Informatikbereich.
