380 likes | 599 Views
LAYOUT. CMPT 381. Overview. What is layout? Examples Layout models. What is Layout?. Position of widgets in the containing window What to do when the window changes size ? Must be programmed
E N D
LAYOUT CMPT 381
Overview What is layout? Examples Layout models
What is Layout? • Position of widgets in the containing window • What to do when the window changes size? • Must be programmed • Layout Managers greatly reduce the need to worry about positioning, sizing and alignment of widgets
Window Tree • hierarchical layout
Hierarchical Layout • Widgets positioned relative to their parent
Layout Approaches • Fixed Layout • Stacked Layout • Edge-Anchored Layout • Variable Intrinsic Size Layout • Automated Approaches
Why not use a GUI builder? • These are getting better, BUT: • They can cause problems • e.g., they may use simplistic models • Resizing still an issue! • The generated code is often not maintainable • Fixing problems requires understanding the underlying principles anyway • http://leepoint.net/JavaBasics/gui/gui-commentary/guicom-20-byhand.html
Fixed Position Layout • Store a rectangle for each component • Simple to implement • Widgets stay where you put them • Makes sense for a dialog that is not resizable
Tk Placer • button .b -text "I'm a Tk Button!" • text .t -height 10 -width 50 • place .b -x 50 -y 180 • place .t -x 0 -y 0
Swing AbsoluteLayout pane.setLayout(null); JButton b1 = new JButton("one"); JButton b2 = new JButton("two"); JButton b3 = new JButton("three"); pane.add(b1); pane.add(b2); pane.add(b3); Insets insets = pane.getInsets(); Dimension size = b1.getPreferredSize(); b1.setBounds(25 + insets.left, 5 + insets.top, size.width, size.height); size = b2.getPreferredSize(); b2.setBounds(55 + insets.left, 40 + insets.top, size.width, size.height); size = b3.getPreferredSize(); b3.setBounds(150 + insets.left, 15 + insets.top, size.width + 50, size.height + 20);
Stacked Layouts • Place sub-containers in horizontal or vertical stacks • No need to worry about specific locations • Widgets arranged inside containers horizontally or vertically • Doesn’t resize very well
Swing Flow Layout FlowLayoutexperimentLayout = new FlowLayout(); ... compsToExperiment.setLayout(experimentLayout); compsToExperiment.add(new JButton("Button 1")); compsToExperiment.add(new JButton("Button 2")); compsToExperiment.add(new JButton("Button 3")); compsToExperiment.add(new JButton("Long-Named Button 4")); compsToExperiment.add(new JButton("5")); http://download.oracle.com/javase/tutorial/uiswing/layout/flow.html
Edge-Anchored Layout • We want something as easy to use as fixed position but that will also handle resizing • Programmer doesn’t worry about specific positions TitleBar CloseButton Title Always want centered Fixed Width
A B Struts and Springs • Place struts and springs in the layout • Struts represent fixed lengths • Springs push as much as they can • Could use constraints: • CloseButton.RIGHT = TitleBar.RIGHT – 5 • Title.CENTER = TitleBar.CENTER
Struts and Springs • Relative constraints in Tk placer: • entry .e • button .b –text “Search” • place .e -anchor c -relx 0.5 -rely 0 -y 15 • place .b1 -anchor e -relx 1.0
Problems with constraints • Complicated • Programmer must keep track of geometry • With large numbers of widgets this is difficult • Often impossible to specify constraints adequately
New Window Open Page Save Save as Cut Copy Paste Label Variable Intrinsic Size • Size of widget determined by sizes of items within • e.g. Menus, most Java widgets • Intrinsic size does not handle resizing • Variable Intrinsic Size • Each widget reports its size needs (recursively if necessary) • Each widget also reports how much it can be reasonably squeezed or expanded
Automated Layout • A layout manager positions and sizes widgets • Programmer provides constraints • Many different algorithms to determine where widgets should go when added to a container • Swing: • CardLayout, BorderLayout, GridLayout, FlowLayout • GridBagLayout • Tk (called “geometry managers”): • Packer, Gridder • Android: • LinearLayout, RelativeLayout
Packing • Tk packer: • Placeswidgets by packing them around window edges • Keeps track of remaining space (the cavity) • Algorithm: • For each widget to be packed: • Allocate a rectangular parcel on the indicated side of the cavity (keeping the cavity rectangular) • Determine the size of the widget • Position the widget in its parcel • Subtract the parcel from the cavity
Packing example • We want to end up with this: entry .e button .b text .t
Packing example • We want to end up with this: • Try: • pack .e -side left -anchor n • pack .b -side right -anchor n • pack .t -side bottom entry .e button .b text .t
entry .e Packing example • pack .e -side left -anchor n
entry .e button .b Packing example • pack .b -side right -anchor n
entry .e button .b text .t Packing example • pack .t -side bottom
entry .f.e button .f.b text .t Packing example • How to make this work? • Do we need an internal frame? frame .f
Grid-based layout • Puts components on a “virtual grid” • Rows and columns • Components fit into one or more cells • Easy for programmers to understand • Works well with grid-based screen design • Layout controlled by constraints
Grid constraints • Where in the grid to start • Tk grid: -row, -column • Java GridBagLayout: gridx, gridy • How many cells to take up • Tk grid: -rowspan, -columnspan • Java GridBagLayout: gridwidth, gridheight • Where to place the component in the cell • Tk grid: -sticky • Java GridBagLayout: anchor, fill • What to do when the cell resizes • Tk grid: -sticky • Java GridBagLayout: weightx, weighty
In Practice • May combine layout managers • e.g., in Tk: • use Grid to place different components • use placer (with constraints) for toolbars • use packer for content (to allow it to expand and fill on resizing)
Swing: Providing Size and Alignment Hints • Sometimes you need to customize the size and alignment of widgets • E.g. setMinimumSize, setPreferredSize and setMaximumSize, setAlignmentX, setAlignmentY • Layout managers behave differently, some ignore these hints • E.g. Most will not pay attention to requested maxSize, but BoxLayout and SpringLayout do • Most ignore alignment hints, but BoxLayout honours them
Swing: Choosing a Layout Manager • http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html#choosing
Layout in Android • Simpler screen environment • Only one kind of resizing • LinearLayout • Horizontal or vertical direction • RelativeLayout • Relative constraints • Layouts can be nested • …but there are performance costs