UI layout container and Layout strategy overview

This article describes the container and layout strategy for the UI interface. Mainly from the theoretical point of view of the principle and implementation of ideas, and contains a number of container sample map.

This article is written in February 2016, is published in the blog and share with you. The original text is the work need to do research, blog based on the original draft, and do a certain simplification.

The basic unit of the UI interface is the UI element, which is the component that holds multiple child elements. Layout is actually an algorithmic strategy for calculating the placement of child elements in a container.

The layout manager is used to manage container layout policies in two ways: each layout policy implements a specific container container that can specify different layout policies (for example, swing)

A common design is that each layout corresponds to a container, the advantage of which is low entry threshold, easy to use, but easy to create just for the layout of the container stack.
The container can be combined to specify layout strategy is a flexible way, but it is more cumbersome to use.

It is a good solution for a mature product to provide a container that can specify the layout strategy at the same time, and provide a common layout container.

For complex interfaces, too many nesting levels of containers can result in redundant layout calls, reducing speed as nesting levels increase.

The level of flat container can improve the efficiency of interface layout. How to reduce the nesting level of the container combination. You might consider encapsulating some of the common nesting scenarios as a fixed combination layout container. Layout Policy Layout Strategy

Layout policies can be abstracted into 5 basic types: coordinate Based based on coordinate Constraint Based based on constraint Linear linear layered layered grid grid coordinate–based based on coordinate layout strategy

This is the most basic layout strategy, and child elements can use bounds (location and size) to determine the display boundary (boundary) in the container. constraint-based layout strategy based on constraints

This is a relatively positioned layout policy that sets constraints on the child elements, and when the container changes, the bounds of the children follow the constraints that change.

Relative positioning of relative positioning
Sets the left and top of the element, right, and the position of the bottom relative to the parent container. such as the Java springlayout.

Anchor Points Anchorage Point
An interface element has 9 anchor points: Top, bottom, left, right, center, upper left, upper right, lower right, lower left. When the bound boundary of an element is set, the element can be positioned in the container. At this point, you can specify one or more anchor points, and when the container boundary changes, the anchor points of the element remain in relative position, and a single anchor point allows the element to be translated by the container, and multiple anchor points allow the element to move and zoom in the container as it changes.

Dock Dock
Elements can be docked at the specified location of the container, with a total of five positions up or down. Dock and anchor are basic layout strategies for winfrom. The dock layout is a simplification of the anchor. In Java is also known as BorderLayout, using four cardinal to describe five directions.

Guide Lines reference line.
For example, Baseline, Constraint Row, Constraint Column. Sets the position of the element's boundary relative to the line linear linear layout strategy

All elements are stretched in one direction. You can derive horizontal, vertical, and flow-style layouts that can be folded.

This layout strategy is simple and effective, and is the most commonly used layout strategy in the interface layout. The most commonly used interface layouts can be achieved by combining.

The following containers belong to a linear layout strategy: Hbox VBox FlowLayout Spitcontainer

There are some extended properties in different implementations, such as the Flex attribute can specify an element to be adaptive, as well as attributes that specify alignment.

Flow layout is also very commonly used, in a certain direction if the element arrived at the boundary will automatically wrap, so that can be displayed more than one line. layered Layered Layout strategy

The container is cut into layers, and each layer can hold one or more elements. There are two kinds of branches:

Stacking stack
One layer at a time, you can switch between layers, each layer of the same element size, generally the largest element size. For example Cardbox card box container.

Overlapping overlays cover
All layers are displayed at the same time, and the elements of different layers are overwritten with each other. Note This overlay layout, where only the top-level elements can interact, not the top-level elements that are visible without being obscured by the top-level elements, but do not respond to events.

The following containers belong to such layout policy types: Cardbox tabnavigator accordion

The behavior of the card box is like a tabnavigator without a label page, of course, there are some differences in the way of realization.

And the accordion is more special, the old Windows Control Panel has a similar example, and later is enduring, there are many changes. Grid grids Layout strategy

Divides the container into cells by row, column, and all elements within the cell, aligned relative to the cell.

Grid table
The table is split by row and column, each size is different, the height is determined by the row, and the width is determined by the column. An element can occupy one or more cell cells, defined by the rowspan and colspan of the cell.

Tile Tile
All squares are always of the same size, and elements can occupy one or more squares. If the element size is less than the cell, the cell is aligned by definition (typically the upper-left corner). The cell size of the tile policy is generally fixed or adaptive, and the cell size is calculated according to all the elements of the visible view, and all cells remain the same size. containers Container Generic Container list Box (Hbox, VBox) linear layout, horizontal, vertical dockpanel docking layout, up and down the SplitContainer split containers cardbox card box layout, one-page display accordion accordion layout, single expansion grid table layout Too Lbox, ToolBar tool box, tool bar absolute absolute positioning relative relative positioning layout tilelayout lattice layout scroller scroll bar SideBar Sidebar, can be folded disclosure/expander (C Ollapsible panel) Extender, click Expand, shrink the extended area Ribbon tape (see Office) Menubutton menu button, click to expand Floating Panel Hbox & vbox-linear Linear layout

The linear layout is the most commonly used layout container, the horizontal layout uses the Hbox, the longitudinal layout uses the VBox. The principle is not complex, there are only a few simple rules. A box can be arranged in one of two directions, horizontal or vertical. The horizontal box arranges its elements horizontally, and the vertical box arranges its elements vertically.

code example

 
The following example shows how to place three buttons vertically.


<vbox>
  <button id= "yes" label= "yes"/>
  <button id= "No" label= "no"/> <button id=
  " Maybe "label=" maybe "/>
</vbox>
 
CSS New Flexbox-streaming layout 
The Flexbox elastic container in the new CSS standard is a complete realization of flow layout.


Split Container Splitcontainer/dividedbox

A separate container, splitcontainer, is generally used as a predefined container with a separator bar. Contains two child elements, and you can specify the direction of the separator bar.

The Boxsplitter separator bar can be placed in Hbox or VBox and is naturally displayed as a separator bar. Note, however, that because a linear layout can place multiple serial elements, and if there are multiple elements after a separator, you must specify which element's size will change automatically when the splitter is resized. Cascade container-card box Cardbox

Cardbox card, Viewstack Frame, Panelmanager Panel,

A typical case of a cascade container is the Wizard Wizard, where you click the next step, the content area page to toggle, and only one page at a time is displayed. Using Cardbox name comparison image, like a business card box, which placed a card, placed on the top of the card can be seen.

Cardbox use SelectedItem or selectedindex to access or toggle the card currently displayed.


Cardbox It is best to link to a tab or a group of buttons (for example, RadioButton Group) and switch directly to the corresponding card page when clicked.

Table Layout grids/table

Based on row and column table layouts, you can place elements in a grid. Elements can also span rows and columns.
The element determines the location of the occupied boundary based on the definition of a cross row, a cross column, and within the boundary, based on the alignment and white-left configuration.

TABLE.COLUMNS.ADD (column column); 
Table.Rows.Add (row row);
 
Table cells, and a cross column placement button sketch.

tilelayout Tile Layout

The following figure is the Tilelayout schematic diagram of Flex4.


The figure below is a more complex grid layout that changes based on the tiled layout, similar to the WIN8 (Tiles) layout that appears on the Start menu.

Tool Box Toolbox, tool bar Toolbar, tool button Toolbutton

A tool box can hold more than one tool bar, each bar to hold multiple tool buttons

anchors Anchor Point-relative layout relativelayout

Anchor point layout, such as the Red Square in the figure, after setting the anchor point, when the form size changes, the anchor point will follow the stretch.


docking Panel DockPanel & border layout Border Layout

Five area names under two naming methods: Dockpanel:top, right, Bottom, left, Fill Borderlayout:north, East, South, West, Center

Among them, DockPanel and WinForm perfectly compatible. can be used directly.
Algorithm: Use Add order to determine the masking direction (each time you add, cut a piece in the remaining area)


Accordion Accordion

belong to a layered layout strategy, each layer has a horizontal page sign display, mutual exclusion, only to show the activation of one layer at a time.

Tape Ribbon

This is a modern new tab composite style that is suitable for document programs.

Side Sidebar SideBar

Side bar Display page sign, tall.

Extender Disclosure (expander)

You can expand the collapsed area, display the caption text after you collapse, and display an expansion panel when you expand.

menu button Menubutton

Menubutton common with the mobile interface, a slice of bread button to represent the menu, when clicked Slide out of the menu.

Holy Grail Holy Grail layout-combined layout

The Grail layout is a modular layout and is a classic example of flattening. The Grail layout was first proposed in the web design.


Changes in the Grail layout on different devices (screen and cell phone):