Modern Programming Language Java Layout Managers By: Muhammad Haleem

Contents What is Layout Manager? FlowLayout Manager? BorderLayout Manager? GridLayout Manager?

Introduction to Layout Managers Layout managers arrange GUI components in a container for presentation purposes. You can use the layout managers for basic layout capabilities instead of determining every GUI component’s exact position and size. This functionality enables you to concentrate on the basic look-and-feel and lets the layout managers process most of the layout details. Using layout managers to position elements can be simpler and faster than creating a GUI with absolute positioning.

Introduction to Layout Managers A layout manager is an object that governs the positions and sizes of components in a container Swing provides a variety of layouts: FlowLayout, BorderLayout, GridLayout and so on. Use container’s method the setLayout to change its layout container.setLayout(new BorderLayout()) Default layout for JFrame is BorderLayout and FlowLayout for JPanel

What is FlowLayout? Components appear horizontally, from left to right, in the order that they were added. When there is no more room in a row, the next components will be dropped to the next row FlowLayout’s constructors FlowLayout() FlowLayout(int align): the align can be FlowLayout.CENTER, FlowLayout.LEFT, or FlowLayout.RIGHT FlowLayout(int align, int hgap, int vgap) where hgap and vgap are a gap of pixels among components, horizontally and vertically

Designing the View Title: Flow Layout Size: 400x70 Layout: Flow Layout GUI Components: Button 1 Button 2 Button 3

What is BorderLayout? BorderLayout manages five regions where components can be placed

What is BorderLayout? (cont.) BorderLayout’s constructors: BorderLayout BorderLayout(int hgap, int vgap) Components are added to a border layout container: container.add(comp, region) Where the region is one of the following values: BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST BorderLayout.WEST BorderLayout.CENTER

Border Window Problem Develop a program that has interface as below (the frame’s size is 400x300):

Designing the View Title: Border Layout Size: 400x300 Layout: Border Layout GUI Components: North button West button South button East button Center button

Border Panel Window Problem Enhance the border window problem in order to reach the following interface:

Designing the View Title: Border Layout Layout: Border Layout GUI Components: North button panel North button West button panel West button South button panel South button East button panel East button Center button panel Center button

What is GridLayout? GridLayout creates a grid with rows and columns, much like a spreadsheet. A container that is managed by a GridLayout object is divided into equally sized cells Each cell can hold only one component A component that is placed in a cell is automatically resized to fill up any extra space columns rows

What is GridLayout? (cont.) GridLayout’s constructors: GridLayout() GridLayout(int rows, int cols) GridLayout(int rows, int cols, int hgap, int vgap) If rows or cols is declared as zero, it means no limit for rows or columns, but not for both

Grid Window Example Develop a program that has six buttons laid in a grid of 2x3 (The frame’s size is 400x200)

Designing the View Title: Grid Layout Size: 400x200 Layout: Grid Layout (2x3) GUI Components: Six Buttons

Grid Panel Window Example Develop a program that has six labeled buttons laid in a grid as below (the frame’s size is 400x200):

Designing the View Title: Grid Layout Size: 400x200 Layout: Grid Layout (2x3) GUI Components: Button Panel 1 Label: This is cell 1. Button 1 . . . Button Panel 6 Label: This is cell 6. Button 6

Summary Not so difficult but takes a little practice Do not use absolute positioning – because it does not resize well. It should be noted that for absolute positioning of components we have to use the setLayout() with argument null as: setLayout(null) then we will position the component as: component.setBounds(20, 20, 200,20);//x, y, width, hight

Laying out components Use layout managers – basically tells form how to align components when they’re added. Each Container has a layout manager associated with it. A JPanel is a Container – to have different layout managers associated with different parts of a form, tile with JPanels and set the desired layout manager for each JPanel, then add components directly to panels.

Layout Managers Java comes with LayoutManagers. Most common and easiest to use are FlowLayout BorderLayout GridLayout Using just these three it is possible to attain fairly precise layout for most simple applications.

Setting layout managers Very easy to associate a layout manager with a component. Simply call the setLayout method on the Container: JPanel p1 = new JPanel(); p1.setLayout(new FlowLayout(FlowLayout.LEFT)); JPanel p2 = new JPanel(); p2.setLayout(new BorderLayout()); JPanel p3 = new JPanel(); p3.setLayout(new GridLayout(r, c, hgap, vgage));//int As Components are added to the container, the layout manager determines their size and positioning.