JavaGUI的布局管理方式.ppt

1、第10章 Java GUI的布局管理方式,10.1 按钮（JButton）,10.1.1 按钮的构造方式 JButton()创建不带有设置文本或图标的按钮JButton(Iconicon)创建一个带图标的按钮JButton(Stringtext)创建一个带文本的按钮JButton(Stringtext, Iconicon)创建一个带初始文本和图标的按钮,8.1.2 按钮的常用方法,8.1.3 按钮的ActionEvent事件,按钮的主要用途为区分和标识不同的用户操作，而用户操作使用的是选中按钮并按下回车键，或者使用鼠标点击按钮进行选择。而这两种操作对应的事件都为ActionEvent事件。因此

2、要对按钮点击事件进行捕获和操作的话，需要定义实现对应的ActionEvent类型的ActionListener接口的子类作为监听器类，在类中实现其作为抽象方法的public void actionPerformed(ActionEvent e); ActionEvent类型事件与需要实现的监听器接口和监听器接口中的事件抽象方法如下。,按钮的例子,10.2 布局管理,在Java中，GUI组件在容器中的布局是由容器的布局管理器(Layout Manager)来决定的。每个容器都具有一个缺省的布局管理器。程序设计人员可以方便地改变容器的布局管理器。例如面板的缺省布局管理器是流布局管理器(FlowLa

3、yout)，内容窗格的缺省布局管理器是边框布局管理器(BorderLayout)。如果面板或是内容窗格的缺省布局管理器不能满足要求，可以调用这两种容器的setLayout(aNewLayout)方法来改变其布局管理器，方法setLayout()的参数是一个布局管理器对象。,坐标方式定位,setLayout(null) 。,Java 布局原理,为了能够与平台无关，java使用的是一种与显示设备无关的相对坐标法的控件布局方式,10.2.1 FlowLayout(流式布局),使用类似方法向一个面板中添加五个按钮，图6.3.1是程序的运行结果。可以发现，这五个按钮是按照被添加到面板中的顺序排列在窗体中

4、的。如果一行放不下则变为两行放置，如果两行放不下则变为三行放置，如图6.3.2所示。由此可知：使用FlowLayout布局时，GUI组件将按照添加入容器的顺序自左而右排列在一行上，如果一行排不下，另起一行；也就是说组件是按照自左而右、自上而下的顺序进行排列的。此时我们可以改变按钮的位置，但是无法改变按钮的顺序和大小。 例 10.1 FlowLayoutExample.java,FlowLayout的构造方法,10.2.2 BorderLayout(边界布局),使用了边界(BorderLayout)布局的容器均提供5个位置用于存放组件，分别是North、South、East、West以及Cent

5、er，如图所示： 下面的语句将一个按钮添加到内容窗格中： container.add(new JButton(“North”),BorderLayout.NORTH);,BorderLayout可以使用add()将组件非顺序的添加至容器的5个指定位置，这5个位置使用常量来进行定义： BorderLayout.EAST对应容器的左部 BorderLayout.SOUTH对应容器的底部 BorderLayout.WEST对应容器的右部 BorderLayout.NORTH对应容器的顶部 BorderLayout.CENTER对应容器的中部 使用常量进行组件添加的方法如下： void add(Com

6、ponent Obj,int region);,例子：,import javax.swing.*; import java.awt.*; public class BorderLayoutExample public static void main(String args) JFrame f=new JFrame(边界布局方式); f.setLayout(new BorderLayout(10,10); f.add(new JButton(North),BorderLayout.NORTH); f.add(new JButton(South),BorderLayout.SOUTH); f.a

7、dd(new JButton(West),BorderLayout.WEST); f.add(new JButton(East),BorderLayout.EAST); f.add(new JButton(Center),BorderLayout.CENTER); f.setSize(300,200); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); ,运行结果,观察运行结果，如果对框架进行缩放，可以发现BorderLayout的特点是：North和South位置的组件在水平方向上会扩张，以填满水平方向

8、的空间，垂直方向不变；West和East位置的组件在垂直方向上会扩张，以填满垂直方向的空间，水平方向不变；而Center位置的组件会在水平和垂直方向均会尽量扩张，填满中部的空间。 此外，如果向同一个位置(比如West)添加多个组件，那么只有最后一个被添加的才是有效的，也就是说BorderLayout布局中的每个位置只能放一个组件。,运行结果：,注意：学生们在练习时，可以打乱组件添加到容器的顺序，或仅仅只添加其中几个位置的组件并观察结果。例如：,10.2.3 GridLayout(网格布局),网格布局(GridLayout)将容器划分为大小相同的网格，把GUI组件向使用了网格布局的容器中添加时，

9、是按照自左向右，自上而下的位置存放的。 GridLayout类提供了两个构建器： public GridLayout(int rows, int columns) public GridLayout(int rows, int columns,int horizontalGap, int verticalGap) rows和columns分别指定划分网格的行数及列数。horizontalGap和verticalGap用于指定组件在水平和垂直方向上的间隔，缺省情况下均为零。 阅读例6.3.3 GridWindow.java 的源代码。,例6.3.3运行结果,可以发现，添加到使用网格布局容器中的G

10、UI组件，均具有相同的大小。对容器进行缩放后，其中的GUI组件也进行同步的缩放。也就是说，网格布局适合于规则的布局。,10.2.4 JPanel(面板）,面板是一个Container（容器），但是与框架相比，面板不是一个独立的窗口，它只是包含在窗口中的一个区域，面板是一个不包含标题栏、菜单栏以及边框的窗口。一般来说它用于把自己当作中间容器用于将窗口划分为若干个区域进行控件的放置。,运用面板来划分窗体区域,package edu.learn; import javax.swing.*; import java.awt.*; public class JPanelTest extends JFra

11、me JPanel p1,p2; public JPanelTest() setTitle(面板划分窗口); p1 = new JPanel(); p2 = new JPanel(); p1.setBackground(Color.gray); p2.setBackground(Color.yellow); this.setLayout(new GridLayout(1,2,5,5); /设置为1行2列，间隔均为5 this.add(p1,BorderLayout.CENTER); this.add(p2,BorderLayout.SOUTH); this.setBounds(200, 200

12、, 300, 250); this.setVisible(true); public static void main(String args) new JPanelTest(); ,10.2.5复杂的布局方式,Panel(Border),JPanel (Flow),JPanel (Grid),JPanel (Grid),将不同的布局方式组合起来，可以完成一些复杂的布局要求，而布局组合的载体就是Panel 如果还是无法完成布局要求，那么只有去使用网格包布局了,复合布局管理案例,面板为网格布局,面板为网格布局,面板为流式布局,面板为流式布局,窗体为网格布局,面板1,class Info1Pane

13、l extends JPanel JLabel labGYID=new JLabel( 雇员编号 ); JTextField txtGYID=new JTextField(); JLabel labGYName=new JLabel( 雇员姓名 ); JTextField txtGYName=new JTextField(); public Info1Panel() setLayout(new GridLayout(1,4); add(labGYID); add(txtGYID); add(labGYName); add(txtGYName); ,面板2,class Info2Panel ex

14、tends JPanel JLabel labDept=new JLabel( 所在部门 ); JTextField txtDept=new JTextField(); JLabel labBirth=new JLabel( 出生日期 ); JTextField txtBirth=new JTextField(); public Info2Panel() setLayout(new GridLayout(1,4); add(labDept); add(txtDept); add(labBirth); add(txtBirth); ,面板3,class Info3Panel extends JP

15、anel JLabel labMemo=new JLabel(备 注 ); JTextField txtMemo=new JTextField(15); public Info3Panel() setLayout(new FlowLayout(FlowLayout.LEFT); add(labMemo); add(txtMemo); ,面板4,class Control extends JPanel JButton btnPre=new JButton(上一个); JButton btnNext=new JButton(下一个); JButton btnOk=new JButton(确定);

16、JButton btnCancel=new JButton(取消); public Control() add(btnPre); add(btnNext); add(btnOk); add(btnCancel); ,窗体及对面板的组装,public class FixLayout public static void main(String args) JFrame f = new JFrame(用面板来组织用户界面); f.setLayout(new GridLayout(4,1); f.add(new Info1Panel(); f.add(new Info2Panel(); f.add(

17、new Info3Panel(); f.add(new Control(); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(350,150); f.setResizable(false); f.setVisible(true); ,利用复杂布局实现的计算器,10.8.5 GridBagLayout(网格袋布局),在构建复杂的用户界面时，仅仅使用前面所讲的三种布局往往不能达到理想的效果。网格袋布局GridBagLayout是最灵活(也是最复杂的)一种布局管理器，该布局管理器具有强大的功能，非常适合复杂界面的布局。与网格布局

18、类似，网格袋布局也是将用户界面划分为若干个网格(Grid)，不同之处在于： (1) 网格袋布局中的每个网格的宽度和高度都是可以不一样的。 (2) 每个组件可以占据一个或是多个网格。 (3) 可以指定组件在网格中的停靠位置。 当将一个GUI组件添加到使用了网格袋布局的容器中时，需要指定该组件的位置、大小以及缩放等一系列约束条件。可以使用一个GridBagConstraints类型的对象来存储这些约束条件，这样，向使用网格袋布局的容器中添加组件的代码框架如下：,GridBagLayout布局中的组件大小不必相同，位置也不必对称、添加组件也不必按照顺序。因为组件是根据在容器中虚拟网格进行位置和大小的

19、设置的。 在容器中放置一个组件必须首先将容器声明为网格包布局方式： 然后要为需要添加到此容器的组件提供放置位置、大小、填充方式等等布局信息。该信息每次我们都需要使用一个GridBagConstraints类的对象来进行存储。最后利用此对象我们将组件添加到容器中。有关容器、组件以及GridBagConstraints对象的关系如图。,约束条件对象 GridBagConstraints,文本域对象 JTextField,0 0,y,x,代码框架：,JPanel p=new JPanel(); JTextField txtField=new JTextField(); p.setLayout(new

20、 GridBagLayout();/容器p设置为网格袋布局 /创建约束条件对象 GridBagConstraints constraints=new GridBagConstraints(); /设置具体的约束条件 . /按照约束条件constraints将txtField添加到p中 p.add(txtField, constraints); 如何设置约束条件，是使用网格袋布局中最重要、也是最困难的步骤。下面，我们通过一个实例来仔细说明约束条件中有哪些参数需要设置以及如何设置。,实例：,目标：们想在一个面板上按照图所示排列组件，此外，我们还希望面板上的标签在面板缩放时，大小不改变；文本框在面板

21、缩放时，在水平方向上能够相应地缩放，而在垂直方向上大小不改变。,x,y,参数设置,对于要添加到该面板中的组件，需要有一个GridBagConstraints 类型的约束条件对象constraints。那么，constraints中有如下字段需要设置： constraints.gridx和constraints.gridy 这两个字段用于指定组件的起始网格坐标。例如，对于出生日期标签：constraints.gridx=2; constraints.gridy=1; 对于备注文本框：constraints.gridx=1;constraints.gridy=2; constraints.grid

22、width和constraints.gridheight 这两个字段用于指定组件所占网格的列数和行数。对于备注文本框： constraints.gridwidth=2; constraints.gridheight=1； 对于出生日期标签：constraints.gridwidth=1; constraints.gridheight=1； constraints.fill 组件在网格中的填充方式。GridBagConstraints 中定义了一些常量用于确定组件在网格中的填充方式： GridBagConstraints. HORIZONTAL /水平方向尽量扩张 GridBagConstrai

23、nts. VERTICAL /垂直方向尽量扩张 GridBagConstraints. BOTH /水平、垂直方向均扩张 GridBagConstraints. NONE /水平、垂直方向均不扩张,参数设置,constraints.insets 该字段是一个Insets类型的对象。 该对象用作所添加组件的外部填塞，其大小由该对象中的left、top、right及buttom字段决定。例如： constraints.insetsnew Insets(2,2,2,2); constraints.ipadx和constraints.ipady 与constraints.insets字段相对应，这两个

24、字段称为组件的内部填塞。这两个值被加到组件的最小宽度和最小高度上，从而保证组件不会收缩到它的最小尺寸之下。 constraints.anchor 当组件比所在网格小的时候，可以使用该字段来确定组件在网格中的停靠位置。GridBagConstraints中定义了如下的常量来表示组件的停靠位置： GridBagConstraints.CENTER GridBagConstraints.NORTH GridBagConstraints.NORTHEAST GridBagConstraints.EAST GridBagConstraints.SOUTHEAST GridBagConstraints.S

25、OUTH GridBagConstraints.SOUTHWEST GridBagConstraints.WEST GridBagConstraints.NORTHWEST,参数设置,constraints.weightx和constraints.weighty 这两个字段是组件在水平方向和垂直方向的扩张权重。如果在某个方向上不希望组件扩张，则将该方向上的权重置为0。例如对于出生日期标签，水平、垂直方向均不希望扩张： constraints.weightx=0; constraints.weighty=0; 对于备注文本框，水平方向扩张，而垂直方向不扩张： constraints.weight

26、x=1; constraints.weighty=0; 理论上权重可以取任意非负值，用以表示扩张的程度。但是实践中我们发现，通过调整权值来设定各个组件扩张意义并不大。一个简单、适用的规律就是：将需要扩张方向上的权重设定为1；不需要扩张方向上的权重设定为0。 特别要小心，权重字段的取值要和fill字段相适应。,参数设置,请说出下列参数代表什么？ constraints.weightx constraints.weighty constraints.anchor constraints.ipadx constraints.ipady constraints.insets constraints.g

27、ridx constraints.gridy constraints.gridwidth constraints.gridheight constraints.fill,组件在水平方向的扩张,组件在垂直方向的扩张,组件在网格中的停靠位置,组件在网格中的最小宽度,组件在网格中的最小高度,组件在网格中的上下左右的填塞距离,组件在网格中列位置,组件在网格中行位置,组件在占用的单元格的长度,组件在占用的单元格的高度,组件在网格中的填充方式,根据下列窗体用网格包布局实现,LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1

28、,1,0,0,1,1,b1); LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,1,0,1,1,b2); LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,2,0,1,1,b3); /第二行 LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,0,1,1,1,b4); LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,1,1,2,1,b5); /第三行 LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,0,2,1,2,b6); LayoutUtil.add(p1,GridBagConstraints.BOTH,GridBagConstraints.WEST,1,1,1,2,2,1,b7); LayoutUtil.add