Working with Native and Custom FireMonkey Styles

From Appmethod Topics
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles

The various Supported Target Platforms (Windows, Mac OS X, iOS, and Android) can support different resolutions at run time:

  • The Mac OS X and iOS platforms support the Retina display (2880×1800 or 5.2 megapixels), which doubles the standard resolution. So Mac and iOS support two different resolutions: 1x, 2x.
  • The Android platform supports four different resolutions: 1x, 1.5x, 2x, 3x.
  • Windows supports only standard resolution.

FireMonkey applications automatically load and display the appropriate native style at run time (depending on the target device), without you needing to add a stylebook or any code. In addition, FireMonkey applications for Mac OS X, iOS, or Android can have custom styles that display well on high-resolution displays as well as standard-resolution displays. High-resolution styles (such as Retina) are only shown at run time.

The FireMonkey styles now support all the required resolutions, and the appropriate style is loaded at run time. For example, an Android app can display in any of four resolutions (1x, 1.5x, 2x, 3x), so all of these resolutions are supported in the AndroidDark.fsf style for Android.

Loading Styles at Run Time

To apply a specific style to a form, programmatically call TStyleManager.SetStyleFromFile. For example:

Object Pascal:

procedure TForm1.FormCreate(Sender: TObject);
begin
    // ...
    TStyleManager.SetStyleFromFile('Jet.style');

C++:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
   //...
   TStyleManager::SetStyleFromFile(L"Jet.style");

High-Resolution Styles Are Automatically Used in FireMonkey 3D Applications

All FireMonkey 3D components automatically display in hi-res mode when run on iOS Retina devices or on high-resolution Android devices. There are no additional properties required.

FireMonkey 3D components include TForm3D, TViewport3D, and TLayer3D.

Detecting iOS 6 and iOS 7

To detect the iOS version being used on the target iOS device (and to assign an appropriate available style at run time), use the TOSVersion.Check method as follows.

Example:

Object Pascal:

{$IFDEF IOS}
    if TOSVersion.Check(7, 0) then
        Style := TStyleManager.LoadFromResource(HInstance, 'iOS7Jet', RT_RCDATA)
    else
        Style := TStyleManager.LoadFromResource(HInstance, 'iOSJet', RT_RCDATA);
{$ENDIF}

C++:

void __fastcall TForm1::FormCreate(TObject *Sender) {
#if defined(__iOS__)
	if (TOSVersion::Check(7, 0)) {
		TStyleManager::LoadFromResource((unsigned int)HInstance, L"iOS7Jet",
			(wchar_t*) RT_RCDATA);
	}
	else {
		TStyleManager::LoadFromResource((unsigned int)HInstance, L"iOSJet",
			(wchar_t*) RT_RCDATA);
	}
#endif
}

In the FireMonkey Mobile Form Designer, you can select a specific iOS design device and a specific iOS version (6 or 7):

Design Device Selector for iOS

Loading Your Own Custom Styles

The instructions below describe working with custom styles, such as the Jet style, which is available in the FireMonkey premium style pack.

Adding a Custom Style to Your FireMonkey Application

Appmethod includes several custom mobile styles, including iOSBlack.fsf, iOSTransparent.fsf and AndroidDark.fsf, which are installed on your system, next to the Samples directory, in the following platform-specific directories:

 C:\Users\Public\Documents\Embarcadero\Studio\14.0\Styles\iOS
 C:\Users\Public\Documents\Embarcadero\Studio\14.0\Styles\Android

The custom mobile styles for iOS and Android include support for standard- and high-resolution devices within one style file. This includes built-in support support for:

  • iOS standard and iOS Retina devices (1x, 2x)
  • Multiple resolutions for Android devices (1x, 1.5x, 2x, 3x)

On the desktop, this is also true for the custom Jet and Diamond Mac styles, which are available in the FireMonkey premium style pack; these styles include support for both Retina and non-Retina MacBook devices within one style file.

To add a custom style to a FireMonkey mobile app:

  1. Create a FireMonkey Mobile Application.
  2. Place a TStyleBook component on the form.
  3. In the Target Platforms node of the Project Manager, set the target for your app.
    This step is critical for setting up a platform-specific stylebook.
    For example, double-click iOS Device if you are setting a style that you want to be used on an iOS device:
    ForStyle.png
  4. After you set the target platform, double-click StyleBook1 in the FireMonkey Mobile Form Designer. This opens the FireMonkey Style Designer.
  5. Click Load in the FireMonkey Style Designer:
    StyleDesToolbar.png
    1. Navigate to the location of your custom style.
      Tip: The installed location of the FireMonkey custom styles is given above.
    2. Select the .fsf or .style file.
    3. Click Apply and Close in the FireMonkey Style Designer.
  6. When you want to build your app for a given platform, you need to assign the stylebook, as follows:
    1. Select the FireMonkey form in the FireMonkey Mobile Form Designer.
    2. In the Object Inspector, select the StyleBook property of the form.
    3. Select StyleBook1 in the drop-down menu in the Value field:
      StyleBookSelecting.png  StyleBook2.png

Loading Custom Styles to Support Multiple Platforms in One Application

Only one style can be in use at a time, but your app can have more than one style in project resources.
This example demonstrates one way to enable platform-specific styles in a shared code base.

Perform the following steps:

  1. Add your custom styles to the project resources:
    Select Project > Resources and Images.
    • The Resources dialog box is displayed:
    Resources.png
    • In this dialog box, you can add *.style or *.fsf files as the RC_DATA type, and you can set the identifier for each resource item.
    • You need to add a style for each platform that you want to support (Windows, Mac OS X, Android, and iOS).
  2. Load your custom Windows style in Resources. Set the identifier to Win<StyleName>.
    1. Click Add, and navigate to the location of your custom styles.
    2. Select the style to use for Windows, and click Open.
  3. Load your custom Mac style and set the identifer to Mac<StyleName>.
  4. Load your custom Android style and set the identifer to Android<StyleName>.
  5. Load your custom iOS style and set the identifier to iOS<StyleName>.
  6. At run time, execute the following code (shown in the OnCreate event handler as an example):

Object Pascal:

procedure TForm1.FormCreate(Sender: TObject);
var
    Style: TFMXObject;
begin
    {$IFDEF MSWINDOWS}
        Style := TStyleManager.LoadFromResource(HInstance, 'WinJet', RT_RCDATA);
    {$ENDIF}
    {$IFDEF MACOS}
        Style := TStyleManager.LoadFromResource(HInstance, 'MacJet', RT_RCDATA);
    {$ENDIF}
    {$IFDEF Android}
        Style := TStyleManager.LoadFromResource(HInstance, 'AndroidJet', RT_RCDATA);
    {$ENDIF}
    {$IFDEF iOS}
        Style := TStyleManager.LoadFromResource(HInstance, 'iOSJet', RT_RCDATA);  
    {$ENDIF}
    if Style<> nil then
        TStyleManager.SetStyle(Style);
end;

C++:

void __fastcall TForm1::FormCreate(TObject *Sender) {
	Fmx::Types::TFmxObject* style;
#if defined (__MSWINDOWS__)
	style = TStyleManager::LoadFromResource((unsigned int)HInstance, L"WinJet",
		RT_RCDATA);
#endif

#if defined (__MACOS__)
	style = TStyleManager::LoadFromResource((unsigned int)HInstance, L"MacJet",
		RT_RCDATA);
#endif

#if defined (__ANDROID__)
	style = TStyleManager::LoadFromResource((unsigned int)HInstance,
		L"AndroidJet", RT_RCDATA);
#endif

#if defined (__iOS__)
	style = TStyleManager::LoadFromResource((unsigned int)HInstance, L"iOSJet",
		RT_RCDATA);
#endif
	if (style != NULL) {
		TStyleManager::SetStyle(style);
	}
}
Note: You must add FMX.Styles to your uses clause (for Object Pascal) and #include <FMX.Styles.hpp> in your header unit (for C++).

Loading Custom Styles to Support Multiple Platforms in One Application with TStyleBook Components

This example demonstrates how to use a stylebook to handle a custom style for each supported platform.

  1. Add four TStyleBook components on the FireMonkey form.
  2. Load your custom Windows style to TStyleBook1 and rename it to WinStyleBook.
  3. Load your custom MacOS style to TStyleBook2 and rename it to MacStyleBook.
  4. Load your custom iOS style to TStyleBook3 and rename it to iOSStyleBook.
  5. Load your custom Android style to TStyleBook4 and rename it to AndroidStyleBook.
    For example:
    MultipleStylebooks.png
  6. Make sure that TForm1.StyleBook = nil:
    ObjInspStylebook.png
  7. At run time, execute the following code (shown in the OnCreate event handler as an example):
 procedure TForm1.FormCreate(Sender: TObject); begin
  {$IFDEF MSWINDOWS}
  StyleBook := WinStyleBook;
  {$ENDIF}
  {$IFDEF MACOS}
  StyleBook := MacStyleBook;
  {$ENDIF}
  {$IFDEF IOS}
  StyleBook := iOSStyleBook;
  {$ENDIF}
  {$IFDEF ANDROID}
  StyleBook := AndroidStyleBook;
  {$ENDIF}
 end;

See Also