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
}

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 Mobile Application

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

 C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles\iOS
 C:\Users\Public\Documents\Embarcadero\Studio\15.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 multi-device application

  1. Create a Multi-Device Application.
  2. With the Master view selected, add a TStyleBook component to your form.
  3. On the Master view, select a style from the Form Designer Style drop-down menu (Windows, OSX, iOS, or Android). This example uses Android style for the Master view:
    SelectAStyle.png
  4. Load a FireMonkey style file for the appropriate platform:
    1. Double-click the StyleBook. The FireMonkey Style Designer opens.
    2. Click the Load button:
      FMXStDesigner.png
    3. Navigate to the FireMonkey style file you want.
      For example, if Android is the Form Designer style set for the current view, you would load and assign an Android style such as AndroidLight.fsf.
      Note: The FireMonkey styles for the various Form Designer styles are located in parallel directories:
      Windows: C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles
      Android: C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles\Android
      iOS: C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles\iOS
  5. Switch to each of your created views, select the TStyleBook component on that view, and load the custom style related to that platform. When working with custom FireMonkey styles, each view, including the Master view, must have a style assigned in the Form Designer.
    That is, load a Windows style for the "Windows Desktop" view, an Android style for the "Android..." view, a Mac style for the "OS X Desktop" view, an iOS style for the "iPad" and the "iPhone" views.
    Note: If you have different views for iPad and iPhone, you need to load the same iOS style for each view.

Additional Notes

  • If your application consists of multiple forms, you can set TStyleBook.UseStyleManager = True in each view in order to use the same custom styles for all other forms at run time.
  • If TStyleBook.UseStyleManager = True is set, then:
    • Custom styles fully override system styles in all other forms (Form2, Form3, and so forth) that are part of your application for that particular platform.
    • New forms (Form2, Form3, and so forth) will use the default platform style, and for customization, you must add TStyleBook to Form2's Master view and load each custom style again for all created views of the additional forms that are part of your application.

See Also