第八讲 图形界面设计(三)

1、第八讲 图形界面设计（二）布局管理器界面布局管理界面布局管理 从前面的例子我们可以看出，容器中的基本图形组件都是被简单地加入到了容器(JFrame)，那时我们无法设计和控制这些组件在容器中的相互位置，从而导致了某些界面不合理。 Java为了解决这些问题，便以布局管理器（Layout Manager）来作为版面的代管人，使程序设计师不必为这些琐碎的显示问题伤脑筋。 Layout Manager的功能包括将容器中的组件大小及位置作合适的安排 如下图所示，当用户调整应用软件窗口大小，或是改变分辨率时，组件大小会被自动调整。界面布局管理 Java.awt包中共定义了五种布局编辑类，分别是： FlowL

2、ayout、CardLayout 、BorderLayout、GridLayout和和GridBagLayout。 每个布局编辑类对应一种布局策略。 Javax.swing包中定义了4种布局编辑类，分别是： BoxLayout、OverlayLayout 、ScrollPaneLayout和和ViewportLayout。 下面将讨论FlowLayout，BorderLayout，CardLayout，GridLayout和BoxLayout几种常用的布局策略。Flow Layout布局管理器 FlowLayout的布局策略是将遵循这种布局策略的容器中的组件按照加入的先后顺序从左向右排列，当一

3、行排满之后就转到下一行继续从左至右排列，每一行中的组件都居中排列。 FlowLayout的排版方式，就像流程或文本处理器在处理一段文字般，FlowLayout是java程序缺省缺省使用的布局编辑策略。 与其他布局管理器不一样的是，Flow布局管理器不限制它所管理的组件的大小，允许它们有自己的最佳大小。Flow布局管理器允许将组件左对齐或右对齐。如果想在组件之间创建一个更大的最小间隔，可以规定一个界限。当用户对由Flow布局管理的区域进行缩放时，布局就发生变化，如下图所示。当用户改变窗口的大小时 FlowLayout类有三个构造方法，分别是：(1) FlowLayout( ) 用于创建一个版面设

4、定为居中对齐、各组件的水平及垂直间隔为5个像素点的FlowLayout类的对象。 FlowLayout(int align) 用于创建一个FlowLayout类的对象，版面按给出的align值对齐，各组件的水平及垂直间隔为5个像素。(2) align的值可以是FlowLayout.LEFT(左对齐)、FlowLayout.RIGHT(右对齐)、 FlowLayout.CENTER(居中对齐)方式。FlowLayout(int align，int hgap，int vgap) 用于创建一个既指定对齐方式，又指定组件间间隔的FlowLayout类的对象。参数align作用及取值同上；参数hgap指

5、定组件间的水平间隔；参数vgap指定各组件间的垂直间隔。间隔单位为像素点。下面的例子就是如何用类容器的setLayout()方法来创建Flow布局对象并安装它们的。 setLayout(new FlowLayout(int align,int hgap, int vgap); 对齐的值必须是FlowLayout.LEFT, FlowLayout.RIGHT或FlowLayout.CENTER。例如： setLayout(new FlowLayout(FlowLayout.RIGHT, 20, 40); 对于一个原本不使用FlowLayout布局编辑器的容器，若需要将其布局策略改为FlowLay

6、out，可以使用setLayout(new FlowLayout( )方法，该方法是所有容器的父类Container的方法，用于为容器设定布局编辑器。例 构造并安装一个新的Flow布局，它带有规定好的居中对齐方式和一个缺省的5单位的水平和垂直间隙。这个模块代码将几个按钮添加到框架中的一个Flow布局中。 FlowLayoutDemo.java import java.awt.*; public class FlowLayoutDemo private Frame f; private Button button1, button2, button3; public static void ma

7、in (String args) FlowLayoutDemo mflow = new FlowLayoutDemo(); mflow.go(); public void go() f = new Frame (Flow Layout); f.setLayout(new FlowLayout(); button1 = new Button(Ok); button2 = new Button(Open); button3 = new Button(Close); f.add(button1); f.add(button2);f.add(button3);f.setSize (100,100);f

8、.setVisible(true); 运行结果 nBorder布局管理器为在一个容器中放置组件提供一个更复杂的方案。nBorderLayout布局策略是把容器内的空间划分为东、西、南、北、中五个区域(如后图所示)。这五个区域分别用字符串常量East、West、South、North、Center表示。n向这个容器内每加入一个组件都应该指明指明把它放在容器的哪个区域中。n分布在北部和南部区域的组件将横向扩展至占据整个容器的长度；分布在东部和西部的组件将伸展至占据容器剩余部分的全部宽度；最后剩余的部分将分配给位于中央的组件。如果某个区域没有分配组件，则其他组件可以占据它的空间。例如，如果北部没有分

9、配组件，则西部和东部的组件将向上扩展到容器的最上方；如果西部和东部没有分配组件，则位于中央的组件将横向扩展到容器的左右边界。 Border布局管理器是用于Dialog和Frame的缺省布局管理器。 BorderLayout布局管理器 CenterNorthSouthWestEastsetLayout(new BorderLayout() )add(b1,BorderLayout.NORTH); f = new Frame(BorderLayout); f.setSize(200,200); b1 = new Button(button1); b5 = new Button(button5);

10、f.add(b1,BorderLayout.NORTH); f.add(b2,BorderLayout.SOUTH); f.add(b3,BorderLayout.WEST); f.add(b4,BorderLayout.EAST); f.add(b5,BorderLayout.CENTER); f.setVisible(true);BorderLayout类有两个构造方法，分别是无参数的BorderLayout() 和带参数的BorderLayout(int hgap, int vgap)。前者创建一个各组件间的水平、垂直间隔为0的BorderLayout类的对象；后者创建一个各组件间的水平

11、间隔为hgap、垂直间隔为vgap的BorderLayout类的对象。可以用从Container类继承的setLayout()方法来将布局设定为Border布局。注：当窗口缩放时，按钮相应的位置不变化，但其大小改变。如图4所示。 图4 当用户改变窗口的大小时 BorderLayout仅指定了五个区域的位置，如果容器中需要加入的组件超过五个，就必须使用容器的嵌套或改用其他的布局策略。让我们先来看一个例子。 例 BordLayoutDemo.javaimport java.awt.*;public class BordLayoutDemoprivate Frame f;private Button

12、 bn, bs, bw, be, bc;public static void main(String args) BordLayoutDemo bord = new BordLayoutDemo(); bord.go(); public void go() f = new Frame(Border Layout); bn = new Button(B1);bs = new Button(B2);be = new Button(B3); bw = new Button(B4);bc = new Button(B5); f.add(bn, BorderLayout.NORTH); f.add(bs

13、, BorderLayout.SOUTH); f.add(be, BorderLayout.EAST);f.add(bw, BorderLayout.WEST);f.add(bc, BorderLayout.CENTER);f.setSize (200, 200);f.setVisible(true); 程序运行结果如图5所示。图 5 setLayout(new BorderLayout()构造并安装一个新Border布局，在组件之间没有间隙。 setLayout(new BorderLayout(int hgap, int vgap)构造并安装一个Border布局，在由hgap和vgap规定

14、的组件之间有规定的间隙。在布局管理器中，组件必须被添加到指定的区域。区域名称拼写要正确，尤其是在选择不使用常量(如add(button,Center)而使用add(button,BorderLayout.CENTER)时，拼写与大写很关键。 可以使用Border布局管理器来产生布局，且带有在缩放时在一个方向、另一方向或双方向上都延伸的元素。 可以仅将单个组件添加到Border布局管理器五个区域的每一个当中。如果添加不止一个，只有最后一个看得见。但我们可以利用中间容器来允许不止一个组件被放在单个Border布局管理器区域的空间里。 注：布局管理器给予南、北组件最佳高度，并强迫它们与容器一样宽，但

15、对于东、西组件，给予最佳宽度，而高度受到限制。Grid布局管理器为放置组件提供了灵活性。它先用许多行和栏来创建管理程序，然后组件就填充到由管理程序规定的单元中。比如，由语句new GridLayout(3,2)创建的有三行两栏的Grid布局能产生如图6所示的六个单元。 GridLayout 布局管理器 图 6 当用户改变窗口大小时 Grid布局管理器总是忽略组件的最佳大小。所有单元的宽度是相同的，是根据单元数对可用宽度进行平分而定的。同样地，所有单元的高度也是相同的，是根据行数对可用高度进行平分而定的。 将组件添加到网格中的命令决定它们占有的单元。单元的行数是从左到右填充，就像文本一样，而页是

16、从上到下由行填充。下面是一个GridLayout应用的示例。例 GridLayoutDemo.javaimport java.awt.*;public class GridLayoutDemo private Frame f;private Button b1, b2, b3, b4, b5, b6;public static void main(String args) GridLayoutDemo grid = new GridLayoutDemo(); grid.go(); public void go() f = new Frame(Grid example); f.setLayout

17、 (new GridLayout (3, 2); b1 = new Button(1); b2 = new Button(2); b3 = new Button(3); b4 = new Button(4); b5 = new Button(5); b6 = new Button(6);f.add(b1); f.add(b2); f.add(b3); f.add(b4); f.add(b5); f.add(b6); f.show(); 运行结果如图7所示。 图 7 setLayout(new GridLayout(int rows, int cols)创建并安装一个带有规定好行数和栏数的Gri

18、d布局。对布局中所有组件所给的大小一样。 setLayout(new GridLayout(int rows, int cols, int hgap, int vgap)创建并安装一个带有规定好行数和栏数的网格布局。布局中所有组件所给的大小一样。hgap和vgap规定组件间各自的间隙：水平间隙放在左右两边及栏与栏之间；垂直间隙放在顶部、底部及每行之间。 布局例 Frame fm = new Frame() fm.setLayout(new FlowLayout(); tf = new TextField(22); fm.add(tf); Panel p1 = new Panel(); p1.s

19、etLayout(new GridLayout(4,3); p1.add(); Panel p2 = new Panel(); p2.setLayout(new GridLayout(4,3); p2.add(); fm. add(p1); fm. add(p2); 最复杂的布局管理器是GridBagLayout。GridBagLayout与GridLayout有点相似，它也是将组件排在格子里，但是GridBagLayout在网格的基础上提供更复杂的布局。它允许单个组件在一个单元中不填满整个单元，而只是占用最佳大小，也允许单个组件扩展成不止一个单元，并且可以用任意顺序加入组件。GridBagL

20、ayout 布局管理器布局管理器 为了使用GridBagLayout，必须构造一个GridBagConstraints对象。GridBagConstraints用于指定如何用GridBagLayout放置组件。GridBagConstraints对象包含一些重要的参数，以指定组件的放置方式，这些参数的含义如下： gridx、gridy、gridwidth和gridheight参数。这四个参数用于指定组件在网格中的位置。gridx和gridy值用于指定组件左上角的坐标； gridwidth和gridheight决定组件将占用多少行和列。 加权参数weightx和weighty。GridBagLa

21、yout内的每个区域都必须设置它的加权参数，即weightx和weighty。如果将权值设置为0，那么这个区域就不会在那个方向上扩张或收缩，超出它的初始大小。 fill和anchor参数。fill参数用于指定组件在单元格内进行伸缩时的填充方式，该参数可以有四种参数值：GridBagConstraints.NONE(不伸缩)、GridBagConstraints.HORIZONTAL(水平伸缩)、GridBagConstraints.VERTICAL(垂直伸缩)和GridBagConstraints. BOTH(水平和垂直同时伸缩)。anchor参数用于指定组件在一个单元格内靠在它的什么部位。可

22、选GridBagConstraints.CENTER(居中)、GridBagConstraints.NORTH(北)、GridBagConstraints.NORTHEAST(东北)、GridBagConstraints.EAST(东)、GridBagConstraints.SOUTHEAST(东南)、GridBagConstraints.SOUTH(南)、GridBagConstraints.SOUTHWEST(西南)、GridBagConstraints.WEST(西)或者GridBagConstraints.NORTHWEST(西北)。 填充参数insets，ipadx和ipady。in

23、sets参数用于设置沿单元格边界的外部填充空白区域。ipadx和ipady则用于指定在环绕组件四周的单元格内部填充空白区域。 下面我们通过一个例子学习如何使用GridBagLayout。 例 GridBagLayoutDemo.java import java.awt.*; public class GridBagLayoutDemo extends Frame Canvas c; Choice cb;TextArea ta;TextField tf;Button b1, b2, b3;GridBagLayout gbLayout;GridBagConstraints gbConstraint

24、s; public static void main(String args)GridBagLayoutDemo demo = new GridBagLayoutDemo(); public GridBagLayoutDemo()gbLayout = new GridBagLayout();setLayout(gbLayout);gbConstraints = new GridBagConstraints(); ta = new TextArea(TextArea, 5, 10);cb = new Choice();cb.addItem(Linden);cb.addItem(Birch);cb

25、.addItem(Ceder);tf = new TextField(TextField);b1 = new Button(Button 1);b2 = new Button(Button 2);b3 = new Button(Button 3);c = new Canvas(); c.setBackground(Color.blue);c.setSize(10, 5); / textareagbConstraints.weightx = 0;gbConstraints.weighty = 0;gbConstraints.fill = GridBagConstraints.BOTH;addCo

26、mponent(ta, gbLayout, gbConstraints, 0, 0, 1, 3); / button b1gbConstraints.fill = GridBagConstraints.HORIZONTAL;addComponent(b1, gbLayout, gbConstraints, 0, 1, 2, 1);/ choice buttonaddComponent(cb, gbLayout, gbConstraints, 2, 1, 2, 1);/ button b2gbConstraints.weightx = 1000;gbConstraints.weighty = 1

27、;gbConstraints.fill = GridBagConstraints.BOTH;addComponent(b2, gbLayout, gbConstraints, 1, 1, 1, 1); / button b3gbConstraints.weightx = 0;gbConstraints.weighty = 0;gbConstraints.fill = GridBagConstraints.BOTH;addComponent(b3, gbLayout, gbConstraints, 1, 2, 1, 1);/ text fieldaddComponent(tf, gbLayout

28、, gbConstraints, 3, 0, 2, 1);/ canvasaddComponent(c, gbLayout, gbConstraints, 3, 2, 1, 1); setSize(250, 150); setVisible(true); private void addComponent(Component c, GridBagLayout g,GridBagConstraints gc, int row, int column, int width, int height)gc.gridx = column; gc.gridy = row;gc.gridwidth = wi

29、dth;gc.gridheight = height;g.setConstraints(c, gc);add(c); 程序运行结果如图8所示。 图 8CardLayout的版面布局方式是将每个组件看成一张卡片,如同扑克牌一样将组件堆叠起来，而显示在屏幕上的每次只能是最上面的一个组件，这个被显示的组件将占据所有的容器空间。用add()方法可将卡添加到Card布局中。Card布局管理器的show()方法响应请求转换到一个新卡中。下例就是一个带有5张卡的框架。 例 CardLayoutDemo.java import java.awt.*; import java.awt.event.*; Card

30、Layout 布局管理器布局管理器public class CardLayoutDemo implements MouseListener Panel p1, p2, p3, p4, p5;Label l1, l2, l3, l4, l5; CardLayout myCard;Frame f;public static void main (String args)CardLayoutDemo ct = new CardLayoutDemo();ct.init(); public void init()f = new Frame (Card Test);myCard = new CardLay

31、out();f.setLayout(myCard);p1 = new Panel(); p2 = new Panel();p3 = new Panel(); p4 = new Panel(); p5 = new Panel();l1 = new Label(This is the first Panel); p1.setBackground(Color.yellow);p1.add(l1);p1.addMouseListener(this);l2 = new Label(This is the second Panel);p2.setBackground(Color.green);p2.add

32、(l2);p2.addMouseListener(this);l3 = new Label(This is the third Panel); p3.setBackground(Color.magenta); p3.add(l3); p3.addMouseListener(this);l4 = new Label(This is the fourth Panel); p4.setBackground(Color.white); p4.add(l4);p4.addMouseListener(this);l5 = new Label(This is the fifth Panel); p5.set

33、Background(Color.cyan);p5.add(l5);p5.addMouseListener(this);f.add(p1, First);f.add(p2, Second); f.add(p3, Third);f.add(p4, Fourth);f.add(p5, Fifth);myCard.show(f, First);f.setSize (200, 200);f.setVisible(true); public void mouseClicked(MouseEvent e) myCard.next(f);public void mousePressed(MouseEvent

34、 e) public void mouseReleased(MouseEvent e) public void mouseEntered(MouseEvent e) public void mouseExited(MouseEvent e) 程序运行结果如图9所示(鼠标点击左面板将视图转换到右面板，等等)。图 9 除了以上介绍的各种布局管理器，Java也允许程序员不使用布局管理器，而是直接指定各个组件的位置。不使用布局管理器的例子如下： 例 NoLayoutDemo import java.awt.*; public class NoLayoutDemo public static void main(String args) Frame f = new Frame();f.setLayout(null); /不使用布局管理器不使用布局管理器不使用布局管理器Choice cb = new Choice();cb.addItem(item 1);cb.addItem(item 2);cb.addItem(item 3); Button b1 = new Button(Button 1);Button b2 = new Button(Button 2