iWatch 开发 3: UI 组件说明

---

WKInterfaceLabel使用

WKInterfaceLabel 类似iOS 组件中的UILabel, 可通过使用 setText 的方式来设置具体的值，这里就不做多阐述。

WKInterfaceImage 使用

WKInterfaceImage 类似于 UIImageView, 使用时，可用setImage 来设置图片。它的接口如下：

@class UIImage;

@protocol WKImageAnimatable <NSObject>

// Play all images repeatedly using duration specified in interface description.
- (void)startAnimating;

// Play a subset of images for a certain number of times. 0 means repeat until stop.
- (void)startAnimatingWithImagesInRange:(NSRange)imageRange duration:(NSTimeInterval)duration repeatCount:(NSInteger)repeatCount;

- (void)stopAnimating;

@end

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceImage : WKInterfaceObject <WKImageAnimatable>

- (void)setImage:(nullable UIImage *)image;
- (void)setImageData:(nullable NSData *)imageData;
- (void)setImageNamed:(nullable NSString *)imageName;

- (void)setTintColor:(nullable UIColor *)tintColor;

@end

NS_ASSUME_NONNULL_END

WKInterfaceTable

相比于iOS 中的UITableViewController来说，iwatch中的WKInterfaceTable功能就简单多了，它没有delegate 也无需设置数据源。

在组件库中选中WKInterfaceTable 拖入Interface.storyboard中，并在代码中形成对应的关联，这里有一点要注意一下，那就是这个必须要设置 Row Controller 的identifier, 不然数据就无法加载出来。

在这里就使用静态的数据让这个Table 控件来加载出来， 代码如下：

NSMutableDictionary *phoneContact = [[NSMutableDictionary alloc] initWithObjectsAndKeys:@"13776054770", @"约翰",
                                         @"13776054770", @"约翰1",
                                         @"13776054771", @"约翰2",
                                         @"13776054772", @"约翰3",
                                         @"13776054773", @"约翰4", nil];
    
    [_contactTableV setNumberOfRows:phoneContact.count withRowType:@"MyTableRowControl"];
    NSArray *namesArray = phoneContact.allKeys;
    
    for(int i = 0; i < phoneContact.count; i++){
        NSString *name = [namesArray objectAtIndex:i];
        NSString *phone = [phoneContact objectForKey:name];
        
        MyTableRowControl *row = [_contactTableV rowControllerAtIndex:i];
        [row.contactName setText:name];
        [row.phoneNo setText:phone];
    }

table点击事件，通过重写实现InterfaceController 来处理：

- (void)table:(WKInterfaceTable *)table didSelectRowAtIndex:(NSInteger)rowIndex{
    NSLog(@"我点击了 %ld 行", (long)rowIndex);
}

WKInterfaceButton

iWatch 按钮控件，可用的API 如下：

NS_ASSUME_NONNULL_BEGIN

@class UIImage, UIColor;

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceButton : WKInterfaceObject

- (void)setTitle:(nullable NSString *)title;
- (void)setAttributedTitle:(nullable NSAttributedString *)attributedTitle;

- (void)setBackgroundColor:(nullable UIColor *)color;
- (void)setBackgroundImage:(nullable UIImage *)image;
- (void)setBackgroundImageData:(nullable NSData *)imageData;
- (void)setBackgroundImageNamed:(nullable NSString *)imageName;

- (void)setEnabled:(BOOL)enabled;

@end

NS_ASSUME_NONNULL_END

按钮点击事件，可以通过storyboard 拖拽的方式来实现，也可通过代码来实现。

WKInterfaceDate

日期控件，可用API 如下：

NS_ASSUME_NONNULL_BEGIN

@class UIColor;

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceDate : WKInterfaceObject

- (void)setTextColor:(nullable UIColor *)color;

- (void)setTimeZone:(nullable NSTimeZone *)timeZone;
- (void)setCalendar:(nullable NSCalendar *)calendar;

@end

NS_ASSUME_NONNULL_END

WKInterfaceTimer

时间控件， 可用 API 如下：

NS_ASSUME_NONNULL_BEGIN

@class UIColor;

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceTimer : WKInterfaceObject

- (void)setTextColor:(nullable UIColor *)color;

- (void)setDate:(NSDate *)date; // count up/down from current date to this date
- (void)start;
- (void)stop;

@end

NS_ASSUME_NONNULL_END

---

好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息，请扫描下方二维码关注我的微信公众号：