《任务设计用户登录界面的布局.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很像,但元件可以变化大小,流式布局
3、（FlowLayout类）,import java.awt.*; import java.awt.event.*; 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
4、“); 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) FlowLayoutDemo myFlowLayout = new FlowLayoutDemo(); myFlowLayout.setBounds(0,0,200,200); myFlowLayout.setVisible(true); ,FlowLayout,con.setLayout(new
5、FlowLayout(FlowLayout.LEFT);,myFlowLayout.setBounds(0,0,300,300);,边界布局（BorderLayout类）,BorderLayout,import java.awt.*; import java.awt.event.*; import javax.swing.*; public class BorderLayoutDemo extends JFrame public BorderLayoutDemo() Container con= getContentPane(); con.setLayout(new BorderLayout(
6、); con.add(new JButton(“EAST“),BorderLayout.EAST); con.add(new JButton(“WEST“),BorderLayout.WEST); 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) BorderLayout
7、Demo myBorderLayout = new BorderLayoutDemo(); myBorderLayout.setBounds(0,0,400,400); myBorderLayout.setVisible(true); ,网格布局（GridLayout类）,GridLayout,import java.awt.*; import java.awt.event.*; import javax.swing.*; public class GridLayoutDemo extends JFrame public GridLayoutDemo() Container con = get
8、ContentPane(); con.setLayout(new GridLayout(6,1); 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 button“); public static void main(String args) GridLayoutDem
9、o myGridLayout = new GridLayoutDemo(); myGridLayout.setBounds(0,0,300,300); myGridLayout.setVisible(true); ,con.setLayout(new GridLayout(2,3);,卡片布局（CardLayout类）,卡片布局（CardLayout类）,假设将容器jp_card设置为CardLayout布局方式，一般步骤如下： 创建CardLayout对象作为布局管理，例如： CardLayout cards=new CardLayout(); (1)使用容器的setLayout()方法为容
10、器设置布局方式，例如： JPanel jp_cards= new JPanel(); jp_cards.setLayout(cards); (2)容器调用add(String a, Component b)方法，将组件b加入到容器中，并为组件取一个代号，该代号是一个字符串，以供更换显示组件时使用，例如： final static String CARD1 = “第一张卡片“; final static String CARD2= “第二张卡片“; jp_cards.add(p1,CARD1); jp_cards.add(p2,CARD2); (3 )使用CardLayout类提供的show()
11、方法，很局容器名字jp_card和组件代号显示这一组件，例如： cards.show(CARD1, jp_cards,); cards.show(CARD2, jp_cards);,CardLayout,举例 CardLayoutDemo.java,import java.awt.*; import java.awt.event.*; import javax.swing.*; public class CardLayoutDemo extends JFrame implements ItemListener JPanel jp_cards; JPanel cp,p1,p2; CardLayo
12、ut 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 CardLayout(); /步骤 cp = new JPanel(); c = new JComboBox(); c.addItem(CARD1); c.addItem(CARD2)
13、; 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“); p2 = new JPanel(); p2.add(new JLabel(“标签显示“); jp_cards.add(,CARD1
14、,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 = new CardLayoutDemo (); window.setTitle(“Car
15、dLayout Demo“); 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 NullLayoutDemo JFrame fr; JButton a,b
16、; 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(true); public
17、 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,
18、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(“密 码：“); namef
19、ield = new JTextField(16); 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(); /添
20、加组件，采用边界布局 BorderLayout bl = new BorderLayout(); setLayout(bl); 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(regis
21、terbtn); 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上.,