任务设计用户登录界面的布局.ppt

《任务设计用户登录界面的布局.ppt》由会员分享，可在线阅读，更多相关《任务设计用户登录界面的布局.ppt（22页珍藏版）》请在三一办公上搜索。

1、任务7设计用户登录界面的布局,学习情境二(考试系统单机版),学习目标,知识目标,掌握FlowLayout流布局的使用。掌握BorderLayout边界布局的使用。掌握GridLayout表格布局的使用。掌握CardLayout类布局的使用掌握多种布局方式的综合运用,协调能力、团队合作的能力接受新知识、自主学习的能力,图形用户界面设计中的布局技巧,7.1 任务描述,本章的学习任务是对用户登录界面进行布局设计。通过上一章的学习，我们已经完成了将组件添加到容器中的任务，但是进行图形界面设计，不仅仅只是将组件加到容器中，为使界面合理、美观，我们还应该控制组件在容器中的位置，即进行布局设计。事实上，在第

2、6章的例6-5由于没有使用布局管理，实际的显示效果如图7-1 所示，而设置了布局管理的界面如图所示。,7.2 技术要点,FlowLayout（流式布局）BorderLayout（边界布局）GridLayout（网格布局）CardLayout（卡片布局）,布局管理器,FlowLayout以加入的顺序自左而右排放组件BorderLayout东,南,西,北,中GridLayout以行列的方式排放组件BoxLayout沿著水平的x轴,垂直的y轴排放GardLayout最上层的才看的到GridBagLayout和GridLayout很像,但元件可以变化大小,流式布局（FlowLayout类）,impor

3、t java.awt.*;import.*;import javax.swing.*;public class FlowLayoutDemo 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

4、(fifth);con.add(new JButton(This is the last button);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);,

5、边界布局（BorderLayout类）,BorderLayout,import 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.W

6、EST);con.add(new JButton(SOUTH),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.setVisib

7、le(true);,网格布局（GridLayout类）,GridLayout,import 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);

8、con.add(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);,卡片布局（CardLayo

9、ut类）,卡片布局（CardLayout类）,假设将容器jp_card设置为CardLayout布局方式，一般步骤如下：创建CardLayout对象作为布局管理，例如：CardLayoutcards=new CardLayout();(1)使用容器的setLayout()方法为容器设置布局方式，例如：JPanel jp_cards=new JPanel();jp_cards.setLayout(cards);(2)容器调用add(Stringa,Component b)方法，将组件b加入到容器中，并为组件取一个代号，该代号是一个字符串，以供更换显示组件时使用，例如：final static S

10、tring CARD1=第一张卡片;final static String CARD2=第二张卡片;jp_cards.add(p1,CARD1);jp_cards.add(p2,CARD2);(3)使用CardLayout类提供的show()方法，很局容器名字jp_card和组件代号显示这一组件，例如：cards.show(CARD1,jp_cards,);cards.show(CARD2,jp_cards);,CardLayout,举例 CardLayoutDemo.java,import java.awt.*;import java.awt.event.*;import javax.swi

11、ng.*;public class CardLayoutDemo extends JFrame implements ItemListener JPanel jp_cards;JPanel cp,p1,p2;CardLayout cards;JComboBox c;final static String CARD1=第一张卡片;final static String CARD2=第二张卡片;public CardLayoutDemo()setLayout(new BorderLayout();setFont(new Font(Helvetica,Font.PLAIN,14);cards=new

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

13、2=new JPanel();p2.add(new JLabel(标签显示);jp_cards.add(,CARD1,p1);/步骤 jp_cards.add(CARD2,p2);this.getContentPane().add(Center,jp_cards);c.addItemListener(this);public void itemStateChanged(ItemEvent e)cards.show(jp_cards,(String)e.getItem();/步骤 public static void main(String args)CardLayoutDemo window=

14、new CardLayoutDemo();window.setTitle(CardLayoutDemo);window.pack();window.setVisible(true);,运行效果,空布局（null布局）,首先利用setLayout(null)语句将容器的布局设置为null布局（空布局）。再调用组件的setBounds(int x,int y,int width,int height)方法设置组件在容器中的大小和位置。,举例 NullLayoutDemo.java,import java.awt.*;import javax.swing.*;public class NullLay

15、outDemo JFrame fr;JButton a,b;NullLayoutDemo()fr=new JFrame();fr.setBounds(100,100,250,150);fr.setLayout(null);a=new JButton(按钮a);b=new JButton(按钮b);fr.getContentPane().add(a);a.setBounds(30,30,80,25);fr.getContentPane().add(b);,b.setBounds(150,40,80,25);fr.setTitle(NullLayoutDemo);fr.setVisible(tru

16、e);public static void main(String args)new NullLayoutDemo();,7.3 任务实施LoginPanel.java(模仿实践),class LoginPanel extends JPanel private static final long serialVersionUID=1L;private JLabel namelabel,pwdlabel,titlelabel;private JTextField namefield;private JPasswordField pwdfield;private JButton loginbtn,

17、registerbtn,cancelbtn;private JPanel panel1,panel2,panel3,panel21,panel22;private JFrame iframe;public LoginPanel(JFrame frame)iframe=frame;titlelabel=new JLabel(欢迎使用考试系统);,titlelabel.setFont(new Font(隶书,Font.BOLD,24);namelabel=new JLabel(用户名：);pwdlabel=new JLabel(密 码：);namefield=new JTextField(16);

18、pwdfield=new JPasswordField(16);pwdfield.setEchoChar(*);loginbtn=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);

19、panel1.add(titlelabel);panel21.add(namelabel);panel21.add(namefield);panel22.add(pwdlabel);panel22.add(pwdfield);panel2.add(panel21,BorderLayout.NORTH);panel2.add(panel22,BorderLayout.SOUTH);panel3.add(loginbtn);panel3.add(registerbtn);panel3.add(cancelbtn);add(panel1,BorderLayout.NORTH);add(panel2,BorderLayout.CENTER);add(panel3,BorderLayout.SOUTH);,7.3 任务实施LoginPanel.java(续),教学小结,实践操作中常见的错误：若在JFrame中直接添加多个组件,看到的仅是最后一个添加的组件.这是因为JFrame默认是BorderLayout布局方式.若没有指明放置位置，则表明为默认的“Center”方位。每个区域只能添加一个组件，若添加多个，则只能显示最后一个。解决方法:改变当前JFrame的布局方式 在JFrame上添加中间容器JPanel,将组件放置于JPanel上.,