AppleWatch开发分享

1、AppleWatch界面及功能简介

2、手表主应用界面开发

2.1、表盘分辨率

都是2x屏

38mm款: 272px * 340px (136pt * 170pt)

42mm款: 312px * 390px (156pt * 195pt)

2.2、工程目录结构

新建工程，选项以及工程结构如下图说明：

2.3、UI布局介绍

• 手表UI界面开发只采用StoryBoard方式，所有界面都必须预先在StoryBoard布局好，并设置好属性，程序运行起来之后不能再动态添加界面，只能改变文字内容、图片内容等控件的属性。

• UI布局不使用frame坐标系统，也不使用AutoLayout系统，默认采用从左到右，从上到下的线性布局方式；如果布局内容超过1屏，在SB中会自动扩展表盘的高度，运行时手指向上滑会滚动显示出底下内容，类似ScrollView的效果。

• 如果运行时调用 setHidden 方法隐藏了某个控件，则后续控件会自动补上，填充隐藏控件所在的位置。

• Tip1: Group可以设置其内控件为水平或垂直布局，将控件加入Group，再将界面分割成不同的Group可以方便布局，且Group支持设置背景图。

• Tip2：Global Tint设置app的全局主色可以选择StoryBoard,选中其中任意一个Interface Controller在File inspector中对Global Tint属性进行修改。

这个颜色会应用到下面的元素:

status bar中的Title

short-look通知中的应用名称

• Tip3: 38mm和42mm大小表盘适配，控件属性面板中点击+号，即可分别设置。

• Tip4:图片放在2个Target中的区别

放在WatchKit App中的图片可以直接在SB的属性面板中索引到并使用，同时也可以用直接使用控件的setImageNamed方法在代码中进行设置[self.image setImageNamed:@"img1"];

放在Watchkit Extension中的图片只能通过setImage的方法在代码中进行设置[self.image setImage:[UIImage imageNamed:@"img2"]];

2.4、界面跳转Push Present

与UIKit的用法和表现形式基本相同

[self pushControllerWithName:@"Test1Controller" context:@{@"isModal":@(NO)}];
[self presentControllerWithName:@"Test2Controller" context:@{@"isModal":@(YES)}];
[self presentControllerWithNames:@[@"Test1Controller", @"Test2Controller"] contexts:@[@{@"isModal":@(YES)}, @{@"isModal":@(YES)}]];

然后被弹出的InterfaceController在awakeWithContext方法中取得参数

- (void)awakeWithContext:(id)context 
{
    [super awakeWithContext:context];
    
    if (![context[@"isModal"] boolValue]) 
    {
        [self setTitle:@"我是Test1"];
    }
}

启动默认成为可水平滚动的多页应用，如下代码所示:

[WKInterfaceController reloadRootControllersWithNames:@[@"InterfaceController", @"Test1Controller", @"Test2Controller"] contexts:nil];

2.5、Force Touch弹出菜单

调用用WKInterfaceController的如下系列方法进行添加，每个item可独立设置响应方法。当然也可以通过SB中拖入Menu和Menu Item控件进行添加和属性设置，在此不详述。

- (void)addMenuItemWithImage:(UIImage *)image title:(NSString *)title action:(SEL)action;
- (void)addMenuItemWithImageNamed:(NSString *)imageName title:(NSString *)title action:(SEL)action;
- (void)addMenuItemWithItemIcon:(WKMenuItemIcon)itemIcon title:(NSString *)title action:(SEL)action;

如果此菜单按钮使用自定义的图片，建议图片大小38mm手表70x70，42mm手表80x80，单位：px

模拟器中调试，CMD+Shift+2鼠标左键变成Force Touch功能可呼出此菜单，CMD+Shift+1鼠标左键恢复普通单击功能

3、表盘小组件界面开发

Complications 是 watchOS 2 新加入的特性，它是表盘上的小界面元素，用于自定义表盘，可以支持直接从表盘唤起自己的App。

苹果官方提供的表盘有很多种，但是表盘小组件归只归纳为以下几种类型，许多表盘使用相同类型的小组件。

typedef NS_ENUM(NSInteger, CLKComplicationFamily) {
    CLKComplicationFamilyModularSmall = 0,
    CLKComplicationFamilyModularLarge = 1,
    CLKComplicationFamilyUtilitarianSmall = 2,
    CLKComplicationFamilyUtilitarianSmallFlat = 6,
    CLKComplicationFamilyUtilitarianLarge = 3,
    CLKComplicationFamilyCircularSmall = 4,
    CLKComplicationFamilyExtraLarge = 7,
};

对于开发人员来说，就是实现系统提供的 ComplicationController.m 中的几个代理方法，根据不同的小组件类型，返回对应的显示模板即可。其他具体可参考这篇文章， 这里对代理方法简要说明如下：

#pragma mark - Timeline Configuration
//支持时间旅行的方向
- (void)getSupportedTimeTravelDirectionsForComplication:(CLKComplication *)complication withHandler:(void(^)(CLKComplicationTimeTravelDirections directions))handler 
{
    handler(CLKComplicationTimeTravelDirectionNone);
}

//时间旅行起点时间
- (void)getTimelineStartDateForComplication:(CLKComplication *)complication withHandler:(void(^)(NSDate * __nullable date))handler 
{
    handler(nil);
}

//时间旅行终点时间
- (void)getTimelineEndDateForComplication:(CLKComplication *)complication withHandler:(void(^)(NSDate * __nullable date))handler 
{
    handler(nil);
}

#pragma mark - Timeline Population
//获取当前时间的各个表盘组件信息
- (void)getCurrentTimelineEntryForComplication:(CLKComplication *)complication withHandler:(void(^)(CLKComplicationTimelineEntry * __nullable))handler
{
    CLKComplicationTemplate *curTemplate = nil;
    NSString *curLuck;
    NSString *nextLuck;
    
    if (complication.family == CLKComplicationFamilyUtilitarianLarge)
    {
        CLKComplicationTemplateUtilitarianLargeFlat *template = [CLKComplicationTemplateUtilitarianLargeFlat new];
        template.imageProvider = [CLKImageProvider imageProviderWithOnePieceImage:[UIImage imageNamed:@"Modular"]];
        curLuck = [[Common sharedInstance] getCurrentTimeLuck];
        template.textProvider = [CLKSimpleTextProvider textProviderWithText:[NSString stringWithFormat:@"当前时辰：%@", curLuck]];
        curTemplate = template;
    }
    else if (complication.family == CLKComplicationFamilyModularLarge)
    {
    }
    
    if (curTemplate)
    {
        CLKComplicationTimelineEntry *entry = [CLKComplicationTimelineEntry entryWithDate:[NSDate date] complicationTemplate:curTemplate];
        handler(entry);
    }
    else
    {
        handler(nil);
    }
}

//时间旅行，未来时间的组件信息，limit=100，提供的话不要超过这个数量
- (void)getTimelineEntriesForComplication:(CLKComplication *)complication beforeDate:(NSDate *)date limit:(NSUInteger)limit withHandler:(void(^)(NSArray<CLKComplicationTimelineEntry *> * __nullable entries))handler 
{
    handler(nil);
}

//时间旅行，过去时间的组件信息，limit=100，提供的话不要超过这个数量
- (void)getTimelineEntriesForComplication:(CLKComplication *)complication afterDate:(NSDate *)date limit:(NSUInteger)limit withHandler:(void(^)(NSArray<CLKComplicationTimelineEntry *> * __nullable entries))handler 
{
    handler(nil);
}

#pragma mark - Placeholder Templates
//提供设置界面使用的默认模板，可以是假数据，示意即可
- (void)getLocalizableSampleTemplateForComplication:(CLKComplication *)complication withHandler:(void(^)(CLKComplicationTemplate * __nullable complicationTemplate))handler
{
    if (complication.family == CLKComplicationFamilyModularLarge)
    {
        CLKComplicationTemplateModularLargeStandardBody *tmp = [CLKComplicationTemplateModularLargeStandardBody new];
        tmp.headerImageProvider = [CLKImageProvider imageProviderWithOnePieceImage:[UIImage imageNamed:@"Modular"]];
        tmp.headerTextProvider = [CLKSimpleTextProvider textProviderWithText:@"龙易吉凶时"];
        tmp.body1TextProvider = [CLKSimpleTextProvider textProviderWithText:@"当前时辰：吉"];
        tmp.body2TextProvider = [CLKSimpleTextProvider textProviderWithText:@"下一时辰：凶"];
        handler(tmp);
    }
    else if (complication.family == CLKComplicationFamilyUtilitarianLarge)
    {
        CLKComplicationTemplateUtilitarianLargeFlat *tmp = [CLKComplicationTemplateUtilitarianLargeFlat new];
        tmp.imageProvider = [CLKImageProvider imageProviderWithOnePieceImage:[UIImage imageNamed:@"Modular"]];
        tmp.textProvider = [CLKSimpleTextProvider textProviderWithText:@"当前时辰：吉"];
        handler(tmp);
    }
    else
    {
        handler(nil);
    }
}

//刷新表盘组件数据
- (void)updateComplication
{
    CLKComplicationServer *server = [CLKComplicationServer sharedInstance];
    for (CLKComplication *complication in server.activeComplications)
    {
        [server reloadTimelineForComplication:complication];
    }
}

4、通知界面开发

只要手机App支持AppleWatch，那么对应的通知就会被同步到手表上。

对于开发者来说，只要实现系统提供的 NotificationController.m 中的通知回调方法即可。其他具体可参考这篇文章， 这里对回调方法简要说明如下：

- (void)didReceiveNotification:(UNNotification *)notification withCompletion:(void(^)(WKUserNotificationInterfaceType interface)) completionHandler
{
    //取出自定义的通知的内容并展示到界面的各个组件上
    UNNotificationContent *content = notification.request.content;
    NSDictionary *customDic = [content.userInfo objectForKey:@"customKey"];
    [self.lbl1 setText:customDic[@"key1"]];
    [self.lbl2 setText:customDic[@"key2"]];
    
    completionHandler(WKUserNotificationInterfaceTypeCustom);
}

5、手表手机间通信

当前AppleWatch S2支持WiFi网络，不支持蜂窝移动网络（据说下一代S3支持），手表端的应用可以直接调用NSURLSession接口从网络获取数据。

在无WiFi的情况下，手表可以通过蓝牙与手机通信，向手机端请求数据。

手表端简单的数据存储可以通过NSUserDefaults进行存储。（手表端可以使用sqlite数据库进行存储么？留待大家去验证：）

其他具体可参考这篇文章， 这里对手表手机蓝牙通信简要说明如下：

//手机端激活传输session
if ([WCSession class] && [WCSession isSupported])
{
    self.session = [WCSession defaultSession];
    self.session.delegate = self;
    [self.session activateSession];
}

//手机端发送数据
if (self.session.paired && self.session.watchAppInstalled)
{
    /*
    手表必须配对已连接，并且手表app跑在前台才是 Reachable 的。而手表向手机发数 据不用判断这个，因为手表可以从后台唤醒手机app来发，反之不会。
    */
    if (self.session.isReachable)
    {
        [self.session sendMessage:message replyHandler:nil errorHandler:nil];
    }
}

//手表端激活传输session
self.session = [WCSession defaultSession];
self.session.delegate = self;
[self.session activateSession];

//手表端发送数据
[self.session sendMessage:message replyHandler:nil errorHandler:nil];

//两端接收数据都通过 WCSessionDelegate 代理进行
......

6、AppStore上架踩坑

1、手表端应用的的AppIcon不要带透明背景，黑色背景即可，否则使用Application Loader上传ipa包成功，但是在ITC的构建版本那边找不到应用，苹果也不提示原因。

合格的手表AppIcon图示：

不合格的手表AppIcon图示：

2、如果WatchApp支持表盘小组件功能，那么上架传给ITC的应用功能截图也不要带表盘组件功能的截图，只要带应用内的截图即可，否则会被苹果认为你开发的也是手表看时间的应用，体验不如苹果自家的看时间的应用，会被拒。

以下两张应用内截图可以上传ITC

以下带表盘功能小组件的截图就不能上传到ITC

7、参考链接

watchOS Human Interface Guidelines

App Programming Guide for watchOS

Watch开发：Complications教程

watchOS中通知的应用

watchOS 2-WatchConnectivity