图形用户界面（gui）开发
图形用户界面（gui）开发
- 界面布局
-
- 布局开发步骤
- 边界布局（BorderLayout）
- 流式布局(FlowLayout)
- 网格布局（GrildLayout）
- swing组件
-
- 面板组件（JPanel）
- 几种常用组件
-
- 标签框（JLabel），文本框（JTextField）
- 复选框组件（JCheckBox），单选框组件(JRadioButton)
- 下拉框（JComboBox）,列表框（JList），滚动窗格（JScrollPane）
- 拆分窗格（JSplitPane）
- 多行文本框组件（JTextArea）
- 提及的组件类型综合运用）
- 记事本编写（拿督版）
界面布局
布局开发步骤
- 继承JFrame
- 定义需要的组件
- 创建组件
- 设置布局管理器
- 添加组件
- 显示窗口
边界布局（BorderLayout）
在布局中默认是边界布局
按键按：中，东，西，南，北分布，也可以不放满。
package com.zhongjiam.java;
import java.util.*;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
//把需要的组件定义放在这里
JButton jb0,jb1,jb2,jb3,jb4;
public static void main(String []args) {
text1 t = new text1();
}
public text1() {
jb0 = new JButton("中");
jb1 = new JButton("上");
jb2 = new JButton("下");
jb3 = new JButton("左");
jb4 = new JButton("右");
this.add(jb0, BorderLayout.CENTER);
this.add(jb1,BorderLayout.NORTH);
this.add(jb2, BorderLayout.SOUTH);
this.add(jb3,BorderLayout.WEST);
this.add(jb4,BorderLayout.EAST);
this.setTitle("bilibili");
this.setSize(500, 500);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
流式布局(FlowLayout)
1.组件按：从左往右放置在容器中，到达边界时换下一行。可以有：左中右对齐三种（默认位居中对齐）。
2.按键不会随着窗口的缩放而改变。
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
//把需要的组件定义放在这里
JButton jb1,jb2,jb3,jb4,jb5,jb6;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1() {
jb1 = new JButton("一");
jb2 = new JButton("二");
jb3 = new JButton("三");
jb4 = new JButton("四");
jb5 = new JButton("五");
jb6 = new JButton("六");
this.add(jb1);
this.add(jb2);
this.add(jb3);
this.add(jb4);
this.add(jb5);
this.add(jb6);
//设置布局管理器
this.setLayout(new FlowLayout(FlowLayout.RIGHT/*设置对齐方式，默认位居中*/));
this.setTitle("流式布局");
this.setSize(500,500);
this.setLocation(500, 500);
this.setResizable(false);//禁止用户拖动改变界面大小
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
网格布局（GrildLayout）
1.组件随着窗口的伸缩，组件间的间隙不会改变，但是组件的大小会发生改变。
2.所有组件大小相同。
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
int size=9;
JButton jbs[] = new JButton[size];
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
for(int i=0;i<size;i++)
{
jbs[i]=new JButton(String.valueOf(i));
}
this.setLayout(new GridLayout(3,3,10,10));//(3rows,3cols)表示行列(10hgap,10vgap)表示行列间隙
for(int i=0;i<size;i++)
{
this.add(jbs[i]);
}
this.setTitle("网格布局");
this.setSize(500, 500);
this.setLocation(500, 500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
swing组件
面板组件（JPanel）
- JPanel是JComponent的子类
- 属于容器类组件，可以加入别的组件
- 默认布局管理器是流式布局（FlowLayout）
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JPanel jp1,jp2;
JButton jb1,jb2,jb3,jb4,jb5,jb6;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
jp1 = new JPanel();//JPanel布局默认是FlowLayout
jp2 = new JPanel();
jb1 = new JButton("A");
jb2 = new JButton("B");
jb3 = new JButton("C");
jb4 = new JButton("D");
jb5 = new JButton("E");
jb6 = new JButton("F");
jp1.add(jb1);
jp1.add(jb2);
jp1.add(jb3);
jp2.add(jb4);
jp2.add(jb5);
this.add(jp1,BorderLayout.NORTH);
this.add(jp2,BorderLayout.SOUTH);
this.add(jb6,BorderLayout.CENTER);
this.setSize(500, 500);
this.setLocation(500,500);
this.setResizable(false);//不可伸缩窗口大小
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
几种常用组件
标签框（JLabel），文本框（JTextField）
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JButton jb1,jb2;
JLabel jl1,jl2;
JPanel jp1,jp2,jp3;
JTextField jtf1,jtf2;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
//引入组件
jb1 = new JButton("登录");
jb2 = new JButton("取消");
jl1 = new JLabel("用户名");
jl2 = new JLabel("密 码");
jp1 = new JPanel();
jp2 = new JPanel();
jp3 = new JPanel();
jtf1 = new JTextField(10);//文本宽度
jtf2 = new JTextField(10);
//选择窗口布局方式
this.setLayout(new GridLayout(3,1));
//添加组件进窗口内
jp1.add(jl1);
jp1.add(jtf1);
jp2.add(jl2);
jp2.add(jtf2);
jp3.add(jb1);
jp3.add(jb2);
this.add(jp1);
this.add(jp2);
this.add(jp3);
//设置窗口的形态
this.setTitle("qq登录页面");
this.setSize(500, 300);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//显示窗口
this.setVisible(true);
}
}
复选框组件（JCheckBox），单选框组件(JRadioButton)
单选框组件必须先放进ButtonGroup内，但是在添加时还是一个一个jb加入到界面内
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JPanel jp1,jp2,jp3;
JLabel jl1,jl2;
JButton jb1,jb2;
JCheckBox jcb1,jcb2,jcb3;
JRadioButton jrb1,jrb2;
ButtonGroup bg; //把单选的组件放进一个ButtonGroup
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
//引入组件
jp1 = new JPanel();
jp2 = new JPanel();
jp3 = new JPanel();
jl1 = new JLabel("你喜欢的运动");
jl2 = new JLabel("你的性别");
jb1 = new JButton("注册用户");
jb2 = new JButton("取消注册");
jcb1 = new JCheckBox("足球");
jcb2 = new JCheckBox("篮球");
jcb3 = new JCheckBox("网球");
jrb1 = new JRadioButton("男");
jrb2 = new JRadioButton("女");
ButtonGroup bg = new ButtonGroup();
bg.add(jrb1);
bg.add(jrb2);
//选择窗口布局方式
this.setLayout(new GridLayout(3,1));
//添加组件进窗口内
jp1.add(jl1);
jp1.add(jcb1);
jp1.add(jcb2);
jp1.add(jcb3);
jp2.add(jl2);
jp2.add(jrb1);
jp2.add(jrb2);
jp3.add(jb1);
jp3.add(jb2);
this.add(jp1);
this.add(jp2);
this.add(jp3);
//设置窗口的形态
this.setTitle("qq登录页面");
this.setSize(500, 300);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//显示窗口
this.setVisible(true);
}
}
下拉框（JComboBox）,列表框（JList），滚动窗格（JScrollPane）
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JPanel jp1,jp2;
JLabel jl1,jl2;
JComboBox jcb1;//下拉框
JList jlist;//列表
JScrollPane jsp;//滑动窗格
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
//引入组件
jp1 = new JPanel();
jp2 = new JPanel();
jl1 = new JLabel("你的籍贯");
jl2 = new JLabel("旅游地点");
String jg[] = {"北京","上海","天津","瑞金"};
jcb1 = new JComboBox(jg);//下拉框，当下拉框内地址过多时会默认加入滚动窗口
String dd[] = {"无限山","塔下寺","彩虹桥","红都广场","木鱼山"};
jlist = new JList(dd);//列表
jlist.setVisibleRowCount(3);//展示的个数
jsp = new JScrollPane(jlist);//可以滚动查看列表,不加的话会展示全部内容
//选择窗口布局方式
this.setLayout(new GridLayout(3,1));
//添加组件进窗口内
jp1.add(jl1);
jp1.add(jcb1);
jp2.add(jl2);
jp2.add(jsp);//这里必须是加jsp而不能加list
this.add(jp1);
this.add(jp2);
//设置窗口的形态
this.setTitle("qq登录页面");
this.setSize(500, 300);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//显示窗口
this.setVisible(true);
}
}
拆分窗格（JSplitPane）
JSplitPane属于容器类组件。
知识点：
- 放入图片标签
- 拆分窗格
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JSplitPane jsp;
JList jlist;
JLabel jl1;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
String []words = {"apple","banana","tree","flower","grass"};
jlist = new JList(words);
jl1 = new JLabel (new ImageIcon("photo/微信截图_20200731194318.png"));//放入图片标签
jsp = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,jlist,jl1);//horizontal表示水平拆分，后面从左往右防止组件
jsp.setOneTouchExpandable(true);//使左右组件可以平移占据窗口大小
this.add(jsp);//只要加入拆分窗格jsp就行
this.setTitle("词典");
this.setSize(500, 500);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
放入图片标签，图片地址如图
多行文本框组件（JTextArea）
- 调试可滑动多行文本框
- 导入多行文本框
- 文本框标题引入图片
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JTextField jtf;
JScrollPane jsp;
JTextArea jta;
JComboBox jcb;
JPanel jp;
JButton jb;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
jta = new JTextArea();
jsp = new JScrollPane(jta);
jtf = new JTextField(10);
String names[] = {"小红","小明","小军","小帅","小菊"};
jcb = new JComboBox(names);
jb = new JButton("发送消息");
jp = new JPanel();
jp.add(jcb);
jp.add(jtf);
jp.add(jb);
this.add(jsp);
this.add(jp,BorderLayout.SOUTH);
this.setIconImage((new ImageIcon("photo/微信截图_20201012170124.png")).getImage());
this.setTitle("qq聊天");
this.setSize(500, 500);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
提及的组件类型综合运用）
1.新增选项卡窗格（JTabbedPane），可以包含多个JPanel.
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
//北部
JLabel jl1;
//南部
JPanel jp1;
JButton jb1,jb2,jb3;
//中部
JTabbedPane jtp;//选项卡窗格（可以在同一快面积切换不同的JPanel）!!!!!!重要
JPanel jp2,jp3,jp4;
JLabel jl2,jl3,jl4,jl5;
//号码
JTextField jtf;
//密码
JPasswordField jpf;
//清除号码
JButton jb4;
//隐身登录 记住密码
JCheckBox jcb1,jcb2;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
//北部
jl1 = new JLabel(new ImageIcon("微信截图_20201012170124.png"));//按键上用图片代替
//南部
jb1 = new JButton(new ImageIcon("微信截图_20201012170124.png"));
jb2 = new JButton(new ImageIcon("微信截图_20201012170124.png"));
jb3 = new JButton(new ImageIcon("微信截图_20201012170124.png"));
//中部
//标签类
jl2 = new JLabel("QQ号码",JLabel.CENTER);//标签位于表格中间
jl3 = new JLabel("QQ密码",JLabel.CENTER);
jl4 = new JLabel("忘记密码",JLabel.CENTER);
jl4.setFont(new Font("仿宋",Font.PLAIN,16));//设置字体样式（font（字体），plain（普通的））
jl4.setForeground(Color.blue);//设置字体颜色
jl5 = new JLabel("申请密码保护");//设置超链接，点击字样可以跳转到网站
jl5.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));//（cursor（光标）predefined（预先定义的））当鼠标移动到有超链接的标签上是，箭头光标变为手
//文本框类
jtf = new JTextField();
jpf = new JPasswordField();
//案件类
jb4 = new JButton(new ImageIcon("微信截图_20201012170124.png"));//清空账号
//选择类
jcb1 = new JCheckBox("隐身登录");
jcb2 = new JCheckBox("记住密码");
//规划布局
jp1 = new JPanel();
jtp = new JTabbedPane();
jp2 = new JPanel();
jp3 = new JPanel();
jp3.setBackground(Color.red);//设置背景颜色
jp4 = new JPanel();
jp4.setBackground(new Color(0,0,255));
//将面板添加到选项卡窗格上
jtp.add("QQ号码",jp2);//（选项卡名称，选项卡对应的JPanel）
jtp.add("手机号码",jp3);
jtp.add("电子邮箱",jp4);
jp2.setLayout(new GridLayout(3,3));
jp1.add(jb1);
jp1.add(jb2);
jp1.add(jb3);
jp2.add(jl2);
jp2.add(jtf);
jp2.add(jb4);
jp2.add(jl3);
jp2.add(jpf);
jp2.add(jl4);
jp2.add(jcb1);
jp2.add(jcb2);
jp2.add(jl5);
this.add(jp1,BorderLayout.SOUTH);
this.add(jl1,BorderLayout.NORTH);
this.add(jtp,BorderLayout.CENTER);
this.setIconImage((new ImageIcon("photo/微信截图_20201012170124.png")).getImage());
this.setTitle("qq登录");
this.setSize(500, 500);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
记事本编写（拿督版）
package com.zhongjiam.java;
import java.awt.*;
import javax.swing.*;
public class text1 extends JFrame{
JMenuBar jmb;
JMenu menu1,menu2,menu3,menu4,menu5;
JMenuItem item2,item3,item4,item5,item6,item7;
JMenu xinjian;
JMenuItem file,project;
JToolBar jtb;
JButton jb1,jb2,jb3,jb4,jb5,jb6;
JTextArea jta;
public static void main(String []args) {
text1 t1 = new text1();
}
public text1()
{
//定义
jmb = new JMenuBar();
menu1 = new JMenu("文件(F)");
menu1.setMnemonic('F');//快捷键（Alt+f）打开文件
menu2 = new JMenu("编辑");
menu3 = new JMenu("格式");
menu4 = new JMenu("查看");
menu5 = new JMenu("帮助");
xinjian = new JMenu("新建");
item2 = new JMenuItem("打开");
item3 = new JMenuItem("保存");
item4 = new JMenuItem("另存为");
item5 = new JMenuItem("页面设置");
item6 = new JMenuItem("打印");
item7 = new JMenuItem("退出");
file = new JMenuItem("文件");
project = new JMenuItem("项目");
jtb = new JToolBar();
jb1 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb1.setToolTipText("新建");//鼠标放置在按键上显示提示语
jb2 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb2.setToolTipText("打开");
jb3 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb3.setToolTipText("保存");
jb4 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb4.setToolTipText("复制");
jb5 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb5.setToolTipText("剪辑");
jb6 = new JButton(new ImageIcon("photo/拿督 (2).png"));
jb6.setToolTipText("粘贴");
jta = new JTextArea();
//添加组件
jmb.add(menu1);
jmb.add(menu2);
jmb.add(menu3);
jmb.add(menu4);
jmb.add(menu5);
menu1.add(xinjian);
menu1.addSeparator();//添加分割线
menu1.add(item2);
menu1.addSeparator();//添加分割线
menu1.add(item3);
menu1.addSeparator();//添加分割线
menu1.add(item4);
menu1.addSeparator();//添加分割线
menu1.add(item5);
menu1.addSeparator();//添加分割线
menu1.add(item6);
menu1.addSeparator();//添加分割线
menu1.add(item7);
xinjian.add(file);
xinjian.add(project);
jtb.add(jb1);
jtb.add(jb2);
jtb.add(jb3);
jtb.add(jb4);
jtb.add(jb5);
jtb.add(jb6);
this.setJMenuBar(jmb);//创建工具栏，与其它不同，工具栏似乎在窗口设计中自占一格
this.add(jtb,BorderLayout.NORTH);
JScrollPane jsp = new JScrollPane(jta);
jsp.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
this.add(jsp);
this.setTitle("记事本");
this.setIconImage(new ImageIcon("photo/拿督 (2).png").getImage());
this.setSize(1000, 800);
this.setLocation(500,500);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
}
}
