設(shè)計(jì)用戶登錄界面的布局

第7章任務(wù)7——設(shè)計(jì)用戶登錄界面的布局7.1任務(wù)描述7.2技術(shù)要點(diǎn)7.3任務(wù)實(shí)施

7.1任務(wù)描述

本章任務(wù)是對(duì)用戶登錄界面進(jìn)行布局設(shè)計(jì)。通過(guò)上一章的學(xué)習(xí)，我們已經(jīng)完成了將組件添加到容器中的任務(wù)，但是進(jìn)行圖形界面設(shè)計(jì)，不僅僅只是將組件加到容器中，為使界面合理、美觀，我們還應(yīng)該控制組件在容器中的位置，即進(jìn)行布局設(shè)計(jì)。事實(shí)上，在第6章的例6-5中由于沒(méi)有使用布局管理，實(shí)際的顯示效果如圖7-1所示，而設(shè)置了布局管理的界面如圖7-2所示。圖7-1未設(shè)置布局管理的用戶登錄界面圖7-2設(shè)置了布局管理的用戶登錄界面

7.2技術(shù)要點(diǎn)

本章工作任務(wù)中的技術(shù)要點(diǎn)是簡(jiǎn)單布局管理。布局設(shè)計(jì)可以通過(guò)直接編碼，按照像素尺寸來(lái)設(shè)置GUI中的組件。例如，在窗口中把一個(gè)按鈕放在(10，10)處。但是利用這種方法進(jìn)行布局設(shè)計(jì)時(shí)，由于系統(tǒng)間的差異，用戶界面在每個(gè)系統(tǒng)中的顯示效果不盡相同。為了使生成的圖形用戶界面具有良好的平臺(tái)無(wú)關(guān)性，Java語(yǔ)言提供了布局管理器(LayoutManagers)來(lái)管理組件在容器中的布局，而不使用直接設(shè)置組件的位置和大小的方式。每個(gè)容器都有一個(gè)布局管理器，容器中組件的大小和定位都由其決定。當(dāng)容器需要對(duì)某個(gè)組件進(jìn)行定位時(shí)，就會(huì)調(diào)用其對(duì)應(yīng)的布局管理器。常用的布局管理有java.awt包中定義的五種布局管理器類，分別是FlowLayout(流式布局)、BordeLayout(邊界布局)、GridLayout(網(wǎng)格布局)、GridBagLayout(網(wǎng)格包布局)和CardLayout(卡片布局)以及javax.swing提供的BoxLayout(盒式布局)。當(dāng)一個(gè)容器被創(chuàng)建后，它們有默認(rèn)布局管理器。其中，JFrame和JDialog的默認(rèn)布局管理器是BorderLayout；JPanel和JApplet的默認(rèn)布局管理器是FlowLayout。程序設(shè)計(jì)中可以通過(guò)setLayout()方法重新設(shè)置容器的布局管理器。

7.2.1流式布局(FlowLayout類)

FlowLayout類布局方式是將組件從容器的左上角開始，依次從左到右、從上到下放置。當(dāng)容器被重新設(shè)置大小后，則布局也會(huì)隨之發(fā)生改變：各組件的大小不變，但相對(duì)位置會(huì)發(fā)生變化。

表7-1所示是FlowLayout類的常用構(gòu)造函數(shù)及方法。表7-1FlowLayout類的常用構(gòu)造函數(shù)及方法例如：

FlowLayout

mylayout=newFlowLayout();

FlowLayout

exLayout=newFlowLayout(FlowLayout.RIGHT);

setLayout(exlayout);//為容器設(shè)置新布局

例7-1FlowLayoutDemo.java

1importjavax.swing.*;

2importjava.awt.*;

3publicclassFlowLayoutDemoextendsJFrame{

4publicFlowLayoutDemo(){

5setLayout(new

FlowLayout());6setFont(new

Font("Helvetica",Font.PLAIN,14));

7getContentPane().add(new

JButton("Button1"));

8getContentPane().add(new

JButton("Button2"));

9getContentPane().add(new

JButton("Button3"));

10getContentPane().add(new

JButton("Button4"));

11}

12publicstaticvoidmain(String

args[]){

13FlowLayoutDemowindow=newFlowLayoutDemo();

14window.setTitle("FlowLayoutDemoApplication");

15window.pack();

16window.setVisible(true);

17}

18}

pack()是從類java.awt.Window繼承的方法，作用是自動(dòng)調(diào)整界面大小，使組件剛好在容器中顯示出來(lái)。使用pack()方法后，可以不需使用setSize方法設(shè)置窗口大小。從圖7-3中可以看到，當(dāng)容器大小發(fā)生變化時(shí)，隨之變化的是組件之間的相對(duì)位置。圖7-3FlowLayout類的布局效果7.2.2邊界布局(BorderLayout類)

BorderLayout類的布局方式提供了更復(fù)雜的布局控制方法，它包括五個(gè)區(qū)域：North、South、East、West和Center，其方位依據(jù)上北下南左西右東而定。當(dāng)容器的尺寸發(fā)生變化時(shí)，各組件的相對(duì)位置不變，但中間部分組件的尺寸會(huì)發(fā)生變化，南北組件的高度不變，東西組件的寬度不變。

表7-2所示為BorderLayout類的常用構(gòu)造函數(shù)及方法。表7-2BorderLayout類的常用構(gòu)造函數(shù)及方法如果容器使用了BorderLayout類的布局方式，則用add()方法往容器中添加組件時(shí)必須指明添加的位置，否則組件將無(wú)法正確顯示(不同的布局管理器，向容器中添加組件的方法也不同)。

例如：

add("West",newButton("West"));

add("North",newButton("North"));

add(new

Button("West"),BorderLayout.SOUTH);若沒(méi)有指明放置位置，則表明為默認(rèn)的“Center”方位。每個(gè)區(qū)域只能添加一個(gè)組件，若添加多個(gè)，則只能顯示最后一個(gè)。如果想在一個(gè)區(qū)域添加多個(gè)組件，則必須先在該區(qū)域放一個(gè)JPanel容器，再將多個(gè)組件放在該JPanel容器中。若某個(gè)區(qū)域或若干個(gè)區(qū)域沒(méi)有放置組件，東、西、南、北區(qū)域?qū)⒉粫?huì)有預(yù)留，而中間區(qū)域?qū)⒅每铡?/p>

BorderLayout類的布局效果如圖7-4所示。圖7-4BorderLayout類的布局效果例7-2BorderLayoutDemo.java

1importjavax.swing.*;

2importjava.awt.*;

3publicclassBorderLayoutDemoextendsJFrame{

4publicBorderLayoutDemo(){

5setLayout(newBorderLayout(5,5));

6setFont(new

Font("Helvetica",Font.PLAIN,14));

7getContentPane().add("North",newJButton("North"));

8getContentPane().add("South",newJButton("South"));9getContentPane().add("East",newJButton("East"));

10getContentPane().add("West",newJButton("West"));

11getContentPane().add("Center",new

JButton("Center"));

12}

13publicstaticvoidmain(String

args[]){

14BorderLayoutDemowindow=newBorderLayoutDemo();

15window.setTitle("BorderWindowApplication");

16window.pack();

17window.setVisible(true);

18}

19}7.2.3網(wǎng)格布局(GridLayout類)

GridLayout類的布局方式可以使容器中的各組件呈網(wǎng)格狀分布。容器中各組件的高度和寬度相同，當(dāng)容器的尺寸發(fā)生變化時(shí)，各組件的相對(duì)位置不變，但各自的尺寸會(huì)發(fā)生變化。各組件的排列方式為從左到右，從上到下。與BorderLayout類相類似，如果想在一個(gè)網(wǎng)格單元中添加多個(gè)組件，則必須先在該網(wǎng)格單元放一個(gè)中間容器，再將多個(gè)組件放在該中間容器中。

表7-3所示為GridLayout類的常用構(gòu)造函數(shù)及方法。表7-3GridLayout類的常用構(gòu)造函數(shù)及方法表7-3中，rows或cols可以有一個(gè)為0。若rows為0，則表示每行放置cols個(gè)組件，根據(jù)具體組件數(shù)，可以有任意多行；若cols為0，則表示共有rows行，根據(jù)具體組件數(shù)，每行可以放置任意多個(gè)組件。

GridLayout類的布局效果如圖7-5所示。圖7-5GridLayout類的布局效果例7-3GridLayoutDemo.java

1importjavax.swing.*;

2importjava.awt.*;

3publicclassGridLayoutDemoextendsJFrame{

4publicGridLayoutDemo(){

5setLayout(newGridLayout(3,2));

6setFont(new

Font("Helvetica",Font.PLAIN,14));

7getContentPane().add(new

JButton("Button1"));

8getContentPane().add(new

JButton("Button2"));

9getContentPane().add(new

JButton("Button3"));

10getContentPane().add(new

JButton("Button4"));11getContentPane().add(new

JButton("Button5"));

12}

13publicstaticvoidmain(String

args[]){

14GridLayoutDemowindow=newGridLayoutDemo();

15window.setTitle("GridWindowApplication");

16window.pack();

17window.setVisible(true);

18}

19}7.2.4卡片布局(CardLayout類)

CardLayout類的布局方式可以幫助用戶處理兩個(gè)或更多的組件共享同一顯示空間。共享空間的組件之間的關(guān)系就像一摞牌，組件摞在一起，只有最上面的組件是可見的。CardLayout可以像換牌一樣處理這些共享空間的組件，為每張牌定義一個(gè)名字，可按名字選牌；可以按順序向前或向后翻牌；也可以直接選第一張或最后一張牌。

表7-4所示為CardLayout類的常用構(gòu)造函數(shù)及方法。表7-4CardLayout類的常用構(gòu)造函數(shù)及方法與BorderLayout類和GridLayout類相類似，每張牌中只能放置一個(gè)組件，如果想在一張牌中放置多個(gè)組件，則必須先在該牌中放一個(gè)容器，再將多個(gè)組件放在該容器中。

假設(shè)將容器jp_card設(shè)置為CardLayout類的布局方式，則一般步驟如下：

(1)創(chuàng)建CardLayout對(duì)象作為布局管理。例如：

CardLayoutcards=newCardLayout();

(2)使用容器的setLayout()方法為容器設(shè)置布局方式。例如：

JPanel

jp_cards=newJPanel();

jp_cards.setLayout(cards);

(3)容器調(diào)用add(Stringa,Componentb)方法，將組件b加入到容器中，并為組件取一個(gè)代號(hào)，該代號(hào)是一個(gè)字符串，以供更換顯示組件時(shí)使用。例如：

finalstaticStringCARD1="第一張卡片";

finalstaticStringCARD2="第二張卡片";

jp_cards.add(p1,CARD1);

jp_cards.add(p2,CARD2);

(4)使用CardLayout類提供的show()方法，根據(jù)容器名字jp_card和組件代號(hào)顯示這一組件。例如：

cards.show(CARD1,jp_cards,);

cards.show(CARD2,jp_cards);

例7-4中，在第一張卡片(CARD1)上放置的是三個(gè)按鈕，在第二張卡片(CARD1)上放置的是一個(gè)標(biāo)簽，通過(guò)一個(gè)下拉列表進(jìn)行選擇。其中的事件編程我們將在后續(xù)章節(jié)詳細(xì)介紹。例7-4CardLayoutDemo.java

1importjava.awt.*;

2importjava.awt.event.*;

3importjavax.swing.*;

4publicclassCardLayoutDemoextendsJFrameimplementsItemListener{

5JPanel

jp_cards;

6JPanelcp,p1,p2;

7CardLayoutcards;

8JComboBoxc;

9finalstaticStringCARD1="第一張卡片";10finalstaticStringCARD2="第二張卡片";

11publicCardLayoutDemo(){

12setLayout(new

BorderLayout());

13setFont(new

Font("Helvetica",Font.PLAIN,14));

14cards=newCardLayout();

//步驟1

15cp=newJPanel();

16c=newJComboBox();

17c.addItem(CARD1);

18c.addItem(CARD2);

19cp.add(c);

20this.getContentPane().add("North",cp);21jp_cards=newJPanel();

22jp_cards.setLayout(cards);

//步驟2

23p1=newJPanel();

24p1.add(newJButton(“按鈕1”));

25p1.add(newJButton(“按鈕2”));

26p1.add(newJButton(“按鈕3”));

27p2=newJPanel();

28p2.add(newJLabel(“標(biāo)簽顯示”));

29jp_cards.add(,CARD1,p1);

//步驟3

30jp_cards.add(CARD2,p2);

31this.getContentPane().add("Center",jp_cards);

32c.addItemListener(this);

33}

34publicvoiditemStateChanged(ItemEvente){

35cards.show(jp_cards,(String)e.getItem()); //步驟4

36}

37publicstaticvoidmain(String

args[]){

38CardLayoutDemowindow=newCardLayoutDemo();

39window.setTitle("CardLayout

Demo");

40window.pack();

41window.setVisible(true);

42}

43}

圖7-6所示為程序運(yùn)行結(jié)果。圖7-6CardLayout類的布局效果7.2.5空布局(null布局)

在布局設(shè)計(jì)中，如果需要精確地指定各個(gè)組件的位置和大小，可以首先利用setLayout(null)語(yǔ)句將容器的布局設(shè)置為null布局(空布局)。再調(diào)用組件的setBounds(intx,inty,int

width,intheight)方法設(shè)置組件在容器中的大小和位置。

在例7-5中，窗口和按鈕的大小由setBounds()方法設(shè)置并給出絕對(duì)位置，這樣做的好處是可以自由設(shè)置組件位置和大??；缺點(diǎn)是當(dāng)窗口改變時(shí)許多組件可能無(wú)法顯示，字體變化后按鈕標(biāo)簽等控件無(wú)法顯示其全部?jī)?nèi)容。例7-5NullLayoutDemo.java

1importjava.awt.*;

2importjavax.swing.*;

3publicclassNullLayoutDemo{

4JFrame

fr;

5JButton

a,b;

6NullLayoutDemo(){

7fr=newJFrame();

8fr.setBounds(100,100,250,150);

9fr.setLayout(null);

10a=newJButton("按鈕a");11b=newJButton("按鈕b");

12fr.getContentPane().add(a);

13a.setBounds(30,30,80,25);

14fr.getContentPane().add(b);

15b.setBounds(150,40,80,25);

16fr.setTitle("NullLayoutDemo");

17fr.setVisible(true);

18}

19publicstaticvoidmain(String

args[]){

20newNullLayoutDemo();

21}

22}

圖7-7所示為程序運(yùn)行結(jié)果。圖7-7setBounds()方法的布局效果

7.3任務(wù)實(shí)施

在第6章的例6-5中沒(méi)有顯式地設(shè)置布局方式，由于界面中的組件首先放置于JPanel容器中，而JPanel的默認(rèn)布局是FlowLayout的布局方式，因此所有組件是從左到右，從上到下依次放置的，并隨著窗口大小的改變，位置也發(fā)生變化。如果要設(shè)計(jì)出如圖7-2所示的布局效果，可以使用布局管理器。程序設(shè)計(jì)中只需要為例6-5中的LoginPanel類添加相關(guān)布局管理的代碼即可。例7-6LoginPanel.java

1classLoginPanelextendsJPanel{

2 privatestaticfinallongserialVersionUID=1L;

3privateJLabelnamelabel,pwdlabel,titlelabel;

4privateJTextField

namefield;

5privateJPasswordField

pwdfield;

6privateJButtonloginbtn,registerbtn,cancelbtn;

7privateJPanelpanel1,panel2,panel3,panel21,panel22;

8privateJFrame

iframe;

9 publicLoginPanel(JFrameframe){

10 iframe=frame;11 titlelabel=newJLabel("歡迎使用考試系統(tǒng)");

12 titlelabel.setFont(newFont("隸書",Font.BOLD,24));

13 namelabel=newJLabel("用戶名：");

14 pwdlabel=newJLabel("密碼：");

15 namefield=newJTextFie