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
