GUI（图形用户界面）【上】

最新推荐文章于 2024-03-05 10:30:14 发布

码歌的歌

最新推荐文章于 2024-03-05 10:30:14 发布

阅读量1k

点赞数 1

文章标签： Java GUI 码歌

本文链接：https://blog.csdn.net/magedege/article/details/95343945

版权

主要内容

$[外链图片转存失败(img-QlEATzis-1562729010319)(C:\Users\Administrator\Desktop\20190708_awt\01-awt主要内容.png)]$

核心目标

Frame
布局管理器
事件
太阳系
JFrame
JPanel
拼图游戏

第一节 AWT概述与学习

1.1 缘由

之前所有的程序都是基于命令行的，基于命令行的程序可能只有一些“专业”的计算机人员才能使用，很少有用户会对着什么都没有的命令行界面操作命令。

如果可以给程序提供图形用户界面（Graphics User Interface，GUI），最终可以通过操作鼠标简单动作来完成，这样程序就会受欢迎得多。

Sun提供了一套基本的GUI类库，这个GUI类库希望可以在所有平台上都可以运行，这套基本类库被称为“抽象窗口工具集（Abstract Window Toolkit）”，它为Java应用程序提供了基本的图形组件。

AWT是窗口框架，它抽取了不同平台的窗口系统中的共同组件，也就是AWT编写图形界面应用时，程序仅指定了界面组件的位置和行为，并未提供真正的实现。

AWT是图形用户界面编程的基础，Swing组件替代了绝大部分AWT组件，对AWT图形用户界面编程有极好的补充和加强。

想要其他更多资料，可以加我微信mageit

1.2 AWT容器

在程序员的角度看一个窗口，是由多个部分组合而成（如下图所示）。

[外链图片转存失败(img-o1nVvD3r-1562729010321)(C:\Users\Administrator\Desktop\20190708_awt\02-awt窗口分解图.png)]

也就是说任何窗口我们都可以看做是一个空的容器，里面放置了很多组件，整体拼接组合而成。整个图形界面编程其实非常简单，就和“拼图”游戏一样，通过容器这样一个母版，然后添加普通组件。我们在创建图形用户界面的过程就是拼图的过程。

1.3容器介绍和使用

AWT容器的继承关系如下图：

$[外链图片转存失败(img-qRNwiZTU-1562729010322)(C:\Users\Administrator\Desktop\20190708_awt\03-awt容器继承关系图.jpg)]$

容器（Container）是Component的子类，因此容器对象本身也就是一个组件，可以调用Componet类的所有方法。

AWT主要提供了两种主要的容器类型。

Window：可独立存在的顶层窗口。
Panel：可作为容器容纳其他组件，但不能独立存在，必须被添加到其他容器中。

Window类的子类中，代表常见的窗口，具有以下特点：

Frame对象有标题，允许通过拖拉改变窗口位置和大小，也可以设置为禁止。
默认是不可见的，需要设置可见性。
默认使用BorderLayout，可以设置布局管理器方式。

想要其他更多资料，可以加我微信mageit

1.3.1 Frame举例

举例：使用Frame创建窗口

package com.xx.awt;
import java.awt.Frame;
/*
 * 练习使用Frame
 */
public class Test01 {

	public static void main(String[] args) {
		//创建Frame对象
		Frame f = new Frame();
		//设置窗口对象的标题
		f.setTitle("My first Frame");
		//设置窗口大小
		f.setSize(600, 600);
		//设置窗口显示起始位置
		f.setLocation(200, 200);
		//设置窗口显示出来
		f.setVisible(true);
	}
}

效果展示：
在这里插入图片描述

问题：

点击关闭按钮，发现并没有成功，需要点击关闭运行文件才可以关闭窗口。这个在我们后面讲事件一起解决。
想要其他更多资料，可以加我微信mageit

1.3.2 Panel举例

Panel是AWT另一个典型的容器，是不能独立、需要放在其它容器中的容器。外在形式是一个矩形区域，可装其他组件。特点：

可以作为容器盛装其他组件，提供空间。
不能单独存在，必须放置在其他容器中。
默认使用FlowLayout作为其布局管理器

举例：使用Panel盛装一个文本框和一个按钮，并将该Panel对象添加到Frame对象中

package com.xx.awt;
import java.awt.Button;
import java.awt.Frame;
import java.awt.Panel;
import java.awt.TextField;
/*
 * 练习使用Panel作为容器盛装一个文本框和一个按钮，并将该Panel添加到Frame
 */
public class PanelTest02 {

	public static void main(String[] args) {
		//创建Frame对象，可以通过构造器添加标题
		Frame f = new Frame("My First Panel");
		//创建一个Panel容器
		Panel p = new Panel();
		//容器中添加两个组件
		p.add(new TextField(20));
		p.add(new Button("点我"));
		//将Panel添加到Frame窗口
		f.add(p);
		//设置窗口的大小、位置
		f.setBounds(30, 30, 300, 200);
		//将窗口设置显示出来
		f.setVisible(true);
	}
}

效果展示：

在这里插入图片描述

1.3.3 ScrollPane

ScrollPane是一个带滚动条的容器，不能独立存在，必须添加到其他容器中。

特点：

作为容器盛装其他组件，当组件占用空间过大，会自动生成滚动条。
不能单独存在，必须放置在其他容器中。
默认使用BorderLayout作为其布局管理器。

举例：

package com.xx.awt;
import java.awt.Button;
import java.awt.Frame;
import java.awt.ScrollPane;
import java.awt.TextField;
/*
 * 使用ScrollPane容器添加文本框和按钮，并添加到Frame对象
 */
public class ScrollPaneTest {

	public static void main(String[] args) {
		//创建Frame窗口，并给标题定义
		Frame f = new Frame("My First ScrollPane");
		//创建一个ScrollPane容器，指定总是有滚动条
		ScrollPane sp = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS);
		//向ScrollPane中添加两个组件
		sp.add(new TextField(20));
		sp.add(new Button("来来，点我"));
		//将ScrollPane添加到Frame对象中
		f.add(sp);
		//设置窗口的大小、位置
		f.setBounds(100, 100, 200, 100);
		//设置窗口显示出来
		f.setVisible(true);
		
	}
}

效果展示：

在这里插入图片描述

1.4布局管理器

为了贯彻与平台无关的特性，Java语言对图形用户界面提出了布局管理器来管理组件在容器中的布局，而不是直接设置组件大小和位置的方式。

AWT提供了5种常用的布局管理器。

1.4.1 FlowLayout布局管理器

组件像水流一样向某个方向流动，走到尽头就折回，重新开始排列。其中构造器可以设置对其方式、默认的垂直间距和水平间距。

举例：

package com.xx.awt02;
import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.Frame;
/*
 * 使用FlowLayout布局管理
 * 添加10个按钮，查看效果
 */
public class FlowTest {

	public static void main(String[] args) {
		//创建Frame对象，设置标题
		Frame f = new Frame("布局管理器");
		//设置Frame容器为FlowLayout布局管理器
		f.setLayout(new FlowLayout(FlowLayout.LEFT,20,5));
		//循环添加10个按钮
		for(int i=0;i<10;i++){
			f.add(new Button("Button"+i));
		}
		//设置窗口为最佳大小
		f.pack();
		//将窗口显示出来
		f.setVisible(true);
	}
}

效果展示：

在这里插入图片描述

1.4.2BorderLayout布局管理器

将容器分为EAST、WEST、NORTH、SOUTH、CENTER五个区域，普通组件可以被放置在这5个区域的任意一个。

特点：

使用BorderLayout布局管理器的容器添加组件时，需要指定到哪个区域中。如果没有，默认是中间。
如果向同一个区域中添加多个组件，后面的会覆盖之前的。

举例：

package com.xx.awt02;
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Frame;
/*
 * 使用BorderLayout，放置东西南北中不同方向按钮
 */
public class BorderTest {

	public static void main(String[] args) {
		Frame f = new Frame("Border Test");
		//设置Frame容器使用BorderLayout布局管理器(水平间距，垂直间距)
		f.setLayout(new BorderLayout(30,5));
		f.add(new Button("东"), BorderLayout.EAST);
		f.add(new Button("西"), BorderLayout.WEST);
		f.add(new Button("中"));
		f.add(new Button("南"), BorderLayout.SOUTH);
		f.add(new Button("北"), BorderLayout.NORTH);
		//设置窗口为最佳大小
		f.pack();
		f.setVisible(true);		
	}
}

效果展示：

在这里插入图片描述

1.4.3 GridLayout布局管理器

将容器分割成纵横线分隔的“格子”，每个网格所占区域大小相同。默认从左向右、从上向下添加到网格中，每个组件将自动占满整个区域。

特点：

可以指定行数、列数，以及默认的横向间距、纵向间距。
也可以自定义设置分隔成多个网格。

举例：

package com.xx.awt02;
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Frame;
import java.awt.GridLayout;
import java.awt.Panel;
import java.awt.TextField;
/*
 * 练习GridLayout，开发一个计算器的可视化窗口
 */
public class Grid {

	public static void main(String[] args) {
		Frame f = new Frame("计算器");
		Panel p1 = new Panel();
		p1.add(new TextField(30));
		f.add(p1, BorderLayout.NORTH);
		Panel p2 = new Panel();
		//设置p2使用GridLayout布局管理器
		p2.setLayout(new GridLayout(3,5,4,4));
		//设置数组名字，用来显示计算器上的按键
		String[] name = {"0","1","2","3",
				"4","5","6","7","8",
				"9","+","-","*","/","."};
		//向Panel中依次添加15个按钮
		for(int i=0;i<name.length;i++){
			p2.add(new Button(name[i]));
		}
		f.add(p2);
		f.pack();
		f.setVisible(true);
	}
}

效果展示：

$[外链图片转存失败(img-JUPGpqbu-1562729010328)(C:\Users\Administrator\Desktop\20190708_awt\1562591303353.png)]$

1.4.4 GridBagLayout布局管理器

功能最强大，但也是最复杂，与GridLayout布局管理器不同的是，在GridBagLayout布局管理器中，一个组件可以跨越一个或多个网格，并可以设置各网格的大小互不相同，从而增加了布局的灵活性。

举例：

package com.xx.awt02;

import java.awt.Button;
import java.awt.Frame;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

/*
 * 使用GridBagLayout布局管理器来管理窗口中的10个按钮
 */
public class GridBagTest {
	//初始化属性
	private Frame f = new Frame("GridBagTest");
	private GridBagLayout gb = new GridBagLayout();
	private GridBagConstraints gbc = new GridBagConstraints();
	private Button[] bs = new Button[10];
	public void init(){
		f.setLayout(gb);
		for(int i=0;i<bs.length;i++){
			bs[i] = new Button("按钮"+i);
		}
		//所有组件都可以在横向、纵向上扩大
		gbc.fill = GridBagConstraints.BOTH;
		gbc.weightx = 1;
		addButton(bs[0]);
		addButton(bs[1]);
		addButton(bs[2]);
		//该GridBagConstraints控制的GUI组件将会成为横向最后一个组件
		gbc.gridwidth = GridBagConstraints.REMAINDER;
		addButton(bs[3]);
		//控制组件在横向上不会扩大
		gbc.weightx = 0;
		addButton(bs[4]);
		//控制组件横跨两个网格
		gbc.gridwidth = 2;
		addButton(bs[5]);
		//控制组件横跨一个网格
		gbc.gridwidth = 1;
		//纵向上跨两个网格
		gbc.gridheight = 2;
		//设置为在横向上最后一个组件
		gbc.gridwidth = GridBagConstraints.REMAINDER;
		addButton(bs[6]);
		//横向跨越一个网格，纵向跨越两个网格
		gbc.gridwidth = 1;
		gbc.gridheight = 2;
		//设置组件纵向扩大的权重是1
		gbc.weighty = 1;
		addButton(bs[7]);
		//设置下面的按钮在纵向上不会扩大
		gbc.weighty = 0;
		//设置为在横向上最后一个组件
		gbc.gridwidth = GridBagConstraints.REMAINDER;
		//设置纵向上横跨一个网格
		gbc.gridheight = 1;
		addButton(bs[8]);
		addButton(bs[9]);
		f.pack();
		f.setVisible(true);
		
	}
	private void addButton(Button btn){
		gb.setConstraints(btn, gbc);
		f.add(btn);
	}
	public static void main(String[] args) {
		new GridBagTest().init();
	}
		
}

效果展示：

$[外链图片转存失败(img-ncgwqWcd-1562729010329)(C:\Users\Administrator\Desktop\20190708_awt%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1562637327185.png)]$

1.4.5 CardLayout布局管理器

以时间而不是空间来管理其中的组件，它将加入容器的所有组件看成一叠卡片，每次也只有最上面的那个Component才可见。就像一副扑克牌，他们叠在一起，每次都只是最上面的一张扑克牌才可见。

想要其他更多资料，可以加我微信mageit

码歌的歌

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
GUI（图形用户界面）【上】

主要内容核心目标 Frame 布局管理器事件太阳系 JFrame JPanel 拼图游戏第一节 AWT概述与学习1.1 缘由之前所有的程序都是基于命令行的，基于命令行的程序可能只有一些“专业”的计算机人员才能使用，很少有用户会对着什么都没有的命令行界面操作命令。如果可以给程序提供图形用户界面（Graphics User Interface，GUI），最终可以通过操...
复制链接

扫一扫