二、iWatch常用控件基本用法WKInterfaceGroup

iWatch 的布局，与手机的APP的布局不同，如果不用WKInterfaceGroup,一行只能布局一个控件，与HTML几分相似。好了不废话，先讲述WKInterfaceGroup，再讲述UIStoryBoard的用法。因为WKInterfaceGroup对UIStoryBoard布局起到十分大作用，WKInterfaceGroup里面进行一行多个控件布局。

1. WKInterfaceGroup

1.1 WKInterfaceGroup方法

@interface WKInterfaceGroup : WKInterfaceObject <WKImageAnimatable>

//设置cornerRadius圆角
- (void)setCornerRadius:(CGFloat)cornerRadius;

//设置内置的间距
- (void)setContentInset:(UIEdgeInsets)contentInset;

//设置背景颜色
- (void)setBackgroundColor:(nullable UIColor *)color;

//设置背景图片
- (void)setBackgroundImage:(nullable UIImage *)image;

//设置背景图片，用网络加载
- (void)setBackgroundImageData:(nullable NSData *)imageData;

//设置背景图片，用图片名字
- (void)setBackgroundImageNamed:(nullable NSString *)imageName;

@end

1.2 WKInterfaceGroup用法

@interface InterfaceController()
//从storyBoard中拖的 控件
@property (unsafe_unretained, nonatomic) IBOutlet WKInterfaceGroup *group;

@end


@implementation InterfaceController

- (void)awakeWithContext:(id)context {
    
    [super awakeWithContext:context];
    
    //设置圆角
    [self.group setCornerRadius:20];
    
    //设置背影颜色
    [self.group setBackgroundColor:[UIColor redColor]];
    
    //设置内置间距
    [self.group setContentInset:UIEdgeInsetsMake(20, 20, 20, 20)];

    //设置背景图片
    [self.group setBackgroundImageNamed:@"Personal communication"];
}

- (void)willActivate {
    // This method is called when watch view controller is about to be visible to user
    [super willActivate];
    
    
}

- (void)didDeactivate {
    // This method is called when watch view controller is no longer visible
    [super didDeactivate];
}

@end

2. UIStoryboard 布局

iWatch 不支持初始化控件，故所有要加载的控件，我们要先把控件放在storyBoard中，然后在Extension 连线。然后通过设置其属性和方法，达到我们的要求。

2.1普通布局

a. 一行，只能放一个控件，不能同时放多个控件

b.在storyBoard 如下图 可以设置其水平和垂直对齐，以及其size。其中size中 有三个方式: 根据内容调整宽度，相对父视图宽度，和固定长宽。

Snip20170307_17.png
c.点击如下标记 加号 可以设置，不同版本的iWatch，iWatch分为38mm和42mm两种，用于iWatch屏幕的适配。 Snip20170307_18.png

2.2 WKInterfaceGroup布局

如果业务需求时，一行需要布局多个控件，请用WKInterfaceGroup，如下将讲述如何使用,so easy!
a. 在下图B处，Group 中一行中可以放两个buttom
b. 在下图A处，可以定义WKInterfaceGroup两个Button控件的间距。

Snip20170307_19.png

c.如下是两个Button的布局设置
1>.左边Button，如下图A处 width 为相对父控件的宽度，其值为0.5倍

Snip20170307_20.png
2>.右边Button，如下图A处 width 为相对父控件的宽度，其值为0.5倍
Snip20170307_21.png
d.现在有一个需求，让左边的Button离左边缘40,如何做到呢？个人的思路是加在左边Button 左边加WKInterfaceLabel,WKInterfaceLabel的宽度为40mm,如下图A标记处设置。
Snip20170307_22.png

Over!
May maker help us all!