Fire UI and the Multi-Device Designer

During CodeRage 9 I had a session on Fire UI and the Multi-Device Designer. You can also check out my previous post on creating a custom FireUI view for the Moto 360.

Fire UI is made up of three parts:

1. Behavior Services – Runtime & design time platform design information
2. Multi-Device Designer – Unified project – Tweak UI for platforms
3. TMultiView Component – Adaptive layout

Behavior Services at Design Time

• Examples:
  • TTabControl.TabPosition
    • Bottom on iOS, top otherwise
  • Font.Size & Font.Family
  • Many controls have Size.PlatformDefault = True
  • TMultiView mode

Behavior Services at Runtime

• TBehaviorServices class in FMX.BehaviorManager.pas
• IDeviceBehavior defines
  • GetDeviceClass: TDeviceInfo.TDeviceClass;
  • GetOSPlatform: TOSPlatform; // Windows, OSX, iOS, Android
  • GetDisplayMetrics: TDeviceDisplayMetrics;
• IFontBehavior defines
  • GetDefaultFontFamily & GetDefaultFontSize

OS Specific example

 var
  DeviceBehavior: IDeviceBehavior;
begin
  if TBehaviorServices.Current.SupportsBehaviorService(?
    IDeviceBehavior, DeviceBehavior, Self) and
    (DeviceBehavior.GetOSPlatform = TOSPlatform.iOS) then
    // behavior specific to iOS
end;

Display metrics example

var
  DisplayMetrics: TDeviceDisplayMetrics;
begin                        // self is a form in this case
  DisplayMetrics := DeviceBehavior.GetDisplayMetrics(Self);
  if DisplayMetrics.AspectRatio > x then
    // AspectRatio specific behavior
end;

type
TDeviceDisplayMetrics = record
    PhysicalScreenSize: TSize;
    LogicalScreenSize: TSize;
    AspectRatio: Single;
    PixelsPerInch: Integer;
    ScreenScale: Single;
    FontScale: Single;
end;

More Information

• Using PlatformDefault for Tab Components
• Using Master views in the Form Designer
• Adding a Custom View
• MultiView Tutorial
• Moto 360 & Galaxy Gear Live Views

Check back later and I’ll have the video replay available too.

Download the XE7 Trial today and check out the special offers.