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

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

7.1任務(wù)描述

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

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

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

7.2.1流式布局(FlowLayout類)

FlowLayout類布局方式是將組件從容器的左上角開始，依次從左到右、從上到下放置。當(dāng)容器被重新設(shè)置大小后，則布局也會隨之發(fā)生改變：各組件的大小不變，但相對位置會發(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繼承的方法，作用是自動調(diào)整界面大小，使組件剛好在容器中顯示出來。使用pack()方法后，可以不需使用setSize方法設(shè)置窗口大小。從圖7-3中可以看到，當(dāng)容器大小發(fā)生變化時，隨之變化的是組件之間的相對位置。圖7-3FlowLayout類的布局效果7.2.2邊界布局(BorderLayout類)

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

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

例如：

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

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

add(new

Button("West"),BorderLayout.SOUTH);若沒有指明放置位置，則表明為默認(rèn)的“Center”方位。每個區(qū)域只能添加一個組件，若添加多個，則只能顯示最后一個。如果想在一個區(qū)域添加多個組件，則必須先在該區(qū)域放一個JPanel容器，再將多個組件放在該JPanel容器中。若某個區(qū)域或若干個區(qū)域沒有放置組件，東、西、南、北區(qū)域?qū)⒉粫蓄A(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ā)生變化時，各組件的相對位置不變，但各自的尺寸會發(fā)生變化。各組件的排列方式為從左到右，從上到下。與BorderLayout類相類似，如果想在一個網(wǎng)格單元中添加多個組件，則必須先在該網(wǎng)格單元放一個中間容器，再將多個組件放在該中間容器中。

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

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

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

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

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

CardLayoutcards=newCardLayout();

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

JPanel

jp_cards=newJPanel();

jp_cards.setLayout(cards);

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

finalstaticStringCARD1="第一張卡片";

finalstaticStringCARD2="第二張卡片";

jp_cards.add(p1,CARD1);

jp_cards.add(p2,CARD2);

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

cards.show(CARD1,jp_cards,);

cards.show(CARD2,jp_cards);

例7-4中，在第一張卡片(CARD1)上放置的是三個按鈕，在第二張卡片(CARD1)上放置的是一個標(biāo)簽，通過一個下拉列表進(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ì)中，如果需要精確地指定各個組件的位置和大小，可以首先利用setLayout(null)語句將容器的布局設(shè)置為null布局(空布局)。再調(diào)用組件的setBounds(intx,inty,int

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

在例7-5中，窗口和按鈕的大小由setBounds()方法設(shè)置并給出絕對位置，這樣做的好處是可以自由設(shè)置組件位置和大??；缺點(diǎn)是當(dāng)窗口改變時許多組件可能無法顯示，字體變化后按鈕標(biāo)簽等控件無法顯示其全部內(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中沒有顯式地設(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