Day46--3种布局管理器

Day46--3种布局管理器

Day46--3种布局管理器

必备的英语：

hgap horizontal gap 水平间距 horizontal adj.水平的

vgap vertical gap 垂直间距 vertical adj.垂直的

“label” 通常是指标签。

标签主要用于在界面上显示静态文本信息。例如，在一个登录界面中，“用户名” 和 “密码” 这两个文本提示通常是通过标签来显示的。这些文本帮助用户理解界面中其他输入框或者组件的用途。

流式布局：

流式布局（Flow Layout）是一种在图形用户界面（GUI）设计中常用的布局方式，以下是详细介绍：

一、基本原理

1. 组件排列顺序
   • 流式布局按照从左到右的顺序依次排列组件。当一行排满时，组件会自动换行到下一行继续排列，就像文字在文档中自动换行一样。
2. 适应容器大小
   • 它能够根据容器（如面板）的大小自动调整组件的位置。如果容器的宽度增加，组件会在水平方向上尽可能地展开；如果容器宽度减小，组件会自动紧凑地排列，甚至换行。

二、常见属性和应用

1. 间距设置

   • 流式布局通常有水平间距（hgap）和垂直间距（vgap）属性。这些属性用于控制组件之间的间隔距离，以像素为单位。例如，在Java的FlowLayout中，可以在构造函数中指定这些间距参数，来调整界面的美观程度和组件的分布情况。

2. 对齐方式

   • 它有不同的对齐方式，常见的有左对齐、居中对齐和右对齐。在Java中，FlowLayout类有对应的常量（如FlowLayout.LEFT、FlowLayout.CENTER、FlowLayout.RIGHT）来设置组件在容器中的对齐方式。
   • 以一个简单的Java GUI程序为例，使用FlowLayout可以这样编写代码：

   import javax.swing.JButton;
   import javax.swing.JFrame;
   import javax.swing.JPanel;
   import java.awt.FlowLayout;
   
   public class FlowLayoutExample {
       public static void main(String[] args) {
           Frame frame = new Frame("Flow Layout Example");
           Panel panel = new Panel(new FlowLayout(FlowLayout.CENTER, 10, 10));
           panel.add(new Button("Button 1"));
           panel.add(new Button("Button 2"));
           panel.add(new Button("Button 3"));
           frame.add(panel);
           frame.setSize(300, 200);
           frame.setVisible(true);
           frame.setDefaultCloseOperation(Frame.EXIT_ON_CLOSE);
       }
   }
   

   • 在这个例子中，创建了一个Frame（窗口），并在其中添加了一个Panel（面板），面板采用FlowLayout布局，组件居中对齐，水平和垂直间距都为10像素。然后向面板中添加了三个按钮，这些按钮会按照流式布局的规则进行排列。

   • 以下是对 new FlowLayout(FlowLayout.CENTER, 10, 10) 的详细解释：

   • 整体作用

     在 Java 的图形用户界面（GUI）编程中，FlowLayout 是一种布局管理器，用于确定容器（如 JPanel 等）中组件（像按钮、文本框等组件）的排列方式。而 new FlowLayout(FlowLayout.CENTER, 10, 10) 这一语句是创建一个 FlowLayout 布局对象，并指定了其特定的布局属性。

     具体参数含义

     1. 第一个参数 FlowLayout.CENTER
        • FlowLayout 类提供了几种对齐方式的常量，FlowLayout.CENTER 表示组件在容器中的水平对齐方式为居中对齐。除此之外，还有 FlowLayout.LEFT（左对齐）和 FlowLayout.RIGHT（右对齐）。例如，当使用 FlowLayout.CENTER 时，添加到容器（如 JPanel ）中的组件（如按钮）会在水平方向上尽可能地居于容器中间位置进行排列。
     2. 第二个参数 10（水平间距）
     3. 第三个参数 10（垂直间距）

   • 这里面的LayoutManager Layout啥意思

     • new Panel(LayoutManager layout) 是一个构造函数调用。这里的 LayoutManager 是一个类型，而 layout 是一个参数，它应该是一个实现了 LayoutManager 接口的类的实例。

三、适用场景

1. 动态内容展示
   • 当界面中的组件数量不确定或者可能动态变化时，流式布局非常适用。例如，在一个展示图片的应用程序中，如果用户不断添加图片，使用流式布局可以让这些图片自动排列，无需手动调整布局。
2. 简单的表单设计
   • 对于一些简单的表单，如登录界面、注册界面等，其中包含多个输入框和按钮，采用流式布局可以快速地将这些组件整齐地排列起来。

总之，流式布局以其简单、灵活的特点，在GUI设计中得到了广泛的应用。

示例代码：

package com.liu.gui.lesson1;

import java.awt.*;

public class TestFlowLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("坤坤の窗口");

        //按钮
        Button button1 = new Button("button1");
        Button button3 = new Button("button3");
        Button button2 = new Button("button2");

        //设置为流式布局
        frame.setLayout(new FlowLayout(FlowLayout.LEFT));//居左
        //frame.setLayout(new FlowLayout(FlowLayout.RIGHT));//居左
        //frame.setLayout(new FlowLayout());//居中

        frame.setSize(200,200);

        //添加按钮
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);

        frame.setVisible(true);
    }
}

Border Layout（边界布局）

1. • 原理：将容器划分为五个区域，分别是北（North）、南（South）、东（East）、西（West）和中（Center）。每个区域只能放置一个主要组件，组件会自动填充所在的区域。例如，放置在 “North” 区域的组件会在容器的顶部横向伸展，放置在 “Center” 区域的组件会填充中间部分并在其他组件放置后占用剩余的空间。
   • 应用场景：常用于设计主框架式的布局，如一个具有菜单栏（North）、状态栏（South）、工具面板（East 或 West）和主要内容显示区（Center）的应用程序界面。
   • 示例代码（Java）：

   import javax.swing.JButton;
   import javax.swing.JFrame;
   import javax.swing.JPanel;
   import java.awt.BorderLayout;

   public class BorderLayoutExample {
       public static void main(String[] args) {
           JFrame frame = new JFrame("Border Layout Example");
           JPanel panel = new JPanel(new BorderLayout());
           panel.add(new JButton("North Button"), BorderLayout.NORTH);
           panel.add(new JButton("South Button"), BorderLayout.SOUTH);
           panel.add(new JButton("East Button"), BorderLayout.EAST);
           panel.add(new JButton("West Button"), BorderLayout.WEST);
           panel.add(new JButton("Center Button"), BorderLayout.CENTER);
           frame.add(panel);
           frame.setSize(300, 200);
           frame.setVisible(true);
           frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       }
   }

代码：

package com.liu.gui.lesson1;

import java.awt.*;

public class TestBorderLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("鲲鲲の");

        Button east = new Button("East");
        Button west = new Button("West");
        Button north = new Button("North");
        Button south = new Button("South");
        Button center = new Button("Center");

        frame.add(east,BorderLayout.EAST);
        frame.add(west,BorderLayout.WEST);
        frame.add(north,BorderLayout.NORTH);
        frame.add(south,BorderLayout.SOUTH);
        frame.add(center,BorderLayout.CENTER);

        frame.setSize(800,800);
        frame.setVisible(true);
    }
}

Grid Layout（网格布局）

• 原理：把容器的空间划分成规则的网格状，组件按照从左到右、从上到下的顺序依次填充到这些网格中。所有网格的大小相同，组件会自动拉伸以适应网格的大小。可以指定网格的行数和列数。

• 应用场景：适用于排列多个大小相同的组件，如计算器界面上的数字按钮和操作符按钮，或者棋牌类游戏的棋盘格布局。

• 语法：

• public GridLayout() {
  	this( rows: 1, cols: 0, hgap: 0, vgap: 0);
  }
  

• 示例代码（Java）：

   import javax.swing.JButton;
   import javax.swing.JFrame;
   import javax.swing.JPanel;
   import java.awt.GridLayout;

   public class GridLayoutExample {
       public static void main(String[] args) {
           JFrame frame = new JFrame("Grid Layout Example");
           JPanel panel = new JPanel(new GridLayout(3, 3));
           for (int i = 1; i <= 9; i++) {
               panel.add(new JButton(String.valueOf(i)));
           }
           frame.add(panel);
           frame.setSize(300, 200);
           frame.setVisible(true);
           frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       }
   }

package com.liu.gui.lesson1;

import java.awt.*;

public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("鲲鲲のhahhaa");

        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");
//设置3行2列的布局
frame.setLayout(new GridLayout(3,2));

frame.add(button1);
frame.add(button2);
frame.add(button3);
frame.add(button4);
frame.add(button5);
frame.add(button6);

frame.setVisible(true);

frame.pack();

    }

}

frame.pack()的主要作用:

根据框架（frame）内的组件大小和布局来自动调整框架的大小。它会计算所有添加到框架中的组件所需要的空间，并将框架设置为刚好能容纳这些组件的最小尺寸。

frame.pack()与setSize()方法的对比:

• 与setSize()方法不同，setSize()是手动设置框架的大小，而pack()是自动根据组件来调整大小。
• 如果使用setSize()，需要准确地知道框架应该设置为多大才能很好地展示组件，这在组件数量较多或者布局复杂时可能比较困难。而pack()可以自动处理这些问题，让组件能够以合适的方式显示在框架内。

作业：