《图形用户界面设计》PPT课件.ppt

1,图形用户界面设计,2,概述组件和容器布局设计图形编程,图形用户界面设计,3,概述,用户界面(UserInterface),用户与计算机系统(各种程序)交互的接口AWT(AbstractWindowToolkit)一些用户界面组件(Component)事件响应模型(Event-handlingmodel)布局管理器(Layoutmanager)绘图和图形操作类,如Shape、Font、Color类等,4,概述,AWT中主要类的继承关系,5,概述,6,概述,Swing组件在实现时不包含任何本地（native）代码Swing组件可以不受硬件平台的限制，而具有更多的功能Swing被称为“轻量级（lightweight）”组件，AWT称为“重量级（heavyweight）”组件“重量级”组件与“轻量级”组件一同使用时，如果组件区域有重叠，则“重量级”组件总是显示在上面Javax.Swing包,7,概述,Swing主要类的继承关系,8,概述,图形用户界面的实现选取组件设计布局响应事件应用原则Swing比AWT提供更全面、更丰富的图形界面设计功能Java2平台支持AWT组件，但鼓励用Swing组件,9,组件和容器,组件Java把由Component类的子类或间接子类创建的对象称为一个组件。容器Java把由Container类的子类或间接子类创建的对象称为一个容器。,10,组件和容器,添加组件通过add()方法添加到容器中容器嵌套fra.add(pan)布局管理器,11,组件和容器,java.awt.Frame:有边框容器构造方法Frame()Frame(Stringtitle)常用方法getTitle()setTitle(Strings)setVisible(booleanb)setBounds(inta,intb,intwidth,intheight)setBackground(Colorc)pack()setSize(intwidth,intheight)dispose()add()remove(),12,组件和容器,Frame框架类importjava.awt.*;publicclassMyFrameextendsFramepublicstaticvoidmain(Stringargs)MyFramefr=newMyFrame(“HelloOutThere!”);/构造方法fr.setSize(200,200);/设置Frame的大小，缺省为（0，0）fr.setBackground(Color.red);/设置Frame的背景，缺省为白色fr.setVisible(true);/设置Frame为可见，缺省为不可见publicMyFrame(Stringstr)super(str);/调用父类的构造方法,13,组件和容器,Panel面板类一种没有标题的容器。实例化后必须用Container的add方法加入到Window对象中。,14,importjava.awt.*;publicclassFrameWithPanelextendsFramepublicFrameWithPanel(Stringstr)super(str);publicstaticvoidmain(Stringargs)FrameWithPanelfr=newFrameWithPanel(FramewithPanel);Panelpan=newPanel();fr.setSize(200,200);fr.setBackground(Color.red);/框架fr的背景颜色设置为红色fr.setLayout(null);/取消布局管理器pan.setSize(100,100);pan.setBackground(Color.yellow);/设置面板pan的背景颜色为黄色fr.add(pan);/用add方法把面板pan添加到框架fr中fr.setVisible(true);,15,组件和容器,顶层容器所有组件都必须包含在某个容器中，而有些容器是可以嵌套的，在这个嵌套层次的最外层，必须是一个顶层（Toplevel）容器四种顶层容器JFrame、JApplet、JDialog和JwindowJFrame是一个带有标题行和控制按钮（最小化、恢复/最大化、关闭）的独立窗口，创建应用程序时需要使用JFrame。创建小应用程序时使用JApplet，它被包含在浏览器窗口中。创建对话框时使用JDialog。JWindow是一个不带有标题行和控制按钮的窗口，因此通常很少使用,16,组件和容器,内容窗格顶层容器都有一个内容窗格（ContentPane）顶层容器中除菜单之外的组件都是放在这个内容窗格中将组件放入内容窗格通过顶层容器的getContentPane()方法获得其缺省的内容窗格，然后将组件添加到内容窗格中,ContainercontentPane=frame.getContentPane();contentPane.add(button,BorderLayout.CENTER);frame.getContentPane().add(button,BorderLayout.CENTER);,17,importjava.awt.*;importjavax.swing.*;publicclassJFrameDemopublicstaticvoidmain(Strings)JFrameframe=newJFrame(JFrameDemo);/创建一个JFrame的实例JButtonbutton=newJButton(Pressme);/创建一个JButton的实例/将JButton放到JFrame的中央frame.getContentPane().add(button,BorderLayout.CENTER);frame.pack();/将JFrame设置到适当的大小frame.setVisible(true);/显示JFrame,18,组件和容器,将组件放入内容窗格创建一个新的内容窗格取代顶层容器缺省的内容窗格。创建一个JPanel的实例，然后将组件添加到JPanel实例中，再通过顶层容器的setContentPane()方法将JPanel实例设置为新的内容窗格,JPanelcontentPane=newJPanel();contentPane.setLayout(newBorderLayout();contentPane.add(button,BorderLayout.CENTER);frame.setContentPane(contentPane);,19,importjava.awt.*;importjavax.swing.*;publicclassJFrameDemo2publicstaticvoidmain(Strings)JFrameframe=newJFrame(JFrameDemo2);/创建一个JFrame的实例JButtonbutton=newJButton(Pressme);/创建一个JButton的实例JPanelcontentPane=newJPanel();/创建一个JPanel的实例/为JPanel设置BorderLayout布局管理器contentPane.setLayout(newBorderLayout();/将JButton放到JPanel的中央contentPane.add(button,BorderLayout.CENTER);/为JFrame设置新的内容窗格frame.setContentPane(contentPane);frame.pack();/将JFrame设置到适当的大小frame.setVisible(true);/显示JFrame,20,组件和容器,练习创建一个黄色面板，通过add()方法在面板中添加了一个按钮，然后将该面板添加到一个JFrame的实例中，JFrame实例的背景被设置为蓝绿色,importjava.awt.*;importjavax.swing.*;publicclassFrameWithPanelpublicstaticvoidmain(Stringargs)JFrameframe=newJFrame(FramewithPanel);ContainercontentPane=frame.getContentPane();contentPane.setBackground(Color.CYAN);JPanelpanel=newJPanel();panel.setBackground(Color.yellow);JButtonbutton=newJButton(Pressme);panel.add(button);contentPane.add(panel,BorderLayout.SOUTH);frame.setSize(300,200);frame.setVisible(true);,21,importjava.awt.*;importjavax.swing.*;publicclassExGuiprivateJFrameframe;privateJButtonb1;privateJButtonb2;publicstaticvoidmain(Stringargs)ExGuithat=newExGui();that.go();,main()方法在这个例子中，main()方法有两个作用。首先，它创建了一个ExGui类的实例，在这个实例创建之前，并没有实际可用的b1和b2数据项。其次，当ExGui实例创建好以后，main()又调用了该实例的go()方法，在这个方法中，程序的实际功能得以实现。,布局管理器,22,publicvoidgo()frame=newJFrame(GUIexample);/创建一个JFrame实例ContainercontentPane=frame.getContentPane();/获取内容窗格/为内容窗格设置FlowLayout布局管理器contentPane.setLayout(newFlowLayout();b1=newJButton(Pressme);/创建JButton实例b2=newJButton(DontpressMe);contentPane.add(b1);/添加按钮contentPane.add(b2);frame.pack();frame.setVisible(true);,newJFrame(“GUIexample”)这条语句的功能是创建JFrame类的一个实例。JFrame是一个顶层级窗口，它带有标题框（标题由构造方法中的String型参数“GUIexample”指定）并且可以改变大小。需要注意的是，在刚刚创建时，JFrame的大小为0，并且不可见。,frame.getContentPane()这条语句获取JFrame实例缺省的内容窗格，此后可以修改它的布局管理器，并添加组件。,contentPane.setLayout(newFlowLayout()这条语句创建了一个FlowLayout型的布局管理器，并通过调用setLayout()方法将该布局管理器指定给前面已经获得的JFrame实例的缺省内容窗格。,newJButton(“PressMe”)这条语句的功能是创建javax.swing.JButton类的一个实例，该实例是窗口中的标准按钮（button），按钮上的标签由构造方法中String型参数“PressMe”指定。,frame.pack()这条语句通知框架frame设定一个适当的大小，以便能够以“紧缩”的形式包容各个组件。为了做到这一点，frame需要通知布局管理器，由布局管理器安排每个组件的大小和位置。,frame.setVisible(true)这条语句的功能是使得框架frame以及它所包含的组件对用户可见，在此之前，框架和组件虽然已经创建好了，但是并没有显示出来，只有调用了setVisible(true)方法后，它们才变为可见。,23,布局管理器,组件的布局，包括位置和大小，通常由布局管理器（LayoutManager）负责安排每个容器都有一个缺省的布局管理器通过容器的setLayout()方法改变容器的布局管理器多种布局管理器java.awt.FlowLayout、java.awt.BorderLayout、java.awt.GridLayout、java.awt.CardLayout、java.awt.GridBagLayout、javax.swing.BoxLayout如果用户确实需要亲自设置组件大小或位置，则应取消该容器的布局管理器，方法为：setLayout(null)；,24,布局管理器,FlowLayout(java.awt.FlowLayout)所有组件从左往右排成一行一行排满后转到下一行从左往右排FlowLayout构造方法publicFlowLayout()publicFlowLayout(intalign)publicFlowLayout(intalign,inthgap,intvgap)align对齐方式的可选项,align的可取值有FlowLayout.LEFT、FlowLayout.RIGHT和FlowLayout.CENTER三种形式hgap和vgap，可以设定组件的水平间距和垂直间距FlowLayout是Panel，Applet的缺省布局管理器,25,布局管理器,importjava.awt.*;importjavax.swing.*;publicclassFlowWindowextendsJFramepublicFlowWindow()ContainercontentPane=getContentPane();contentPane.setLayout(newFlowLayout();contentPane.add(newJButton(Button1);contentPane.add(newJButton(2);contentPane.add(newJButton(Button3);contentPane.add(newJButton(Long-NamedButton4);contentPane.add(newJButton(Button5);publicstaticvoidmain(Stringargs)FlowWindowwin=newFlowWindow();win.setTitle(FlowLayout);win.pack();win.setVisible(true);,26,importjava.awt.*;importjavax.swing.*;publicclassFlowLayoutDemoprivateJFrameframe;privateJButtonbutton1,button2,button3;publicstaticvoidmain(Stringargs)FlowLayoutDemothat=newFlowLayoutDemo();that.go();publicvoidgo()frame=newJFrame(FlowLayout);ContainercontentPane=frame.getContentPane();/为内容窗格设置FlowLayout布局管理器contentPane.setLayout(newFlowLayout();button1=newJButton(Ok);button2=newJButton(Open);button3=newJButton(Close);contentPane.add(button1);contentPane.add(button2);contentPane.add(button3);frame.setSize(200,100);frame.setVisible(true);,27,布局管理,BorderLayout(java.awt.BorderLayout)BorderLayout是顶层容器中内容窗格的缺省布局管理器上北、下南、左西、右东、中，表示为常量BorderLayout.NORTH、BorderLayout.SOUTH、BorderLayout.WEST、BorderLayout.EAST、BorderLayout.CENTER,28,布局管理器,通过add()方法加入到容器中的指定区域如果在add()方法中没有指定将组件放到哪个区域，那么它将会缺省地被放置在Center区域在容器的每个区域，只能加入一个组件，如果向某个区域中加入多个组件，那么只有最后一个组件是有效的,frame=newJFrame(“FrameTitle”)；button=newJButton(“PressMe”)；frame.getContentPane().add(button,BorderLayout.SOUTH)；,frame.getContentPane().add(button)；按钮将被放在框架的中部,frame.getContentPane().add(newJButton(“buttonA”),BorderLayout.SOUTH)；frame.getContentPane().add(newJButton(“buttonB”),BorderLayout.SOUTH)；frame.getContentPane().add(newJButton(“buttonC”),BorderLayout.SOUTH)；最后只有buttonC显示在South区域。,29,布局管理器,四个边界区域，如果没有使用，大小将变为零，Center区域将会扩展并占据这个未用区域的位置。如果均没有使用，Center区域将会占据整个窗口。符号表示BorderLayout.SOUTH被定义为字符串South,30,importjava.awt.*;importjavax.swing.*;publicclassBorderLayoutDemoprivateJFrameframe;privateJButtonbe,bw,bn,bs,bc;publicstaticvoidmain(Stringargs)BorderLayoutDemothat=newBorderLayoutDemo();that.go();voidgo()frame=newJFrame(BorderLayout);be=newJButton(East);bs=newJButton(South);bw=newJButton(West);bn=newJButton(North);bc=newJButton(Center);frame.getContentPane().add(be,BorderLayout.EAST);frame.getContentPane().add(bs,BorderLayout.SOUTH);frame.getContentPane().add(bw,BorderLayout.WEST);frame.getContentPane().add(bn,BorderLayout.NORTH);frame.getContentPane().add(bc,BorderLayout.CENTER);frame.setSize(350,200);frame.setVisible(true);,31,布局管理器,GridLayout布局管理器GridLayout是一种网格式的布局管理器，它将容器空间划分成若干行乘若干列的网格，组件依次放入其中，每个组件占据一格组件被放入容器的次序决定了它所占据的位置。每行网格从左至右依次填充，一行用完之后转入下一行当容器的大小改变时，GridLayout所管理的组件的相对位置不会发生变化，但组件的大小会随之改变,32,布局管理器,GridLayout构造方法publicGridLayout()创建一个只有一行的网格，网格的列数根据实际需要而定publicGridLayout(introws,intcols)rows和cols两个参数分别指定网格的行数和列数rows和cols中的一个值可以为0，但是不能两个都是0。如果为0，那么网格行(列)数将根据实际需要而定publicGridLayout(introws,intcols,inthgap,intvgap)hgap和vgap分别表示网格间的水平间距和垂直间距,33,importjava.awt.*;importjavax.swing.*;publicclassGridWindowextendsJFramepublicGridWindow()ContainercontentPane=getContentPane();contentPane.setLayout(newGridLayout(0,2);contentPane.add(newJButton(Button1);contentPane.add(newJButton(2);contentPane.add(newJButton(Button3);contentPane.add(newJButton(Long-NamedButton4);contentPane.add(newJButton(Button5);publicstaticvoidmain(Stringargs)GridWindowwin=newGridWindow();win.setTitle(FlowLayout);win.pack();win.setVisible(true);,34,importjava.awt.*;importjava.awt.event.*;publicclassTestGridLayoutextendsWindowAdapterpublicTestGridLayout()publicvoidwindowClosing(WindowEvente)System.exit(0);publicstaticvoidmain(Stringargs)Frameframe=newFrame(TestGridLayout);frame.setSize(300,200);frame.addWindowListener(newTestGridLayout();Buttonbutton1=newButton(1);Buttonbutton2=newButton(2);Buttonbutton3=newButton(3);Buttonbutton4=newButton(4);Buttonbutton5=newButton(5);frame.setLayout(newGridLayout(2,2,10,20);frame.add(button1);frame.add(button2);frame.add(button3);frame.add(button4);frame.add(button5);frame.setVisible(true);,35,布局管理器,CardLayout布局管理器卡片式的布局管理器，两个或多个组件共享相同的显示空间，每一时刻只显示出其中的一张,36,importjava.awt.*;importjava.awt.event.*;publicclassTestCardLayoutextendsWindowAdapterimplementsActionListenerprivateFrameframe;privateCardLayoutcardLayout;publicvoidrun()frame=newFrame(TestCardLayout);frame.setSize(150,120);frame.addWindowListener(this);Buttonbutton1=newButton(卡片1);Buttonbutton2=newButton(卡片2);Buttonbutton3=newButton(卡片3);Panelpanel1=newPanel();panel1.setBackground(Color.yellow);Panelpanel2=newPanel();panel2.setBackground(Color.green);Panelpanel3=newPanel();panel3.setBackground(Color.magenta);panel1.add(button1);button1.addActionListener(this);panel2.add(button2);button2.addActionListener(this);panel3.add(button3);button3.addActionListener(this);,37,frame.setLayout(cardLayout);frame.add(panel1,第一张);frame.add(panel2,第二张);frame.add(panel3,第三张);frame.setVisible(true);publicvoidwindowClosing(WindowEvente)System.exit(0);publicvoidactionPerformed(ActionEvente)cardLayout.next(frame);publicstaticvoidmain(Stringargs)TestCardLayoutmyCardLayout=newTestCardLayout();myCardLayout.run();,38,布局管理器,GridBagLayout(java.awt.GridBagLayout)最精细、最灵活的布局管理将空间划分为由行和列组成的网格单元，每个单元放一个组件，网格单元大小可以不同(宽度和高度