watchOS 开发 iWatch

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

2017-03-07  本文已影响162人  Dosun

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!

上一篇 下一篇

猜你喜欢

热点阅读