三、iWatch常用控件基本用法之交互控件

iWatch 是用户交互是轻量级的，所以如下将简单的介绍其交互的控件，老规矩从其属性和方法着手，再分析其用法。

1. WKInterfaceButton

1.1 WKInterfaceButton的方法

@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

1.2 WKInterfaceButton用法

@property (unsafe_unretained, nonatomic) IBOutlet WKInterfaceButton *button;
- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];
    
//设置button背景颜色
    [self.button setBackgroundColor:[UIColor redColor]];
//    [self.button setTitle:@"helloWatchKit"]; 此方法无法设置字体颜色

//富文本可以设置button文字的颜色
NSMutableAttributedString *mAttrStr = [[NSMutableAttributedString alloc] initWithString:@"helloWrold" attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:14],NSForegroundColorAttributeName: [UIColor yellowColor]}];

//设置button 文字
[self.button setAttributedTitle:mAttrStr];

//禁止与用户交互，设置此方法button颜色会有变化，如下图
 [self.button setEnabled:NO];
    // Configure interface objects here.
}

- (IBAction)buttonClik {
    //此方法可以显示隐藏的控件和动画。
}

a.如下图[self.button setEnabled:Yes]，button颜色正常。

Snip20170307_24.png

b. 如下图设置[self.button setEnabled:NO]，button颜色变成灰色

Snip20170307_23.png

2. WKInterfaceSlider

2.1 WKInterfaceSlider的方法

@interface WKInterfaceSlider : WKInterfaceObject

//是否可以与用户进行交互
- (void)setEnabled:(BOOL)enabled;

//设置Slider开始值
- (void)setValue:(float)value;

//设置Slider 进度条的颜色
- (void)setColor:(nullable UIColor *)color;

//设置Slider 进度条总步数
- (void)setNumberOfSteps:(NSInteger)numberOfSteps;

@end

2.2 WKInterfaceSlider的用法

@property (unsafe_unretained, nonatomic) IBOutlet WKInterfaceSlider *slider;

- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];

    //设置进度条，初始化值
    [self.slider setValue:0];

    //设置进度条的颜色 
    [self.slider setColor: [UIColor redColor]];
    
    //设置进度条的总步数
    [self.slider setNumberOfSteps:2];
   
}

//mark 点击事件
- (IBAction)sliderOperation:(float)value
{
    NSLog(@"%f",value);
}

如下图WKInterfaceSlider是代码设置的结果。

Snip20170307_25.png

3. WKInterfaceSwitch

3.1 WKInterfaceSwitch方法

@interface WKInterfaceSwitch : WKInterfaceObject

//设置开关的文字
- (void)setTitle:(nullable NSString *)title;

//设置开关的文字，富文本
- (void)setAttributedTitle:(nullable NSAttributedString *)attributedTitle;

//设置开头是否能交互
- (void)setEnabled:(BOOL)enabled;

//设置开头开始时，状态
- (void)setOn:(BOOL)on;

//设置开关颜色
- (void)setColor:(nullable UIColor *)color;
@end

3.2 WKInterfaceSwitch用法

//一定要用StoryBoard中拉线，iWatch 无初始化方法
@property (unsafe_unretained, nonatomic) IBOutlet WKInterfaceSwitch *swith;
- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];
    //设置文字颜色和大小
    NSMutableAttributedString *mAttrStr = [[NSMutableAttributedString alloc] initWithString:@"你好吖，哈哈，逗逼！！" attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:10],NSForegroundColorAttributeName:[UIColor redColor]}];
    //设置开关文字
    [self.swith setAttributedTitle:mAttrStr];
    //设置开关状态
    [self.swith setOn:NO];
    //设置开关颜色
    [self.swith setColor:[UIColor yellowColor]];}

#pragma mark - 开关点击事件
- (IBAction)switchOperation:(BOOL)value{
    NSLog(@"%zd",value);
}

如下图是代码，设置开关的UI。

Snip20170307_26.png

Over!
May maker help us all!!