任务相关设计用户登录界面布局

1、任务相关设计用户登录界面布局学习目标学习目标知识目标知识目标素质目标素质目标协调能力、团队合作的能力协调能力、团队合作的能力接受新知识、自主学习的能力接受新知识、自主学习的能力 7.1 任务描述任务描述 本章的学习任务是对用户登录界面进行布局设计。通过上一章的学习，我们已经完成本章的学习任务是对用户登录界面进行布局设计。通过上一章的学习，我们已经完成了将组件添加到容器中的任务，但是进行图形界面设计，不仅仅只是将组件加到容器了将组件添加到容器中的任务，但是进行图形界面设计，不仅仅只是将组件加到容器中，为使界面合理、美观，我们还应该控制组件在容器中的位置，即进行布局设计。中，为使界面合理、美观，我

2、们还应该控制组件在容器中的位置，即进行布局设计。事实上，在第事实上，在第6 6章的例章的例6-56-5由于没有使用布局管理，实际的显示效果如图由于没有使用布局管理，实际的显示效果如图7-1 7-1 所示，而设所示，而设置了布局管理的界面如图所示。置了布局管理的界面如图所示。7.2 技术要点技术要点lFlowLayoutFlowLayout（流式布局）（流式布局）lBorderLayoutBorderLayout（边界布局）（边界布局）lGridLayoutGridLayout（网格布局）（网格布局）lCardLayoutCardLayout（卡片布局）（卡片布局） 布局管理器布局管理器 Flo

3、wLayout 以加入的顺序自左而右排放组件以加入的顺序自左而右排放组件 BorderLayout 东东,南南,西西,北北,中中 GridLayout 以行列的方式排放组件以行列的方式排放组件 BoxLayout 沿著水平的沿著水平的x轴轴,垂直的垂直的y轴轴排放排放 GardLayout 最上层的才看的到最上层的才看的到 GridBagLayout 和和GridLayout很像很像,但元件可以变化大小但元件可以变化大小流式布局（流式布局（FlowLayout类）类） import java.awt.*;import .*;import javax.swing.*;public class F

4、lowLayoutDemo extends JFrame public FlowLayoutDemo() Container con = getContentPane(); con.setLayout(new FlowLayout();con.add(new JButton(first); con.add(new JButton(second); con.add(new JButton(third); con.add(new JButton(fourth); con.add(new JButton(fifth); con.add(new JButton(This is the last but

5、ton); public static void main(String args) FlowLayoutDemo myFlowLayout = new FlowLayoutDemo(); myFlowLayout.setBounds(0,0,200,200); myFlowLayout.setVisible(true); FlowLayout con.setLayout(new FlowLayout(FlowLayout.LEFT);myFlowLayout.setBounds(0,0,300,300);边界布局（边界布局（BorderLayout类）类） BorderLayoutimpor

6、t java.awt.*;import .*;import javax.swing.*;public class BorderLayoutDemo extends JFrame public BorderLayoutDemo() Container con= getContentPane(); con.setLayout(new BorderLayout(); con.add(new JButton(EAST),BorderLayout.EAST); con.add(new JButton(WEST),BorderLayout.WEST); con.add(new JButton(SOUTH)

7、,BorderLayout.SOUTH); con.add(new JButton(NORTH),BorderLayout.NORTH); con.add(new JButton(CENTER),BorderLayout.CENTER); public static void main(String args) BorderLayoutDemo myBorderLayout = new BorderLayoutDemo(); myBorderLayout.setBounds(0,0,400,400); myBorderLayout.setVisible(true); 网格布局（网格布局（Gri

8、dLayout类）类） GridLayoutimport java.awt.*;import .*;import javax.swing.*;public class GridLayoutDemo extends JFrame public GridLayoutDemo() Container con = getContentPane(); con.setLayout(new GridLayout(6,1); con.add(new JButton(first); con.add(new JButton(second); con.add(new JButton(third); con.add(

9、new JButton(fourth); con.add(new JButton(fifth); con.add(new JButton(This is the last button); public static void main(String args) GridLayoutDemo myGridLayout = new GridLayoutDemo(); myGridLayout.setBounds(0,0,300,300); myGridLayout.setVisible(true); con.setLayout(new GridLayout(2,3);卡片布局（卡片布局（Card

10、Layout类）类） 卡片布局（卡片布局（CardLayout类）类）假设将容器假设将容器jp_cardjp_card设置为设置为CardLayoutCardLayout布局方式，一般步骤如下：布局方式，一般步骤如下：创建创建CardLayoutCardLayout对象作为布局管理，例如：对象作为布局管理，例如： CardLayout CardLayoutcards=new CardLayout();cards=new CardLayout();(1)(1)使用容器的使用容器的setLayout()setLayout()方法为容器设置布局方式，例如：方法为容器设置布局方式，例如： JPanel

11、 jp_cards= new JPanel(); JPanel jp_cards= new JPanel(); jp_cards.setLayout(cards); jp_cards.setLayout(cards);(2)(2)容器调用容器调用add(Stringadd(Stringa, Component b)a, Component b)方法，将组件方法，将组件b b加入到容器中，并为组件取加入到容器中，并为组件取一个代号，该代号是一个字符串，以供更换显示组件时使用，例如：一个代号，该代号是一个字符串，以供更换显示组件时使用，例如： final static String CARD1 =

12、 final static String CARD1 = 第一张卡片第一张卡片; final static String CARD2= final static String CARD2= 第二张卡片第二张卡片; jp_cards.add(p1,CARD1); jp_cards.add(p1,CARD1); jp_cards.add(p2,CARD2); jp_cards.add(p2,CARD2);(3 )(3 )使用使用CardLayoutCardLayout类提供的类提供的show()show()方法，很局容器名字方法，很局容器名字jp_cardjp_card和组件代号显示这一和组件代号

13、显示这一组件，例如：组件，例如： cards.show(CARD1, jp_cards,); cards.show(CARD1, jp_cards,); cards.show(CARD2, jp_cards); cards.show(CARD2, jp_cards);CardLayoutCard1Card2举例举例 CardLayoutDemo.javalimport java.awt.*;limport java.awt.event.*;limport javax.swing.*;lpublic class CardLayoutDemo extends JFrame implements I

14、temListenerl JPanel jp_cards;l JPanel cp,p1,p2;l CardLayout cards;l JComboBox c;l final static String CARD1 = 第一张卡片第一张卡片;l final static String CARD2= 第二张卡片第二张卡片;l public CardLayoutDemo () l setLayout(new BorderLayout();l setFont(new Font(Helvetica, Font.PLAIN, 14);l cards=new CardLayout();/步骤步骤l cp

15、= new JPanel();l c = new JComboBox();l c.addItem(CARD1);l c.addItem(CARD2);l cp.add(c);举例举例 CardLayoutDemo.java(续续)l this.getContentPane().add(North, cp);l jp_cards = new JPanel();l jp_cards.setLayout(cards);/步骤步骤l p1 = new JPanel();l p1.add(new JButton(按钮按钮1);l p1.add(new JButton(按钮按钮2);l p1.add(ne

16、w JButton(按钮按钮3);l p2 = new JPanel();l p2.add(new JLabel(标签显示标签显示);l jp_cards.add(,CARD1,p1); /步骤步骤l jp_cards.add(CARD2, p2);l this.getContentPane().add(Center, jp_cards); l c.addItemListener(this);l l public void itemStateChanged(ItemEvent e) l cards.show(jp_cards,(String)e.getItem() ); /步骤步骤 l l p

17、ublic static void main(String args) l CardLayoutDemo window = new CardLayoutDemo ();l window.setTitle(CardLayoutDemo);l window.pack();l window.setVisible(true);l l运行效果运行效果空布局（空布局（null布局）布局） l首先利用首先利用setLayout(null)setLayout(null)语句将容器的布局设置为语句将容器的布局设置为nullnull布布局（空布局）。局（空布局）。l再调用组件的再调用组件的setBounds(in

18、t x, int y, int width,int setBounds(int x, int y, int width,int height)height)方法设置组件在容器中的大小和位置。方法设置组件在容器中的大小和位置。举例举例 NullLayoutDemo.javalimport java.awt.*;limport javax.swing.*;lpublic class NullLayoutDemol JFrame fr;l JButton a,b;l NullLayoutDemo() l fr = new JFrame();l fr.setBounds(100,100,250,150

19、);l fr.setLayout(null);l a=new JButton(按钮按钮a);l b=new JButton(按钮按钮b);l fr.getContentPane().add(a);l a.setBounds(30,30,80,25);l fr.getContentPane().add(b);b.setBounds(150,40,80,25); fr.setTitle(NullLayoutDemo); fr.setVisible(true); public static void main(String args) new NullLayoutDemo(); 7.3 任务实施任务

20、实施LoginPanel.java (模仿实践模仿实践)lclass LoginPanel extends JPanel lprivate static final long serialVersionUID = 1L;l private JLabel namelabel,pwdlabel,titlelabel;l private JTextField namefield;l private JPasswordField pwdfield;l private JButton loginbtn,registerbtn,cancelbtn;l private JPanel panel1,panel

21、2,panel3,panel21,panel22;l private JFrame iframe;lpublic LoginPanel(JFrame frame)l iframe = frame;1. titlelabel = new JLabel(欢迎使用考试系欢迎使用考试系统统); titlelabel.setFont(new Font(titlelabel.setFont(new Font(隶书隶书,Font.BOLD,24);,Font.BOLD,24); namelabel = new JLabel( namelabel = new JLabel(用户名：用户名：);); pwdla

22、bel = new JLabel( pwdlabel = new JLabel(密密 码：码：);); namefield = new JTextField(16); namefield = new JTextField(16); pwdfield = new JPasswordField(16); pwdfield = new JPasswordField(16); pwdfield.setEchoChar( pwdfield.setEchoChar(* *);); loginbtn = new JButton( loginbtn = new JButton(登录登录);); registerbtn = new JButton( registerbtn = new JButton(注册注册););cancelbtn = new JButton(取消取消); panel1 = new JPanel(); panel2 = new JPanel(); panel3 = new JPanel(); panel21 = new JPanel(); panel22 = new JPanel(); /添加组件，采用边界布局添加组件，采用边界布局 BorderLayout bl = new BorderLayout(); setLayout(bl); panel1.add(titlelab