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

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

Display metrics example

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

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

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.