Java 与图形化界面
作者: dkvirus 发表于: 2018-08-14 08:55:10 最近更新: 2018-08-14 16:26:48

图形化界面工作中基本用不上,毕竟写界面用 html 不要太方便。这种为了跟着 how2j 老师的节奏走,也记录一下 java 图形化界面的学习笔记。

一、页面排版

1. 布局

1.1 相对定位

1
frame.setLayout(null)

跟 html 中的 position: absolute; 有点像,子组件相对于容器进行定位。每个子组件都要设置宽高以及定位,否则不显示。

1.2 流式布局

1
frame.setLayout(new FlowLayout());

跟 html 中默认的 position: static; 有点像,每个子组件都有默认的宽高,不必再手动设置宽高定位等,默认从左往右,从上往下排布,一行排不下会自动换行。

1.3 BorderLayout 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public static void main(String[] args) {

JFrame frame = new JFrame("BorderLayout 布局");
frame.setSize(400, 300);
frame.setLocation(200, 200);
// 设置布局器为BorderLayerout
// 容器上的组件按照上北下南左西右东中的顺序摆放
frame.setLayout(new BorderLayout());

JButton b1 = new JButton("上");
JButton b2 = new JButton("下");
JButton b3 = new JButton("左");
JButton b4 = new JButton("右");
JButton b5 = new JButton("中");

// 加入到容器的时候,需要指定位置
frame.add(b1, BorderLayout.NORTH);
frame.add(b2, BorderLayout.SOUTH);
frame.add(b3, BorderLayout.WEST);
frame.add(b4, BorderLayout.EAST);
frame.add(b5, BorderLayout.CENTER);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}

这种布局 html 中没有对应的布局方式,BorderLayout 布局将容器分为上下左右中五个区域。运行效果图如下:

java与图形化界面图1

1.4 表格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public static void main(String[] args) {

JFrame frame = new JFrame("GridLayout 布局");
frame.setSize(400, 300);
frame.setLocation(200, 200);

// 设置布局器为GridLayerout,即网格布局器
// 该GridLayerout的构造方法表示该网格是2行3列
frame.setLayout(new GridLayout(2, 3));

JButton btn1 = new JButton("1");
JButton btn2 = new JButton("2");
JButton btn3 = new JButton("3");
JButton btn4 = new JButton("4");
JButton btn5 = new JButton("5");
JButton btn6 = new JButton("6");

frame.add(btn1);
frame.add(btn2);
frame.add(btn3);
frame.add(btn4);
frame.add(btn5);
frame.add(btn6);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}

早起写 html 布局的时候还会用到表格进行布局,不过 h5 以后基本没人再用 table 进行布局了。上面代码运行效果图如下:

java与图形化界面图2

2. 面板

面板作为中间容器,将组件添加到面板中,再将面板添加到容器中。面板一定程度可以控制布局,常用面板有:

  • 基础面板 JPanel;
  • 左右分割面板 JSplitPane;
  • 滚动面板 JScrollPane;
  • tab 面板 JTabbedPane。

关于面板具体使用,参考:how2j-java图形化编程-面板

二、页面组成

1. 组件

组件 说明 html中标签
JFrame 窗体型容器组件,右上角有最大化、最小化按钮 div
JDialog 模态框容器组件,此时背后 JFrame 不能被激活 div
JPanel 基础面板组件
JSplitPane 左右分割面板组件
JScrollPane 滚动面板组件
JTabbedPane tab面板组件
JButton 按钮 button
JLabel 标签 label
ImageIcon 图标 img
JComboBox 下拉框 select
JOptionPane 弹出对话框,有三种对话框可供选择 alert confirm
JRadioButton 单选按钮 input type=”radio”
JCheckBox 多选/复选按钮 input type=”checkbox”
JTextField 当行文本框 input type=”text”
JPasswordField 密码框 input type=”password”
JFileChooser 文件选择 input type=”file”
JTextArea 多行文本域 textarea
JProgressBar 进度条
JTable 表格 table
JToolBar 工具栏
JMenuBar 菜单栏
JMenu 菜单

具体使用参阅 how2j-java图形化编程-组件

2. 菜单栏

how2j-java图形化编程-菜单栏

3. 工具栏

how2j-java图形化编程-工具栏

4. 表格

how2j-java图形化编程-表格

三、方法与事件

1. 方法

方法 说明
setSize(width, height) 设置组件宽高值
setLocation(x, y) 设置组件位置,以组件左上角为原点,距屏幕左上角的距离
setBounds(x, y, width, height) setSize() 和 setLocation() 简写
setLayout(null) 设置子组件的布局为相对定位
setIcon(icon) 设置子组件为图标
add(btn) 添加子组件
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 设置关闭窗口时,退出 java 程序
setVisible(true); 设置组件显示/隐藏
setText(“xx”) 设置组件内的文本
setTitle(“xx”) 设置容器型组件的窗口标题
setResizable(false) 设置容器窗口大小不可变化
setModal(true) JDialog 组件专有方法,设置为模态框时背后 JFrame 不能被激活
setSelected(true) 设置 JCheckBox/JRadioButton 组件为选中状态
setSelectedItem(strArr) 设置下拉框组件 JComboBox 中选项,参数可以是字符串数组
setPreferredSize(new Dimension(120, 30)) 在流式布局中设置组件的宽高
setLineWrap(true) 多行文本域组件 JTextArea 设置自动换行
setMaximum(100) 进度条组件 JProgressBar 设置进度条最大值
setValue(50) 进度条组件 JProgressBar 设置当前进度值
setStringPainted(true) 进度条组件 JProgressBar 显示当前进度
setBackground(Color.BLUE) 设置背景颜色
getX() 获取组件的 x 坐标
getY() 获取组件的 y 坐标
getText() 获取组件内的文本
getSelectedItem() 获取下拉框组件 JComboBox 中选择的项
isSelected() 获取 JCheckBox/JRadioButton 组件是否被选中,返回值 true/false

2. 事件

2.1 按钮点击事件

1
2
3
4
5
6
7
8
btn.addActionListener(new ActionListener() {

// 点击按钮触发事件在这里写
public void actionPerformed(ActionEvent e) {
label.setVisible(false);
}

});

2.2 键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
frame.addKeyListener(new KeyListener() {

public void keyTyped(KeyEvent e) {
// .... 这个方法没搞明白什么用,有资料说是组合键
}

// 键松开触发事件
public void keyReleased(KeyEvent e) {
if (e.getKeyCode() == 39) { // 39 为键盘上向右方向键
label.setLocation(label.getX() + 10, label.getY());
}
}

// 键按下触发事件
public void keyPressed(KeyEvent e) {
System.out.println("keyPressed() 方法:" + e.getKeyChar());
}
});

keycode 对应数字的含义在 这里 查。

常用几个 keyCode 对应值:上(38)、下(40)、左(37)、右(39)。

2.3 鼠标事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
label.addMouseListener(new MouseListener() {

public void mouseReleased(MouseEvent e) {
System.out.println("鼠标松开时触发事件");
}

public void mousePressed(MouseEvent e) {
System.out.println("鼠标按下时触发事件");
}

public void mouseExited(MouseEvent e) {
System.out.println("鼠标离开时触发事件");
}

// 鼠标移入组件时触发事件
public void mouseEntered(MouseEvent e) {
Random r = new Random();

int x = r.nextInt(frame.getWidth() - label.getWidth());
int y = r.nextInt(frame.getHeight() - label.getHeight());

label.setLocation(x, y);
}

public void mouseClicked(MouseEvent e) {
System.out.println("鼠标点击时触发事件");
}
});

当鼠标点击时(笔记本电脑触摸板也可以模拟鼠标点击),会依次触发:mousePressed > mouseReleased > mouseClicked

首页
友链
归档
dkvirus
动态
RSS