Working with ImagesAce provides a cross-platform Image class that be used to place an image (PNG, JPG, and so on) inside your user interface. This is like using ImageView on Android and UIImageView on iOS. (In fact, that is exactly what happens behind the scenes.) You can set Image’s Source to an image URL, such as www/images/icon.png. Image has a few extra smarts, however, that are convenient for tweaking per-platform behavior without having to write per-platform code. Consolidating Multiple Images Into One URLThere are three features you can take advantage of when specifying an image source:
Customizing Per-PlatformIf your URL contains the string {platform}, it will be replaced with the platform name at runtime. So icon-{platform}.png becomes icon-ios.png on iOS and icon-android.png on Android. This enables you to supply images that better match the styling of each platform. Customizing For “On” and “Off” StatesIn addition, sometimes you might want to supply multiple images representing different states. This currently applies to AppBarButtons inside a TabBar. iOS supports a separate selectedImage in addition to the main image. To make this seamless, Ace will look for two separate images, one with an ios-on platform identifier and another with an ios-off identifier. Customizing For Device Resolution or Screen DensityOn iOS, you can supply multiple sizes of an image and add suffixes to your image files like @2x, @3x, and @4x to tell the operating system which image to use. This happens automatically, so you leave the suffix out of your Image source. ExampleTherefore, you can specify a single icon:
<AppBarButton Icon="www/img/tabs/calendar-{platform}.png"
Label="Schedule"
ace:On.Click="onTabClick(this, 0)" />
And supply many separate images:
You can see this in action in the source code for the PhoneGapDay app.
|
