Bildbeispiel von Layout: wie nutze ich das GBLayout dafür?

[Natas]

Hallo,


folgendes Bild würde ich gerne mit dem GBL realisieren.

Die ersten 4 Zeilen sind klar doch danach wirds haperig... geht das denn, dass ich 2 Komponenten auf einer Zeile über 3 gridx stretchen kann?


Danach kommen 4 Komponenten über 3 gridx strecken gleiche sache eigentlich...

Und der button am schluss sollte man den button auf ein extra panel legen?

 

[SlaterB]

gehen geht alles, wobei du ohne den Button insgesamt 5 Spalten brauchst,
im Bereich 2 liegen die linken Felder an Position 0 mit Breite 2 (widthx), die anderen an Position 2 mit Breite 3

schlauer kann es aber sein für die Bereiche 2, 3 und 4 einzelne JPanel zu erstellen,
je nachdem, ob der Aufwand, bestimmte Komponenten aus unterschiedlichen Bereichen gleich groß zu machen nicht größer ist, als die gridwiths zusammenzubasteln

 

[Natas]

gehen geht alles, wobei du ohne den Button insgesamt 5 Spalten brauchst,
im Bereich 2 liegen die linken Felder an Position 0 mit Breite 2 (widthx), die anderen an Position 2 mit Breite 3

schlauer kann es aber sein für die Bereiche 2, 3 und 4 einzelne JPanel zu erstellen,
je nachdem, ob der Aufwand, bestimmte Komponenten aus unterschiedlichen Bereichen gleich groß zu machen nicht größer ist, als die gridwiths zusammenzubasteln

alles klar NUR warum 5 spalten? 4 reichen doch... denn egal welche Zeile in der GUI es sind immer maximal 4 Komponenten auf einer Zeile...

 

[L-ectron-X]

Weil einige Komponenten spaltenübergreifend liegen. Diese Komponenten musst du bis zur "Zwischenspalte" ausdehnen, um die Überlappung hinzubekommen.

 

[Natas]

Weil einige Komponenten spaltenübergreifend liegen. Diese Komponenten musst du bis zur "Zwischenspalte" ausdehnen, um die Überlappung hinzubekommen.

Hm also das verstehe ich jetzt nicht, wenn ich 4 komponenten habe habe ich auch 4 spalten. ???:L Wo ist da bitte schön eine Zwischenspalte?

 

[L-ectron-X]

Ich habe mal versucht, das Ganze mit GBL umzusetzen. Der unten abgebildete Code erzeugt ein solches Panel + JFrame:

Wenn ich jetzt die benötigten Zellen in horizontaler Ebene einzeichne, sieht das so aus:

Es sind also wie oben bereits gesagt 5 Spalten.
Und hier noch der Code dazu:

import javax.swing.*; 
import java.awt.*; 

public class GridBagLayoutDemo { 
   public GridBagLayoutDemo() { 
      JFrame frame = new JFrame("GridBagLayoutDemo"); 
      frame.setSize(600, 400); 
      frame.setLocationRelativeTo(null); 
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 

      GridBagPanel gbPanel = new GridBagPanel(); 
      
      JButton btn1 = new JButton("1"); 
      gbPanel.addComponent(btn1, 0, 0, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn2 = new JButton("2"); 
      gbPanel.addComponent(btn2, 1, 0, 2, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn3 = new JButton("3"); 
      gbPanel.addComponent(btn3, 3, 0, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);    
      
      JButton btn4 = new JButton("4"); 
      gbPanel.addComponent(btn4, 0, 1, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn5 = new JButton("5"); 
      gbPanel.addComponent(btn5, 1, 1, 2, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn6 = new JButton("6"); 
      gbPanel.addComponent(btn6, 3, 1, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn7 = new JButton("7"); 
      gbPanel.addComponent(btn7, 0, 2, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn8 = new JButton("8"); 
      gbPanel.addComponent(btn8, 1, 2, 2, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn9 = new JButton("9"); 
      gbPanel.addComponent(btn9, 3, 2, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);    
      
      JButton btn10 = new JButton("10"); 
      gbPanel.addComponent(btn10, 0, 3, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn11 = new JButton("11"); 
      gbPanel.addComponent(btn11, 1, 3, 2, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn12 = new JButton("12"); 
      gbPanel.addComponent(btn12, 3, 3, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn13 = new JButton("13"); 
      gbPanel.addComponent(btn13, 0, 4, 2, 1, 0.5, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn14 = new JButton("14"); 
      gbPanel.addComponent(btn14, 2, 4, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn15 = new JButton("15"); 
      gbPanel.addComponent(btn15, 0, 5, 2, 1, 0.5, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn16 = new JButton("16"); 
      gbPanel.addComponent(btn16, 2, 5, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn17 = new JButton("17"); 
      gbPanel.addComponent(btn17, 0, 6, 2, 1, 0.5, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn18 = new JButton("18"); 
      gbPanel.addComponent(btn18, 2, 6, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);              
          
      JButton btn19 = new JButton("19"); 
      gbPanel.addComponent(btn19, 0, 7, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn20 = new JButton("20"); 
      gbPanel.addComponent(btn20, 1, 7, 2, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);                                      

      JButton btn21 = new JButton("21"); 
      gbPanel.addComponent(btn21, 4, 7, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn22 = new JButton("22"); 
      gbPanel.addComponent(btn22, 5, 7, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn23 = new JButton("23"); 
      gbPanel.addComponent(btn23, 0, 8, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn24 = new JButton("24"); 
      gbPanel.addComponent(btn24, 1, 8, 2, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);                                      
      
      JButton btn25 = new JButton("25"); 
      gbPanel.addComponent(btn25, 4, 8, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);  
      
      JButton btn26 = new JButton("26"); 
      gbPanel.addComponent(btn26, 5, 8, 1, 1, 0.0, 1.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL); 
      
      JButton btn27 = new JButton("Ein fetter Button"); 
      btn27.setMargin(new Insets(20, 20, 20, 20)); 
      gbPanel.addComponent(btn27, 0, 9, 0, 1, 0.0, 0.0, GridBagConstraints.SOUTHEAST, GridBagConstraints.NONE);                

      frame.add(gbPanel); 

      frame.setVisible(true); 
   } 
    
   class GridBagPanel extends JPanel { 
      public GridBagPanel() { 
         super(new GridBagLayout()); 
      } 
      
      public void addComponent(JComponent c, int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty, int anchor, int fill) { 
         add(c, new GridBagConstraints(gridx, gridy, gridwidth, gridheight, weightx, weighty, anchor, fill, new Insets(1, 1, 1, 1), 0, 0)); 
      }      
   } 

   public static void main(String[] args) { 
      new GridBagLayoutDemo(); 
   } 
      
}

 

[Natas]

super danke dir, ich probiers in den Ferien aus, gerade keine Zeit und melde mich dann nochmals.Ich habs auch hinbekommen, mit einem makel, das die Jpanels links in die GUI der textfelder rechts davon reintauchen entweder ein bug oder habe falsch gestretched naja danke dir !

 

[Natas]

Also ich konnts doch net solange abwarten ;P

WIE schaffst du es den JButtons die ungefähre Breite zu geben, wie mein image template ähnliche Breiten hat? Du arbeitest nirgends mit ipady/ipadx ??

 

[Natas]

dann ist mir noch eingefallen, wie gibts du einem einzelnen objekt unterschiedlichen Höhen? Ok man könnte das auch mit setMargin() machen doch das ist ja nicht die feine Art einem Objekt oben und unten einen fetten Abstand zum Text zu geben um den Button sehr hoch zu machen... sprich man müsste deine addComponent methode um ipday erweitern oder?

 

[L-ectron-X]

WIE schaffst du es den JButtons die ungefähre Breite zu geben, wie mein image template ähnliche Breiten hat? Du arbeitest nirgends mit ipady/ipadx ??

Die Zellbreite einer Spalte richtet sich nach der größten Komponente in einer Spalte. Voraussetzung dafür ist, dass alle Zellen mit ausgefüllt werden (fill) Du kannst Komponenten sich über mehrere Spalten/Zeilen erstrecken lassen und somit Größe und Anordnung verändern (gridwidth/gridheight). Mit der Gewichtung (weightx/weighty) kannst du einer oder mehreren Komponenten einen Wert mitgeben, der bestimmt, wie stark sich eine Komponente im Verhältnis zu anderen Komponenten ausdehnen oder positionieren darf.

ipadx und ipady wäre hier der falsche Weg, weil die Komponente dadurch nur weniger Platz innerhalb ihrer Zelle erhält, weil diese Attribute für mehr Platz zwischen Zellwand und Komponente sorgen.

 

[L-ectron-X]

dann ist mir noch eingefallen, wie gibts du einem einzelnen objekt unterschiedlichen Höhen? Ok man könnte das auch mit setMargin() machen doch das ist ja nicht die feine Art einem Objekt oben und unten einen fetten Abstand zum Text zu geben um den Button sehr hoch zu machen... sprich man müsste deine addComponent methode um ipday erweitern oder?

ipadx und ipady erzeugen nur Raum zwischen Zellwand und Komponente.
setMargin() erzeugt einen größeren Abstand zwischen Rand und Inhalt der Komponente.
Mit Insets kannst du mehr Raum zwischen den Zellen erzeugen.

Wenn ich nicht mit setMargin() sondern bspw. mit fill und weightx und weighty gearbeitet hätte, würde sich der Button beim Vergrößern des Fensters mit vergrößern.
Die Ausdehnung auf mehrere Zellen (gridwidth und gridheight) hätte hier wohl keine bzw. unerwünschte Wirkung.

 

[Natas]

1. Was ist die Zellwand für dich?

2. dann setze ich die Höhe einer Komponente mit gridheight?

warum wird dann button 10,11,12

JButton btn10 = new JButton("10");
      gbPanel.addComponent(btn10, 0, 3, 1, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);
     
      JButton btn11 = new JButton("11");
      gbPanel.addComponent(btn11, 1, 3, 2, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);
     
      JButton btn12 = new JButton("12");
      gbPanel.addComponent(btn12, 3, 3, 0, 1, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);

nicht größer, wenn ich obigen Code so ändere sprich alle 3 gridheight auf 5 setze?

JButton btn10 = new JButton("10");
gbPanel.addComponent(btn10, 0, 3, 1, 5, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);

JButton btn11 = new JButton("11");
gbPanel.addComponent(btn11, 1, 3, 2, 5, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);

JButton btn12 = new JButton("12");
gbPanel.addComponent(btn12, 3, 3, 0, 5, 0.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);

3.

Der veränderte Code zu obigem bild:

HIer wurde gridwidth von 1 auf 4 gesetzt. Doch bei einer gridwidth von 4 müsste doch der Button11 sich komplett bis ans ende des Fensters erstrecken ? Denn button11 und button12 sitzen auf 4 spalten und nicht 5, denn erst wenn ich gridwidth auf 5 setze streckt sich button11 auch bis ans Fenster, kannst du mir das bitte erklören, danke!

JButton btn11 = new JButton("11");
      gbPanel.addComponent(btn11, 1, 3, 4, 1, 1.0, 0.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL);

 

[L-ectron-X]

1. Was ist die Zellwand für dich?

Das GridBagLayout besteht aus einem Gitter, ähnlich einer Tabelle, nur dass sich hier die Zellen dynamisch und individuell ausdehnen können. Eine Tabelle hat zur Abgrenzung der Zellen Linien, die ich hier mal mit Zellwände betitelt habe.

2. dann setze ich die Höhe einer Komponente mit gridheight?

warum wird dann button 10,11,12

[...]

nicht größer, wenn ich obigen Code so ändere sprich alle 3 gridheight auf 5 setze?

Weil du noch gridy (3. Parameter) anpassen musst. Die Komponenten in diesem Beispiel dürfen sich außerdem nur horizontal ausdehnen.
GridBagConstraints.HORIZONTAL

Wenn sich die Komponenten auch vertikal ausdehnen sollen musst du eventuell auch noch schreiben:
GridBagConstraints.BOTH
Wenn das nicht ausreicht, musst du außerdem noch eine Gewichtung in y-Achse setzen. Also den Wert für weighty (2. double-Wert) in meiner addComponent()-Methode.

HIer wurde gridwidth von 1 auf 4 gesetzt. Doch bei einer gridwidth von 4 müsste doch der Button11 sich komplett bis ans ende des Fensters erstrecken ? Denn button11 und button12 sitzen auf 4 spalten und nicht 5, denn erst wenn ich gridwidth auf 5 setze streckt sich button11 auch bis ans Fenster, kannst du mir das bitte erklören, danke!

Button11 und Button12 erstrecken sich beide über 2 Spalten.
Ich weiß nicht, was da schief gegangen ist. Warum willst du Zellen doppelt belegen?

Edit: Hab gerade gesehen, dass zwei Button zu viel im Code sind, die aber nicht angezeigt werden. Ich habe den obigen Code dahin gehend korrigiert.

 

[Natas]

nun habe ich gridheight auf 5 gesetzt bei allen 3 buttons sprich die 5fache Höhe der eigenen Höhe... warum aber rücken die buttons 13,14,15 usw. nicht unter die buttons 10,11 und 12 ?

Natas hat folgendes geschrieben::
HIer wurde gridwidth von 1 auf 4 gesetzt. Doch bei einer gridwidth von 4 müsste doch der Button11 sich komplett bis ans ende des Fensters erstrecken ? Denn button11 und button12 sitzen auf 4 spalten und nicht 5, denn erst wenn ich gridwidth auf 5 setze streckt sich button11 auch bis ans Fenster, kannst du mir das bitte erklören, danke!

Button11 und Button12 erstrecken sich beide über 2 Spalten.
Ich weiß nicht, was da schief gegangen ist. Warum willst du Zellen doppelt belegen?

nah ich probiere doch nur herum an einem probelayout... verändere Zahlen und will lernen etc... Ich empfinde die Erklärung von Beny oder andere Sun GBL Erklärungen nicht eindeutig sondern interpretierbar, darum habe ich damit auch meine Probleme u.a....

siehe oben: also setze ich gridwidth auf 5 damit sich button11 bis spalte 5 streckt, doch warum streckt sich button11 nicht nur bis spalte 2 wenn gridwidth = 2 ist sondern belegt auch die 3.spalte mit sich selbst? da sehe ich ungereimtheiten...

 

[L-ectron-X]

warum aber rücken die buttons 13,14,15 usw. nicht unter die buttons 10,11 und 12 ?

Weil du noch gridy (3. Parameter) anpassen musst.

Wenn du dem Layout sagst, dass es Komponenten über eine bestimmte Anzahl von Zeilen ausdehnen soll, müssen die folgenden Komponenten in den Zeilen positioniert werden, die unterhalb liegen.

Nehmen wir an, deine Komponente sitzt in Zeile 3 und soll sich über 3 Zeilen erstrecken, dann muss die Komponente, die darunter erscheinen soll in Zeile 7 positioniert werden.

da sehe ich ungereimtheiten...

Ich nehme an, dass ich noch weitere Fehler im Layout habe.

 

[Natas]

warum aber rücken die buttons 13,14,15 usw. nicht unter die buttons 10,11 und 12 ?

Weil du noch gridy (3. Parameter) anpassen musst.

Wenn du dem Layout sagst, dass es Komponenten über eine bestimmte Anzahl von Zeilen ausdehnen soll, müssen die folgenden Komponenten in den Zeilen positioniert werden, die unterhalb liegen.

Nehmen wir an, deine Komponente sitzt in Zeile 3 und soll sich über 3 Zeilen erstrecken, dann muss die Komponente, die darunter erscheinen soll in Zeile 7 positioniert werden.

OK auch kapiert dennoch eine Frage hab ich noch (wahscheinlich nicht die letzte :wink: )

Wenn ich nun die Buttons 1,4,7,10 breiter machen möchte:

habe ich weightX auf 0.1 gesetzt!

Frage:

1.) Warum hat 0.1 so eine Starke Auswirkung sprich der button 1,4,7,10 wird 10mal so breit?
2.) Warum befinden sich die buttons 13,15,17 nicht mehr unter dem button 11, somit ist das ganze vorherige Layout dahin... dieses 0.1 weightx kann doch nicht einfach mein gridwidth aufheben?

 

[Natas]

blubb hat mir keiner eine hilfreichende Antwort?

 

[SlaterB]

es macht ja auch keinen Spass, sich aus 10 Posting die ungefähre aktuelle Code-Version zusammenzubasteln,
irgendwo anfangs steht vielleicht mal was und dann soll man alle 'habe ich weightX auf 0.1 gesetzt!' manuell nachrüsten?..

außerdem kürze doch bitte mal deutlich, es reicht doch, wenn du nur die Zeilen mit Button 1 und 13 und 19 drin hast, die restlichen 7 von 10 Zeilen sind (zunächst) unnötiger Ballast

-------


Vermutung:

1)
weightX 0.1 ist so stark, weil es bisher gar keine oder auch nur geringe weightX für andere Spalten gesetzt sind,

2)
die Spalten gehen den Weg des geringesten Wiederstandes,
nirgendwo ist verboten, dass Spalte 2 nicht die Breite 0 haben darf,
also schwups auf 0 gesetzt,
Button 13 ist immer noch eine Spalte breiter, aber wenn Spalte 1 100 Pixel breit ist und Spalte 2 0 Pixel, dann sieht man das nicht besonders deutlich