WatchKit Programming Guide: Watch apps--text, tags, and pictures

This section is translated by Cocoachina translation Group member Dada (GitHub homepage) from WatchKit programming Guide:watch Apps--text and Labels, Watch apps--images please errata.

Text and Category labels

To display text in the Watch app, use the Tag object. The category label supports formatted text that can be modified by the program at run time.

To add a label to the interface controller, you can drag it to the corresponding storyboard scene (storyboard), where you specify the initial text string and format for the tag. WatchKit supports both standard fonts as well as custom fonts. Figure 8-1 shows the standard font style you can use.

Figure 8-1 Standard font style for labels

For more information on configuring label objects, refer to Wkinterfacelabel Class Reference.

Using custom Fonts to customize fonts

In addition to the standard font style, you can customize the font of formatted strings. Customize the font as follows:

·  Import custom font files in the Watch app and in the WatchKit expansion pack.

·  Add the __uiappfonts__ key to the Info.plist file in your Watch app and use this to specify the fonts that are added to the package. For more information on this key, please refer to Information property List key Reference

Note: You must import fonts in the WatchKit extension to create a string of the specified font at run time. When sent to Apple Watch, the font information contains the attribute string, and the font copy in the Watch app package will render the font.

Use a custom font to format text, use font information to create an attributed string, and use that string as the text of your label, as shown in Listing 8-1. The name and size of the font are encoded by the property string, which allows you to update the label of the user's Apple Watch.

A string that uses a custom font as a label

12345678

// Configure an attributed string with custom font information.     UIFont* menloFont = [UIFont fontWithName:@"Menlo" size:12.0];     NSAttributedString *attrString = [[NSAttributedString alloc]       initWithString:@"My Formatted Text"       attributes:@{NSFontAttributeName: menloFont}];      // Set the text on the label object.     [self.myCustomFontLabel setAttributedText:attrString];

Customizing the System font Configuration

Configure the system font and use the Uifontdescriptor object to specify a new system-based font. The example in listing 8-2 shows how to customize a standard system font that uses only lowercase characters. After converting the system font to a font descriptor, add the __klowercasetype__ and __klowercasesmallcapsselector__ properties (in the core Text defined in the framework) and then the result of the font descriptor to create a new Font object.

Specifies that the system font is lowercase

12345678910

CGFloat fontSize = 18.0;     UIFont *afont = [UIFont systemFontOfSize:fontSize];     UIFontDescriptor *fontDescriptor =          [[afont fontDescriptor] fontDescriptorByAddingAttributes:@{          UIFontDescriptorFeatureSettingsAttribute : @[             @{    UIFontFeatureTypeIdentifierKey : @(kLowerCaseType),          UIFontFeatureSelectorIdentifierKey :      @(kLowerCaseSmallCapsSelector) },],     }];      UIFont *smallCapFont = [UIFont fontWithDescriptor:fontDescriptor size:fontSize];

Internationalization of your text code

Watch apps can use the internationalization technology approach that iOS apps has figured out.

· Use storyboard and Xib files that are based on Xcode internationalization support. Internationalization-based allows you to support all localization with just one storyboad file. Localized strings exist in a specific regional language string, respectively.

· Use the macro definition of the Nslocalizedstring family to have the program automatically retrieve localized strings.

· Use the Nsnumberformatter class to format numeric values using the user locale and local settings.

· Use the NSDateFormatter class to format time by using the user's region and local settings.

When it's time to internationalize your app, your main consideration is how to tweak the interface so that the list of tags (and other text controls) is enough to hold. For example, the horizontal arrangement of three buttons, a better vertical arrangement can give each label text to provide a longer space to accommodate.

For more information on internationalization, please refer to internationalization and Localization guide.

----------------------------------------------------------------------------------------------------------

Image

WatchKit (Apple Watch Development Kit) provides the following ways to add images to your content:

· Wkinterfaceimage is used to show a single picture or a set of images as a single image.

· The Wkinterfacegroup, Wkinterfacebutton, and Wkinterfacecontroller classes allow you to specify a picture as a background for some content.

Specify your image resources

Here are some guidelines to keep in mind when you create an image resource:

·  Try to use only PNG format diagrams.

·  Ensure that the image you create is the size that fits your interface. For images that you do not control, use SetWidth: and SetHeight: Methods to do adaptive.

Use named pictures to improve execution efficiency

Here are a few ways to replace an existing picture of an interface object:

·  Use the setimagenamed: or setbackgroundimagenamed: method to assign an image that already exists in the Watch app resource bundle or is in the device cache.

·  Use WatchKit's setimage:, Setimagedata:, SetBackgroundImage:, or Setbackgroundimagedata: method to extend your watch app by wirelessly transmitting image data.

The advantage of naming the images is that they do not need to be transferred wirelessly from the user's iphone to the watch. When you specify a name for the image, WatchKit only sends a string of names to your watch app, which reduces time and power consumption. This string is used to retrieve the image in the Watch app package, or from the image cache.

Any time you create an __uiimage__ object in your extension, you must first send an image object that exists on the user's iphone to the Apple Watch before it can be used. Even use __uiimage__ 's imagenamed: method to load your WatchKit extension package resources, not from the Watch app.

Caching images on the device

If you frequently use images created in your watchkit extension, you can cache them on your device and then refer to them by name. You must cache the picture before calling them, using __WKINTERFACEDEVICE__ 's addcachedimage:name: or Addcachedimagewithdata:name: Method.

There are two points to note when using cached images:

· For Wkinterfaceimage objects, call the __setimagenamed: __ method to specify the name of the cached image.

· For Wkinterfacegroup and Wkinterfacebutton objects, call the __setbackgroundimagenamed:__ method, specifying the name in the cache

The cache for Apple watch images is limited in size, and each app will probably get 20MB of cache space. The cache is persistent and can be used between the watch apps that are launched. When you reach the maximum cache, Wachkit discards older images and gives the space to the newly allocated image.

WatchKit Programming Guide: Watch apps--text, tags, and pictures