Java Swing佈局塊

Question

我正在嘗試瞭解佈局，因爲我已閱讀了關於不良實踐的內容，以便在GUI中使用絕對定位的空佈局。如果帶動動態擴展GUI的靈活性。所以我嘗試了一些GUI塊的組合，現在我遇到了一個問題。下面是GUI塊我打算嘗試：

我開始通過執行GUI的頂部部分（塊1，2 & 3），並將其與下面的代碼工作：

public class LayoutTestGuiDelegate implements Observer{ 
    private LayoutTestModel model; 
    private int totalScreenWidth; 
    private int totalScreenHeight; 
    private JFrame mainFrame; 
    private JPanel totalScreen; 
    private JPanel topScreen; 
    private JPanel botScreen; 
    private JPanel dateScreen; 
    private ImagePanelOne imagePanelOne; 
    private ImagePanelTwo imagePanelTwo; 
    private ImagePanelThree imagePanelThree; 
    private ImagePanelFour imagePanelFour; 
    private ImagePanelFive imagePanelFive; 

public LayoutTestGuiDelegate(LayoutTestModel model){ 
    this.model = model; 
    totalScreenWidth = model.GetScreenWidth(); 
    totalScreenHeight = model.GetScreenHeight(); 
    SetupComponents(); 
} 

public void SetupComponents(){ 
    // set it to full exclusive mode 
    final GraphicsDevice fullScreen = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice(); 
    mainFrame = new JFrame("Video Clock Display"); 
    mainFrame.setLayout(new GridLayout(1, 1, 0, 0)); 
    mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    mainFrame.setUndecorated(true); // Remove title bar 
    mainFrame.setAlwaysOnTop(false); // Always on top 
    mainFrame.setResizable(false); 
    mainFrame.setVisible(true); 

    totalScreen = new JPanel(new GridLayout(2, 1, 0, 0)); 
    mainFrame.setContentPane(totalScreen); 

    topScreen = new JPanel(new GridLayout(1, 2, 0, 0)); 
    imagePanelOne = new ImagePanelOne(model, 1020, 280); 
    topScreen.add(imagePanelOne); 

    dateScreen = new JPanel(new GridLayout(2, 1, 0, 0)); 
    imagePanelTwo = new ImagePanelTwo(model, 900, 150); 
    dateScreen.add(imagePanelTwo); 
    imagePanelThree = new ImagePanelThree(model, 900, 130); 
    dateScreen.add(imagePanelThree); 
    topScreen.add(dateScreen); 
    totalScreen.add(topScreen); 

    mainFrame.pack(); 
} 

@Override 
public void update(Observable arg0, Object arg1) { 
    SwingUtilities.invokeLater(new Runnable() { 
     public void run() { 
      imagePanelOne.repaint(); 
      imagePanelTwo.repaint(); 
      imagePanelThree.repaint(); 
      imagePanelFour.repaint(); 
      imagePanelFive.repaint(); 
     } 
    }); 

} 

} 

當我嘗試在底部（塊4 & 5）加入，一切都只是去奇怪的。它顯示了這樣用下面的代碼：

public class LayoutTestGuiDelegate implements Observer{ 
    private LayoutTestModel model; 
    private int totalScreenWidth; 
    private int totalScreenHeight; 
    private JFrame mainFrame; 
    private JPanel totalScreen; 
    private JPanel topScreen; 
    private JPanel botScreen; 
    private JPanel dateScreen; 
    private ImagePanelOne imagePanelOne; 
    private ImagePanelTwo imagePanelTwo; 
    private ImagePanelThree imagePanelThree; 
    private ImagePanelFour imagePanelFour; 
    private ImagePanelFive imagePanelFive; 

public LayoutTestGuiDelegate(LayoutTestModel model){ 
    this.model = model; 
    totalScreenWidth = model.GetScreenWidth(); 
    totalScreenHeight = model.GetScreenHeight(); 
    SetupComponents(); 
} 

public void SetupComponents(){ 
    // set it to full exclusive mode 
    final GraphicsDevice fullScreen = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice(); 
    mainFrame = new JFrame("Video Clock Display"); 
    mainFrame.setLayout(new GridLayout(1, 1, 0, 0)); 
    mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    mainFrame.setUndecorated(true); // Remove title bar 
    mainFrame.setAlwaysOnTop(false); // Always on top 
    mainFrame.setResizable(false); 
    mainFrame.setVisible(true); 

    totalScreen = new JPanel(new GridLayout(2, 1, 0, 0)); 
    mainFrame.setContentPane(totalScreen); 

    topScreen = new JPanel(new GridLayout(1, 2, 0, 0)); 
    imagePanelOne = new ImagePanelOne(model, 1020, 280); 
    topScreen.add(imagePanelOne); 

    dateScreen = new JPanel(new GridLayout(2, 1, 0, 0)); 
    imagePanelTwo = new ImagePanelTwo(model, 900, 150); 
    dateScreen.add(imagePanelTwo); 
    imagePanelThree = new ImagePanelThree(model, 900, 130); 
    dateScreen.add(imagePanelThree); 
    topScreen.add(dateScreen); 
    totalScreen.add(topScreen); 

    botScreen = new JPanel(new GridLayout(1, 2, 0, 0)); 
    imagePanelFour = new ImagePanelFour(model, 1420, 800); 
    botScreen.add(imagePanelFour); 
    imagePanelFive = new ImagePanelFive(model, 500, 800); 
    botScreen.add(imagePanelFive); 

    totalScreen.add(botScreen); 
    mainFrame.pack(); 
} 

@Override 
public void update(Observable arg0, Object arg1) { 
    SwingUtilities.invokeLater(new Runnable() { 
     public void run() { 
      imagePanelOne.repaint(); 
      imagePanelTwo.repaint(); 
      imagePanelThree.repaint(); 
      imagePanelFour.repaint(); 
      imagePanelFive.repaint(); 
     } 
    }); 

} 

} 

誰能告訴我什麼，我做錯了什麼？謝謝。

Answer 1

我認爲你應該使用BorderLayout。將前三個組件放在約束區域NORTH中。將4放在中間，並將5放入EAST。

下面的示例看起來不像您的圖片，因爲我使用的各種面板默認具有不同的邊框和佈局，並且我用作示例的按鈕非常小。但總的來說，我認爲這將是最簡單的工作，如果你必須手工操作。

我也想看看你使用更小的面板分成更小的類，並從這些較小的組件構成你的GUI。你上面的代碼相當龐大，有點笨拙，難以閱讀。

public class LayoutTest 
{ 
    public static void main(String[] args) 
    { 
     SwingUtilities.invokeLater(new Runnable(){ 
     public void run() 
     { 
      JFrame frame = new JFrame(); 

      TopPanel top = new TopPanel(); 
      frame.add(top, BorderLayout.NORTH); 
      frame.add(new JButton("4")); 
      frame.add(new JButton("5"), BorderLayout.EAST); 

      frame.pack(); 
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
      frame.setLocationRelativeTo(null); 
      frame.setVisible(true); 
     } 
     }); 
    } 
} 

class CenterButtonPanel extends JPanel { 
    public CenterButtonPanel(String name) { 
     JButton but = new JButton(name); 
     add(but); 
    } 
} 

class TopPanel extends JPanel { 
    TopPanel() { 
    Box right = Box.createVerticalBox(); 
    right.add(new CenterButtonPanel("2")); 
    right.add(new CenterButtonPanel("3")); 
    Box left = Box.createHorizontalBox(); 
    left.add(new CenterButtonPanel("1")); 
    left.add(right); 
    add(left); 
    } 
}