JAVA布局.ppt

1 Objective目标 TodistinguishsimpleGUIcomponents 认识常见的GUI组件 TodescribetheJavaGUIAPIhierarchy 描述JAVAGUIAPI的层次结构 Tocreateuserinterfacesusingframes panels andsimpleUIcomponents 使用JFrame JPanel和简单的组件创建用户界面 Tounderstandtheroleoflayoutmanagers 理解布局管理器的作用 2 Objective目标 TousetheFlowLayout GridLayout andBorderLayoutmanagerstolayoutcomponentsinacontainer 会使用FlowLayout GridLayout 和BorderLayout三种布局方式 TouseJPanelassubcontainers 使用面板作为子容器 TospecifycolorsandfontsusingtheColorandFontclasses 使用Color类和Font类 3 CreatingGUIObjects JButtonjbtOK newJButton OK JLabeljlblName newJLabel Enteryourname JTextFieldjtfName newJTextField TypeNameHere JCheckBoxjchkBold newJCheckBox Bold JRadioButtonjrbRed newJRadioButton Red JComboBoxjcboColor newJComboBox newString Red Green Blue JButton JLabel JTextField JCheckBox JRadioButton JComboBox JFrame 4 SwingvsAWT WhenJavawasintroduced theGUIclasseswerebundledinalibraryknownastheAbstractWindowToolkit AWT 抽象视窗工具包 早期的Java图形界面工具包 importjava awt importjava awt event TheAWTuser interfacecomponentswerereplacedbySwing AWT已经被swing替代 importjavax swing 5 GUIAPI TheGUIAPIcontainsclassesthatcanbeclassifiedintothreegroups GUIAPI可以分成三个组 组件类 component 容器类 container 辅助类 helper 容器指的是能够放置组件的一类组件 例如窗口 而按钮就不是容器 因为按钮上是不能再放置其他组件的 6 Container 容器 7 Component 组件类 8 Helper 辅助类 9 GUI层次结构 顶层容器 JFrame JDialog JApplet 中间级容器 JPanel JSplitPane JScrollPane 基本控件 JButton JTextFieldJRadioButton 9 顶层容器 中间级容器 基本控件 顶级容器和中间级容器 顶级容器包括JFrame等 顶级容器可以直接显示出来 中间级容器包括JPanel等 中间级容器不能独立显示出来 必须直接或间接的放置在顶层容器上才能显示 10 11 创建窗口 JFrame importjavax swing publicclassTestFrame publicstaticvoidmain String args JFrameframe newJFrame TestFrame 创建窗口frame setSize 400 300 设置窗口大小frame setLocationRelativeTo null 窗口显示在屏幕中间frame setDefaultCloseOperation JFrame EXIT ON CLOSE frame setVisible true 窗口显示 setDefaultCloseOperation方法 用关闭窗口时 点击窗口的 默认的行为只是简单地隐藏窗口 可以使用setDefaultCloseOperation方法改变默认行为 该方法的参数有四种 HIDE ON CLOSE 默认行为 隐藏该窗体DISPOSE ON CLOSE 隐藏并释放该窗体EXIT ON CLOSE 使用System exit方法退出应用程序DO NOTHING ON CLOSE 不执行任何操作 12 13 向窗口中放控件 publicclassMyFrameWithComponents publicstaticvoidmain String args JFrameframe newJFrame TestFrame JButtonbutton newJButton 按这里 创建按钮frame add button BorderLayout CENTER 按钮放入窗口中部JLabellabel newJLabel 按钮的点击次数是 0 创建标签frame add label BorderLayout SOUTH 标签放入窗口南部frame pack 窗口自动调整大小 使之能适应其中的组件frame setDefaultCloseOperation JFrame EXIT ON CLOSE frame setVisible true 将控件放入容器的方法 容器 add 控件 位置 可视化开发步骤 1 File New other designer swing JFrame2 为窗口取名3 进入design视图 14 15 2 窗口标题 1 选中窗口 拖动窗口的边线可以调整窗口大小 2 按钮文字 1 选中按钮 17 布局管理 LayoutManagers TheUIcomponentsareplacedincontainers EachcontainerhasalayoutmanagertoarrangetheUIcomponentswithinthecontainer 组件要放置在容器中 每个容器都可以应用一种布局管理器 布局管理器可以决定放置在这个容器中的组件的排列方式 位置和尺寸等 LayoutmanagersaresetincontainersusingthesetLayout LayoutManager methodinacontainer 使用setLayout方法可以为容器设置布局管理器 容器对象 setLayout 布局管理器对象 18 布局管理器的种类 Java中定义了多种布局类 每种布局类对应一种布局策略 每个布局类对象称为布局管理器 BorderLayoutFlowLayoutGridLayoutBoxLayoutCardLayoutGridBagLayoutSpringLayout 19 BorderLayout BorderLayout是JFrame和JDialog的内容窗格缺省的布局形式BorderLayout将把容器最多分成五个区域 东区 西区 南区 北区 中间区向一个应用了BorderLayout布局的容器中放组件使用下面的语句 容器 add 组件 位置 位置指东西南北中之一 20 TheBorderLayoutManager publicclassShowBorderLayoutextendsJFrame publicShowBorderLayout this setLayout newBorderLayout 5 10 控件间的水平间距5 竖直间距10this add newJButton East BorderLayout EAST this add newJButton South BorderLayout SOUTH this add newJButton West BorderLayout WEST this add newJButton North BorderLayout NORTH this add newJButton Center 不指定位置 表示放在中区 publicstaticvoidmain String args ShowBorderLayoutframe newShowBorderLayout frame setTitle BorderLayout frame setDefaultCloseOperation JFrame EXIT ON CLOSE frame setLocationRelativeTo null frame setSize 300 200 frame setVisible true 21 BorderLayout的特征 容器最多分成五个区域 北区 南区 西区 东区 中间区 每个组件只能占据一个区域一个区域只能显示一个组件调整容器大小时 南区 北区的组件高度不变 东区 西区组件的宽度不变 中间区高度 宽度均会发生变化很少有东 南 西 北 中五区占满的情况 22 frame setLayout newBorderLayout 5 10 控件间的水平间距和垂直间距 23 BorderLayout的典型例子 24 1 选中任意容器 2 layout属性 选择BorderLayout 3 点layout左边的 3 hgap vgap分别为水平间距和垂直间距 25 FlowLayout JPanel的默认布局方式Thecomponentsarearrangedinthecontainerfromlefttorightintheorderinwhichtheywereadded 应用了FlowLayout布局的容器 其中的组件按照加入的先后顺序从左向右排列 一行排满之后转到下一行继续从左向右排列 默认情况下每行组件都居中 向一个应用了FlowLayout布局的容器中放组件只需要 容器 add 组件 26 FlowLayoutExample publicclassShowFlowLayoutextendsJFrame publicShowFlowLayout FlowLayoutlayout newFlowLayout FlowLayout LEFT 10 20 this setLayout layout this add newJLabel FirstName 标签this add newJTextField 8 文本框this add newJLabel MI this add newJTextField 1 this add newJLabel LastName this add newJTextField 8 publicstaticvoidmain String args ShowFlowLayoutframe newShowFlowLayout frame setTitle ShowFlowLayout frame setSize 200 200 frame setDefaultCloseOperation JFrame EXIT ON CLOSE frame setVisible true 27 this setLayout newFlowLayout FlowLayout LEFT 10 20 左对齐 控件间水平间距10 控件间垂直间距20 28 GridLayout Thegridlayoutmanagerarrangescomponentsinagridformation Thecomponentareplacedinthegridfromlefttoright startingwiththefirstrow thenthesecond andsoon intheorderinwhichtheyareadded 组件排列成n行m列 每个组件相同大小 29 publicclassShowGridLayoutextendsJFrame publicShowGridLayout 3行 2列 水平 竖直间距都是5this setLayout newGridLayout 3 2 5 5 this add newJLabel FirstName this add newJTextField 8 this add newJLabel MI this add newJTextField 1 this add newJLabel LastName this add newJTextField 8 publicstaticvoidmain String args ShowGridLayoutframe newShowGridLayout frame setTitle ShowGridLayout frame setSize 200 125 frame setDefaultCloseOperation JFrame EXIT ON CLOSE frame setVisible true GridLayoutExample 30 frame setLayout newGridLayout 3 2 5 5 3行2列 控件间水平间距5 控件间垂直间距5 31 使用面板做子容器 面板1 面板2设置为FlowLayout布局 右对齐 在其上面放两个按钮 将窗口设置为BorderLayout布局 在中区放一个面板 在南区放一个面板 Java的面板类为JPanel 32 练习1 FlowLayout 33 练习2 GridLayout 4行3列 34 练习3 35 Color类 使用java awt Color类设置颜色 创建颜色对象的方法 1 使用红 绿 蓝三个分量值 每个值在 0 255 例如 Colorc newColor 228 100 255 2 使用Color类的颜色常量例如 Colorc Color RED 36 设置颜色 Example JButtonbutton newJButton 按钮 button setBackground Color yellow button setForeground Color red 37 Font类 FontmyFont newFont name style size Example FontmyFont newFont SansSerif Font BOLD 16 FontmyFont2 newFont Serif Font BOLD Font ITALIC 12 JButtonjbtOK newJButton OK jbtOK setFont myFont FontNames黑体 宋体 SansSerif Serif Monospaced Dialog orDialogInput FontStyleFont PLAIN 0 Font BOLD 1 Font ITALIC 2 andFont BOLD Font ITALIC 3 38 ImageIcon类 javax swing ImageIcon类代表图标 ImageIconicon newImageIcon d image us gif