zoukankan      html  css  js  c++  java
  • Using FireMonkey Layouts

    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

    FireMonkey Layouts with C++Builder

    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.

    Anchors

    • Position relative to one or more edge(s) of parent:Anchor
      • Top
      • Bottom
      • Left
      • Right
    • Default is Top, Left
    • Moves with parent resize
    • Each control has 0 to 4 anchors

    Alignment

    • Aligns control within parent, setting anchors, size and position.
    • Default is None.
    • Anchor and fill along edge:
      • Top, Bottom, Left, Right
    • Fill parent, but preserve aspect ratio:
      • Fit, FitLeft, FitRight
    • 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

    • MarginsMarginsAndPadding
      • Spacing for siblings (and parent edges)
    • Padding
      • Spacing for children

    TFlowLayout

    • 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

    FlowLayout1 FlowLayout2

    TGridLayout

    • 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

    GridLayout2 GridLayout1

    TGridPanelLayout

    • 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

    GridPanelLayout2 GridPanelLayout1

    TScaledLayout

    • 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 Heightto determine scaling.

    ScaledLayout-Stretch

    TScrollBox

    TTabControl

    • Control to group child controls into tabs
    • Tabs are in a stack with one visible at a time
    • TabPosition := PlatformDefault to use platform default behavior
    • TabPosition := None to hide navigation
    • Use TTabChangeAction to animate transitions

    Frames

    • 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

    TMultiView

    • One super panel with multiple modesMultiView
    • Supported modes
      • PlatformDefault
      • Drawer
      • NavigationPane
      • Panel
      • Popover
      • Custom
    • Point to MasterPane, DetailPane and definable MasterButton
    • PlatformDefault adapts to platform and orientation
    • Custom 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
    { TScaledLayoutHelper - interface }
     
    type
      TScaledLayoutHelper = class helper for TScaledLayout
        function LocalToAbsoluteScaled(const Point: TPointF): TPointF;
        function AbsoluteToLocalScaled(const Point: TPointF): TPointF;
      end;
     
    { TScaledLayoutHelper - implementation }
     
    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 LocalToAbsoluteyou 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/

  • 相关阅读:
    shell脚本编写实例
    正则表达式文本过滤
    bootstrap实现嵌套列
    当鼠标悬停在链接上,或者点击过的链接,颜色会被设置为 #2a6496。同时,会呈现一条下划线。点击过的链接,会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽,且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素
    bootstrap页面效果图
    bootstrap实现菜单定位
    bootstrap三列布局
    bootstrap图片切换效果
    bootstrap导航菜单
    首字下沉
  • 原文地址:https://www.cnblogs.com/findumars/p/5957374.html
Copyright © 2011-2022 走看看