死磕Java系列之Java GUI 窗体和布局

蔚落 2022-04-06 05:42 453阅读 0赞

窗体是底层容器，用于放各种组件，常见的容器有JFrame和JDialog两种，JPanel是中间容器，可以放在底层容器中，使用中间容器便于基本组件的管理。布局管理是将容器中的组件按照一定的规则和方式放在容器中。那么,如何定义一个容器呢？容器有大有小，有位置，有标题，这些如何设计呢？中间容器是底层容器和组件的缓冲器，那么，一个框架中可以有两个JPanel？如何在Jpanel中加入各种组件呢？界面布局有很多类型，常见的布局应该如何定义呢？如果不采用布局，各个组件的位置当如何定义？

## （一）容器 ##

容器是用来放各种组件的界面，常见的容器有窗口，对话框，和面板。在定义底层容器的时候需要考虑容器的位置，大小，是否可见，关闭时的操作等。  
Frame 类就是解决这个问题的——它是一个容器，允许程序员把其他组件添加到它里面，把它们组织起来，并把它们呈现给用户。 是Java图形用户界面(GUI)工具包swing中的存放组件的容器。相当于相框。  
JPanel类，是Java图形用户界面(GUI)工具包swing中的面板容器类。相当于画板。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70]  
**（1）窗体**  
[JavaSwing\_4.1: JFrame（窗口][JavaSwing_4.1_ JFrame]  
JFrame；窗体，窗体类似于饭店的桌子或放相片的相框，窗体用来显示给用户界面的整体视感。

import java.awt.Container;
    import javax.swing.JFrame;
    import javax.swing.JLabel;  
     public class TEST02 extends JFrame{     //需要继承JFrame
        public TEST02(String title)
         {
             JFrame jf = new JFrame(title);    
             Container conn = jf.getContentPane();    //得到窗口的容器
             JLabel L1 = new JLabel("Hello,world!");    //创建一个标签 并设置初始内容         
             conn.add(L1);                 //向容器中加入标签
            jf.setBounds(200,200,300,200); //设置窗口的属性 窗口位置以及窗口的大小
             jf.setVisible(true);//设置窗口可见
             jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE); //设置关闭方式 如果不设置的话 似乎关闭窗口之后不会退出程序
         }     
         public static void main(String[] args) {
    	new TEST02("窗口");        //创建窗口
         }
     }

![在这里插入图片描述][20181214155346972.png]

**（2）面板**  
[JavaSwing\_4.2: JDialog（对话框）][JavaSwing_4.2_ JDialog]  
JPanel：面板组件，非顶层容器。  
一个界面只可以有一个JFrame窗体组件，但是可以有多个JPanel面板组件，而JPanel上也可以使用FlowLayout，BorderLayout，GridLayout等各种布局管理器，这样可以组合使用，达到较为复杂的布局效果。

import java.awt.*;
    import javax.swing.*;
    public class TEST02 extends JFrame{
    	//定义组件
    	JPanel jp1,jp2;//定义两个面板
    	JButton jb1,jb2,jb3,jb4,jb5,jb6;//定义按钮
    	public static void main(String[] args) {
    		TEST02 dm=new TEST02();
    	} 
    	//构造函数
    	public TEST02()
    	{
    		//创建组件
    		//面板组件JPanel布局模式默认的是流式布局FlowLayout
    		//实例化面板
    		jp1=new JPanel(); 		
    		jp2=new JPanel();
    		//实例化按钮
    		jb1=new JButton("西瓜");
    		jb2=new JButton("苹果");
    		jb3=new JButton("荔枝");
    		jb4=new JButton("葡萄");
    		jb5=new JButton("橘子");
    		jb6=new JButton("香蕉");
    		//设置布局，JPanel默认布局FlowLayout, 
    		//把组件添加JPanel
    		jp1.add(jb1);
    		jp1.add(jb2);
    		jp2.add(jb3);
    		jp2.add(jb4);
    		jp2.add(jb5);		
    		//把JPanel加入到JFrame，采用流式布局，将按钮放在不同的位置
    		this.add(jp1,BorderLayout.NORTH);
    		this.add(jb6,BorderLayout.CENTER);
    		this.add(jp2,BorderLayout.SOUTH);		
    		//设置窗口属性
    		this.setSize(300,200);
    		this.setLocation(700,500);
    		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    		this.setResizable(false);
    		this.setVisible(true);
    	}
    }

![在这里插入图片描述][20181214155908744.png]

**（3） 对话框**

[JavaSwing\_3.1: JPanel（面板）][JavaSwing_3.1_ JPanel]

*  显示一个错误对话框:

JOptionPane.showMessageDialog(null, "这是内容 ", "这是标题 ", JOptionPane.ERROR_MESSAGE);

![在这里插入图片描述][20181214161720165.png]

*  显示一个信息面板，其 options 为 "yes/no ":

JOptionPane.showConfirmDialog(null, "这是内容", "这是标题", JOptionPane.YES_NO_OPTION);

![在这里插入图片描述][20181214161734450.png]

*  显示一个警告对话框，其 options 为 OK、CANCEL:

Object[] options = { "OK ", "CANCEL " }; 
    JOptionPane.showOptionDialog(null, "这是内容 ", "这是标题 ", JOptionPane.DEFAULT_OPTION, 
    JOptionPane.WARNING_MESSAGE,null, options, options[0]);

![在这里插入图片描述][20181214161747129.png]

*  显示一个要求用户键入 String 的对话框：

//String inputValue = JOptionPane.showInputDialog( "请输入你的内容:"); 
    JOptionPane.showInputDialog( "请输入你的内容:");

![在这里插入图片描述][20181214161758886.png]

*  显示一个要求用户选择 String 的对话框：

Object[] possibleValues = { "First ", "Second ", "Third " }; 
    Object selectedValue = JOptionPane.showInputDialog(null, "这是内容", "这是标题", 
    JOptionPane.INFORMATION_MESSAGE, null, possibleValues, possibleValues[0]);

![在这里插入图片描述][20181214161810540.png]

*  这是一个简单的消息框:

JOptionPane.showMessageDialog(null, "这是一个简单的消息框");

![在这里插入图片描述][20181214161819276.png]

*  这是一个可供用户输入信息的对话框:

JOptionPane.showInputDialog(null, "这是一个可供用户输入信息的对话框");

![在这里插入图片描述][20181214161834681.png]

*  这是个简单的警告框:

JOptionPane.showMessageDialog(null, "这是内容", "这是标题",JOptionPane.WARNING_MESSAGE);

![在这里插入图片描述][20181214161843813.png]

> JOptionPane有三种参数设置类型  
> JOptionPane.showMessageDialog有三种参数设置  
> JOptionPane.showMessageDialog(parentComponent, message);  
> JOptionPane.showMessageDialog(parentComponent, message, title, messageType);  
> JOptionPane.showMessageDialog(parentComponent, message, title, messageType, icon);  
> 参数说明  
> parentComponent: 是对话框所在容器  
> message：是提示消息  
> title：是消息提示框的标题  
> messageType:是消息类型  
> icon：自定义图标

## （二）布局管理 ##

通常，组件放在容器中，组件在容器（比如JFrame）中的位置和大小是由布局管理器来决定的。所有的容器都会使用一个布局管理器，通过它来自动进行组件的布局管理。使用布局管理器， 可以有序的排列组件，而且当窗体发生变化时，布局管理器很根据新版面来适配窗口大小。  
java共提供了五种布局管理器：流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)、网格布局管理器(GridLayout)、卡片布局管理器(CardLayout)、网格包布局管理器(GridBagLayout)。其中前三种是最常见的布局管理器。 默认布局是Java窗体程序设计是自带的布局。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 1]

*  边框布局  
    [JavaSwing\_1.7: BorderLayout（边界布局）][JavaSwing_1.7_ BorderLayout]  
    边框布局将整个面板划分为东西南北中五个部分，允许为每个组件选择一个放置位置，可以选择将组件放在面板的上北（NORTH）、下南（SOUTH）、左西（WEST）、右东（EAST），中（CENTER）五个地方，边框布局可以扩展组件的大小以填充可用空间。  
    ![在这里插入图片描述][20181215092755158.png]

import javax.swing.*;
    import java.awt.*;
    public class TEST02 extends JFrame {
             JPanel p=new JPanel();
      public TEST02(){
         **setLayout(new BorderLayout(5,5));//定义边界布局**
         setFont(new Font("Helvetica", Font.PLAIN, 14));//定义字体
         //在面板中加入按钮，且定义按钮的位置
         getContentPane().add("North", new JButton("North"));
         getContentPane().add("South", new JButton("South"));
           getContentPane().add("East",  new JButton("East"));
           getContentPane().add("West",  new JButton("West"));
             //设置面板为流式布局居中显示，组件横、纵间距为5个像素
             p.setLayout(new FlowLayout(1,5,5));
                   //使用循环加入button，注意每次加入的button对象名称都是b
                   //但button每次均是用new新生成的，全部代表不同的button对象。
             for(int i=1;i<10;i++){
                        //String.valueOf(i)，将数字转换为字符串
                       JButton b=new JButton(String.valueOf(i));
                       p.add(b);           //将button加入到面板中
              }
         getContentPane().add("Center",p);  //将面板加入到中间位置
      }  
      public static void main(String args[]) {
         TEST02 f = new TEST02();
              //定义边框
                f.setTitle("边界布局");
               f.setSize(300, 300);  // 定义组件大小
                f.setVisible(true);
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                f.setLocationRelativeTo(null);             //让窗口居中显示
             }
     }

运行结果如下：  
![在这里插入图片描述][20181214165108815.png]

*  网格布局  
    [JavaSwing\_1.2: GridLayout（网格布局）][JavaSwing_1.2_ GridLayout]  
    GridLayout 类是一个布局处理器，它以矩形网格形式对容器的组件进行布置。容器被分成大小相等的矩形，一个矩形中放置一个组件。

> 1.使容器中的各组件呈M行×N列的网格状分布。M，N为布局的行数和列数  
> 2. 网格每列宽度相同，等于容器的宽度除以网格的列数。网格每行高度相同，等于容器的高度除以网格的行数。  
> 3. 各组件的排列方式为：从上到下，从左到右。  
> 容器大小改变时，组件的相对位置不变，大小会改变。  
> 4. 设置行数和列数时，行数或者列数可以有一个为零。(即不限)  
> 若rows为0，cols为3，则列固定为3，行不限，每行只能放3个  
> 若cols为0，rows为3，则行固定为3，列不限，每行必定有控件、  
> 5. 假设你有13个控件，你又设置了三行，一行五个，你觉得第三行应该有多少个？  
> 并且如果组件数量超过设定的个数，布局管理器会自动增加网格个数，原则是保持行数不变。就是  
> 假设还是13个控件，你设置了两行，一行五个，放不下系统就给加了行，第三行放多出来的三个）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 2]

import java.awt.BorderLayout;
    import java.awt.Button;
    import java.awt.Container;
    import java.awt.FlowLayout;
    import java.awt.GridLayout;
    import javax.swing.*;
    public class TEST02 extends JFrame{
        private static final long serialVersionUID = 1L;
        public TEST02(){
            this.setTitle("test");
            Container con = this.getContentPane();         //定义容器
            this.setLayout(new GridLayout(7,3,5,5));        //设置7行3列垂直水平间隔为5
            for (int i=0;i<20;i++){                        //定义多个按钮的方法
                con.add(new JButton("Button"+i));            //20个按钮
            }
            this.setVisible(true);
            this.setBounds(50, 50, 500, 500);
        }
        public static void main(String[] args) {
            new TEST02();
        }
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 3]

*  流式布局  
    [JavaSwing\_1.1: FlowLayout（流式布局）][JavaSwing_1.1_ FlowLayout]  
    使用FlowLayout布局方式的容器中组件按照加入的先后顺序按照设置的对齐方式（居中、左对齐、右对齐）从左向右排列，一行排满（即组件超过容器宽度后）到下一行开始继续排列。  
    [Java图形化界面设计——布局管理器之FlowLayout（流式布局）][Java_FlowLayout]  
    可以用FlawLayout（）用来定义流式布局，布局方式默认为居中对齐，默认的数值和水平间隙为五个单位。FlowLayout（int align）可用来定义布局方式为指定方式，默认竖直和水平间隙为五个单位。

FlowLayout(int align, int hgap, int vgap)

创建一个新的流布局管理器，它具有指定的对齐方式以及指定的水平和垂直间隙。  
注意：

align=0:表示每一行组件将按照左对齐排列
      align=1:表示每一行组件将按照居中对齐排列
      align=2:表示每一行组件将按照右对齐排列

import java.awt.FlowLayout;
    import javax.swing.JButton;
    import javax.swing.JFrame;
    import javax.swing.JPanel;
    import javax.swing.border.EmptyBorder;
     
    public class TEST02 extends JFrame {
    	private JPanel contentPane;//定义容器
        
    	public TEST02() {
            this.contentPane=new JPanel();//创建内容面板
           contentPane.setBorder(new EmptyBorder(5,5,5,5));//设置面板的边框
            setContentPane(contentPane);//应用内容面板
           contentPane.setLayout(new FlowLayout(FlowLayout.CENTER,5,5));//设置内容面板的布局管理器为流式布局          
            for(int i=1;i<10;i++){//定义按钮
            	contentPane.add(new JButton("按钮"+i));
            }             
    		setTitle("流式布局");//设置窗体的标题
    		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//设置窗体退出时操作
    		setBounds(100, 100, 300, 150);//设置窗体位置和大小
    		setVisible(true);//设置窗体可见
    	}
     	public static void main(String[] args) {
    		TEST02 example = new TEST02();
    	}
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 4]

混合布局程序一：

import java.awt.*;
    import javax.swing.*; 
    /*
    *frame是窗体，使用默认的borderLayout布局
    *panelup 以及panelbottom将窗体分割成上下两个部分 分别占领CENTER区域以及 SOUTH区域
    **panelup 使用GridLayout布局 2*2 右边再嵌入两个小面板 smallpanel1 以及 smalplanel2
    **smallpanel1以及 smallpanel2使用flowLayout布局使得输入框不会被撑开
    *panelbuttom 使用FlowLayout 布局直接收纳三个button控件
    */
    public class TEST02
    {
    	public static void main(String args[]){
    		//定义窗体
    		JFrame frame =new JFrame();
    		frame.setSize(300,150);	   
    		JPanel panelup=new JPanel();
    		JPanel panelbottom=new JPanel();
             //定义布局，将两个面板放在边框布局的两侧
    		frame.setLayout(new BorderLayout());
    		frame.add(panelup,BorderLayout.CENTER);
    		frame.add(panelbottom,BorderLayout.SOUTH); 
           /*直接用GridLayout会以所有控件中最宽的空间宽为宽
            *  最高的控件高为高，输入框会被撑开          
            */
              //给上面的面板定义布局网格布局
    		panelup.setLayout(new GridLayout(2,2));
    		JLabel lusername =new JLabel("用户名:");
    		JLabel lpasssword=new JLabel("密码:"); 
    		/*小面板1 2 别分用来存放 用户名的输入框以及密码的输入框 
    		小面板1 2 内部的布局使用FlowLayout布局*/
    		JPanel panelsmall1 =new JPanel();
    		JPanel panelsmall2 =new JPanel();
    		//加入登录信息
    		panelup.add(lusername);
    		panelup.add(panelsmall1);
    		panelup.add(lpasssword);
    		panelup.add(panelsmall2);
            //定义文本框和密码框
    		JTextField txtusername=new JTextField(10);
    		JPasswordField pswfd_password=new JPasswordField(10);       
    		panelsmall1.setLayout(new FlowLayout());
    		panelsmall1.add(txtusername);
    		panelsmall2.setLayout(new FlowLayout());
    		panelsmall2.add(pswfd_password);
             //按钮面板定义为流式布局
    		panelbottom.setLayout(new FlowLayout());
    		//定义按钮
    		JButton btnlogin=new JButton("登录");
    		JButton btnregister=new JButton("注册");
    		JButton btncancle=new JButton("退出");
    		//Does cancle mean "clear the textfile" or "close the frame"?
    		panelbottom.add(btnlogin);
    		panelbottom.add(btnregister);
    		panelbottom.add(btncancle);
    		frame.setVisible(true);
      	  	
    	}
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 5]

import java.awt.*;
    import javax.swing.*;
     
    public class TEST02 extends JFrame{
    	
    	private JButton[] jb = new JButton[9];//用数组定义按钮
    	private JPanel jp1, jp2;//定义面板
    	public static void main(String[] args){		
    		TEST02 demo1 = new TEST02();	
    	}
    	
    	//构造函数
    	public TEST02(){
    		//定义面板1，且使其布局为流式布局
    		jp1 = new JPanel();		 
    		jp1.setLayout(new FlowLayout());
    		
    		//定义面板2，且使其布局为边界布局
    		jp2 = new JPanel();
    		jp2.setLayout(new BorderLayout());
    		//实例化按钮
    		jb[0] = new JButton("囚牛");
    		jb[1] = new JButton("睚眦");
    		jb[2] = new JButton("嘲风");
    		jb[3] = new JButton("蒲牢");
    		jb[4] = new JButton("狻猊");
    		jb[5] = new JButton("赑屃");
    		jb[6] = new JButton("狴犴");
    		jb[7] = new JButton("椒图");
    		jb[8] = new JButton("貔貅");
    		//面板1加入五个按钮
    		jp1.add(jb[0]);
    		jp1.add(jb[1]);
    		jp1.add(jb[2]);
    		jp1.add(jb[3]);
    		jp1.add(jb[4]);
    		//面板2加入后四个按钮
    		jp2.add(jb[5], BorderLayout.CENTER);
    		jp2.add(jb[6], BorderLayout.NORTH);
    		jp2.add(jb[7], BorderLayout.WEST);
    		jp2.add(jb[8], BorderLayout.EAST);
    		//定义窗体为边界布局，并将面板1和面板2加入边界的上下部分。
    		setLayout(new BorderLayout());
    		add(jp1, BorderLayout.NORTH);
    		add(jp2, BorderLayout.SOUTH);
    		//定义容器
    		setTitle("你好啊！");
    		setSize(300, 200);
    		setLocation(300, 200);
    		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    		setResizable(false);
    		setVisible(true）;		
    	}	
    }

运行结果如下：  
![在这里插入图片描述][20181215095502179.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70]: /images/20220406/7c76b203011142cb9e0e65ad3b1e61de.png
[JavaSwing_4.1_ JFrame]: https://blog.csdn.net/xietansheng/article/details/75948927
[20181214155346972.png]: /images/20220406/56e8214d7b184477b08785ab3d87a170.png
[JavaSwing_4.2_ JDialog]: https://blog.csdn.net/xietansheng/article/details/75948933
[20181214155908744.png]: /images/20220406/80e8f25b20ed444ba826fc44f272bf3d.png
[JavaSwing_3.1_ JPanel]: https://blog.csdn.net/xietansheng/article/details/74366470
[20181214161720165.png]: /images/20220406/5a1b7add63414bdf9fc48a9269a164eb.png
[20181214161734450.png]: /images/20220406/0aea9a842bde4c5b9a4e834ed5f42f52.png
[20181214161747129.png]: /images/20220406/4718a797c2c746819ef3bc0f27c0ee11.png
[20181214161758886.png]: /images/20220406/3f2bec06617c45fca8066874d1e7f37d.png
[20181214161810540.png]: /images/20220406/7a3254711d82465d9d09e4f78859b1c4.png
[20181214161819276.png]: /images/20220406/5447b91eff054b72a4c6bea40ad7911e.png
[20181214161834681.png]: /images/20220406/8391a443120a49b78a6c89810bf1bb41.png
[20181214161843813.png]: /images/20220406/e8121707b8c440a7adb98b467e07a09c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 1]: /images/20220406/f63bbd5917574b2d803a8895b015f0ef.png
[JavaSwing_1.7_ BorderLayout]: https://blog.csdn.net/xietansheng/article/details/72862707
[20181215092755158.png]: /images/20220406/3e5877d47e74465989f6c036adb2b798.png
[20181214165108815.png]: /images/20220406/5fab07824b214c95ad1395a1202ec7ad.png
[JavaSwing_1.2_ GridLayout]: https://blog.csdn.net/xietansheng/article/details/72814548
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 2]: /images/20220406/2a7a0f8b95724b6da87a7c3e2c2ccabc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 3]: /images/20220406/0af4a39076ad48688368c5228bc31f83.png
[JavaSwing_1.1_ FlowLayout]: https://blog.csdn.net/xietansheng/article/details/72814541
[Java_FlowLayout]: https://blog.csdn.net/liujun13579/article/details/7771191
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 4]: /images/20220406/5aa751dd74df4ce499f08a6d73be1374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTc5MjE2Mg_size_16_color_FFFFFF_t_70 5]: /images/20220406/514ce3a2e1cd4548aeef7688b9c291c7.png
[20181215095502179.png]: /images/20220406/d9b6671399fd4441bd48d2f476f05121.png