标签：
FireMonkey has many layout controls to choose from. Come learn the differences and how to use them to create dynamic, multi-platform user interfaces.
FireMonkey Layouts with Delphi
VIDEO
FireMonkey Layouts with C++Builder
VIDEO
Understanding and using FireMonkey Layouts
FireMonkey and the FireUI makes it easy to build one form to rule all the platforms. Combining layout controls and making use of Anchors, Alignment, Padding and Margins it is easy to make one form that looks and works great on all platforms.
Position relative to one or more edge(s) of parent:
Default is Top, Left
Moves with parent resize
Each control has 0 to 4 anchors
Aligns control within parent, setting anchors, size and position.
Default is None.
Anchor and fill along edge:
Fill parent, but preserve aspect ratio:
Fill along one side of the parent (priority over other edge alignments):
MostBottom, MostTop, MostLeft, MostRight
Resize only on one axis (width or height)
Vertical, VertCenter, Horizontal, HorzCenter
Miscellaneous
Client – Fills client area, less other children
Center – No resize, just centered
Contents – Fills client area, ignoring other children
Scale – resizes and moves to maintain the relative position and size
Spacing – Margins and Padding
Arrange child controls like words in a paragraph
Controls arranged in order added to layout
Use “Move to Front” or “Send to Back” to reorder
Use TFlowLayoutBreak for forced line break
Arranges child controls in a grid of equal sizes
Controls flow through grid as parent resizes
Use ItemWidth and ItemHeight properties
Customize margins of individual controls
Creates a grid of specified rows and columns
Does not change the anchor or size of child
Each cell can contain 1 child control
You set the Height, Width, Align, and Anchors of children
Controls can span multiple cells
Stretches child controls as it is resized at runtime
Doesn’t respect aspect ratios of controls
Set the Align of the TScaledLayout to Fit to maintain aspect ratio
Some styles look better zoomed than others. The font grows – it is not a bitmap scale.
Has properties for OriginalWidth and OriginalHeight – Compare to Width and Height to determine scaling.
Allows children to take up more space than parent
Usually anchored to Client
Only anchor children to Top & Left (default)
Scroll to see additional children
Control to group child controls into tabs
Tabs are in a stack with one visible at a time
TabPosition := PlatformDefault to use platform default behaviorTabPosition := None to hide navigationUse TTabChangeAction to animate transitions
Reusable pieces of User Interface
Includes
The layout
All the event handlers
All the code in the unit
Create 1 or more Frames, then reposition based on current layout
Examples:
In TTabControl for phone
Side-by-side for Tablet
One super panel with multiple modes
Supported modes
PlatformDefault Drawer
NavigationPane
Panel
Popover
Custom
Point to MasterPane, DetailPane and definable MasterButton
PlatformDefault adapts to platform and orientationCustom supports user defined layout and behavior
Learning Resources
ScaledLayout Helper
The AbsoluteToLocal and LocalToAbsolute for TScaledLayout don’t handle the scaling. I’ve created a class helper that adds new methods for dealing with scaling.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
type
TScaledLayoutHelper = class helper for TScaledLayout
function LocalToAbsoluteScaled(const Point: TPointF): TPointF;
function AbsoluteToLocalScaled(const Point: TPointF): TPointF;
end;
function TScaledLayoutHelper.AbsoluteToLocalScaled( const Point: TPointF): TPointF;
begin
Result.X := Self.Position.X
+ Point.X
* Self.Width
/ Self.OriginalWidth;
Result.Y := Self.Position.Y
+ Point.Y
* Self.Height
/ Self.OriginalHeight;
end;
function TScaledLayoutHelper.LocalToAbsoluteScaled( const Point: TPointF): TPointF;
begin
Result.X := Point.X
/ Self.Width
/ Self.OriginalWidth
- Self.Position.X;
Result.Y := Point.Y
/ Self.Height
/ Self.OriginalHeight
- Self.Position.Y;
end;
If you look at the original implementations of AbsoluteToLocal and LocalToAbsolute you will see they have different execution paths and calculations based on private members, so there may be some circumstances where my new ones don’t work as expected. They did work in my tests, and I am open to feedback.
http://delphi.org/2015/12/skill-sprint-using-firemonkey-layouts/
Using FireMonkey Layouts
标签：
原文地址：http://www.cnblogs.com/findumars/p/5957374.html
