GUI布局基础

布局的三种方式

东西南北中BorderLayout

布局可设置东（EAST）、西（WEST）、南（SOUTH）、北（NORTH）、中（CENTER）

• 效果图

• 代码

  public static void main(String[] args) {
  
          Frame frame = new Frame("MyFrame");
          frame.setBounds(100, 100, 500,500);
          //设置流式布局
          frame.setLayout(new BorderLayout());
  
          Button button1 = new Button("button1");
          Button button2 = new Button("button2");
          Button button3 = new Button("button3");
          Button button4 = new Button("button4");
          Button button5 = new Button("button5");
  
          frame.add(button1, BorderLayout.EAST);
          frame.add(button2, BorderLayout.WEST);
          frame.add(button3, BorderLayout.SOUTH);
          frame.add(button4, BorderLayout.NORTH);
          frame.add(button5, BorderLayout.CENTER);
  
  
          frame.setVisible(true);
      }
  

流式布局FlowLayout

流式布局可设置左（FlowLayout.LEFT）、中（FlowLayout.CENTER）、右（FlowLayout.RIGHT）

• 效果图：

代码：

public static void main(String[] args) {

        Frame frame = new Frame("MyFrame");
        frame.setBounds(100, 100, 500,500);
        //设置流式布局
        frame.setLayout(new FlowLayout(FlowLayout.LEFT));

        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");

        frame.add(button1);
        frame.add(button2);
        frame.add(button3);

        frame.setVisible(true);
    }

表格布局GridLayout

• 效果图：

• 代码

  public static void main(String[] args) {
  
          Frame frame = new Frame("MyFrame");
          frame.setBounds(100, 100, 500,500);
          //设置流式布局
          frame.setLayout(new GridLayout(2, 3));
  
          Button button1 = new Button("button1");
          Button button2 = new Button("button2");
          Button button3 = new Button("button3");
          Button button4 = new Button("button4");
          Button button5 = new Button("button5");
          Button button6 = new Button("button6");
  
          frame.add(button1);
          frame.add(button2);
          frame.add(button3);
          frame.add(button4);
          frame.add(button5);
          frame.add(button6);
  
          frame.setVisible(true);
      }
  

使用三种方式完成以下效果

思路分析

• 复杂布局用Panel进行分割
• 把目标视图分成上下两组
• 上半部分左右中+表格
• 下半部分左右中+表格

代码

    public static void main(String[] args) {

        Frame frame = new Frame("MyFrame");
        frame.setBounds(100, 100, 500,500);
        //设置流式布局
        frame.setLayout(new GridLayout(2, 1));


        Panel panel_top = new Panel();
        Panel panel_bottom = new Panel();

        frame.add(panel_top);
        frame.add(panel_bottom);
        
        panel_top.setLayout(new BorderLayout());
        panel_bottom.setLayout(new BorderLayout());

        //上半部分控件
        Button button_left = new Button("top_left");
        Panel panel_center = new Panel();
        Button button_right = new Button("top_right");

        //上半部分整体布局
        panel_top.add(button_left, BorderLayout.WEST);
        panel_top.add(button_right, BorderLayout.EAST);
        panel_top.add(panel_center, BorderLayout.CENTER);
        //上半部分中间布局
        panel_center.setLayout(new GridLayout(2,1));
        Button button_center_top = new Button("center_top");
        Button button_center_bottom = new Button("center_bottom");
        panel_center.add(button_center_top);
        panel_center.add(button_center_bottom);

        //下半部分控件
        Button b_button_left = new Button("top_left");
        Panel b_panel_center = new Panel();
        Button b_button_right = new Button("top_right");


        panel_bottom.add(b_button_left, BorderLayout.WEST);
        panel_bottom.add(b_button_right, BorderLayout.EAST);
        panel_bottom.add(b_panel_center, BorderLayout.CENTER);


        //上半部分中间布局
        b_panel_center.setLayout(new GridLayout(2,2));
        Button b_button_center_1 = new Button("b_button_center_1");
        Button b_button_center_2 = new Button("b_button_center_2");
        Button b_button_center_3 = new Button("b_button_center_3");
        Button b_button_center_4 = new Button("b_button_center_4");
        b_panel_center.add(b_button_center_1);
        b_panel_center.add(b_button_center_2);
        b_panel_center.add(b_button_center_3);
        b_panel_center.add(b_button_center_4);

        frame.setVisible(true);
    }

效果图