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

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

(一)容器

容器是用来放各种组件的界面,常见的容器有窗口,对话框,和面板。在定义底层容器的时候需要考虑容器的位置,大小,是否可见,关闭时的操作等。
Frame 类就是解决这个问题的——它是一个容器,允许程序员把其他组件添加到它里面,把它们组织起来,并把它们呈现给用户。 是Java图形用户界面(GUI)工具包swing中的存放组件的容器。相当于相框。
JPanel类,是Java图形用户界面(GUI)工具包swing中的面板容器类。相当于画板。
在这里插入图片描述
(1)窗体
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("窗口");        //创建窗口
     }
 }

在这里插入图片描述

(2)面板
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);
	}
}

在这里插入图片描述

(3) 对话框

JavaSwing_3.1: JPanel(面板)

  • 显示一个错误对话框:
JOptionPane.showMessageDialog(null, "这是内容 ", "这是标题 ", JOptionPane.ERROR_MESSAGE);

在这里插入图片描述

  • 显示一个信息面板,其 options 为 "yes/no ":
JOptionPane.showConfirmDialog(null, "这是内容", "这是标题", JOptionPane.YES_NO_OPTION);

在这里插入图片描述

  • 显示一个警告对话框,其 options 为 OK、CANCEL:
Object[] options = { "OK ", "CANCEL " }; 
JOptionPane.showOptionDialog(null, "这是内容 ", "这是标题 ", JOptionPane.DEFAULT_OPTION, 
JOptionPane.WARNING_MESSAGE,null, options, options[0]);

在这里插入图片描述

  • 显示一个要求用户键入 String 的对话框:
//String inputValue = JOptionPane.showInputDialog( "请输入你的内容:"); 
JOptionPane.showInputDialog( "请输入你的内容:");

在这里插入图片描述

  • 显示一个要求用户选择 String 的对话框:
Object[] possibleValues = { "First ", "Second ", "Third " }; 
Object selectedValue = JOptionPane.showInputDialog(null, "这是内容", "这是标题", 
JOptionPane.INFORMATION_MESSAGE, null, possibleValues, possibleValues[0]);

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

  • 这是个简单的警告框:
JOptionPane.showMessageDialog(null, "这是内容", "这是标题",JOptionPane.WARNING_MESSAGE);

在这里插入图片描述

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窗体程序设计是自带的布局。

在这里插入图片描述

  • 边框布局
    JavaSwing_1.7: BorderLayout(边界布局)
    边框布局将整个面板划分为东西南北中五个部分,允许为每个组件选择一个放置位置,可以选择将组件放在面板的上北(NORTH)、下南(SOUTH)、左西(WEST)、右东(EAST),中(CENTER)五个地方,边框布局可以扩展组件的大小以填充可用空间。
    在这里插入图片描述
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);             //让窗口居中显示
         }
 }

运行结果如下:
在这里插入图片描述

  • 网格布局
    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个控件,你设置了两行,一行五个,放不下系统就给加了行,第三行放多出来的三个)

在这里插入图片描述


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();
    }
}

运行结果如下:
在这里插入图片描述

  • 流式布局
    JavaSwing_1.1: FlowLayout(流式布局)
    使用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();
	}
}

运行结果如下:
在这里插入图片描述

混合布局程序一:

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);
  	  	
	}
}

运行结果如下:
在这里插入图片描述

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);		
	}	
}

运行结果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41792162/article/details/84893414