WatchKit开发的博客

同步新浪微博:@WatchKit开发

watchOS2 Complication模板一览(22个)

CLKComplicationTemplateCircularSmallRingImage



CLKComplicationTemplateCircularSmallRingText



CLKComplicationTemplateCircularSmallSimpleImage



CLKComplicationTemplateCircularSmallSimpleText



CLKComplicationTemplateCircularSmallStackImage



CLKComplicationTemplateCircularSmallStackText



CLKComplicationTemplateModularLargeColumns



CLKComplicationTemplateModularLargeStandardBody



CLKComplicationTemplateModularLargeTable



CLKComplicationTemplateModularLargeTallBody



CLKComplicationTemplateModularSmallColumnsText



CLKComplicationTemplateModularSmallRingImage



CLKComplicationTemplateModularSmallRingText



CLKComplicationTemplateModularSmallSimpleImage



CLKComplicationTemplateModularSmallSimpleText



CLKComplicationTemplateModularSmallStackImage



CLKComplicationTemplateModularSmallStackText



CLKComplicationTemplateUtilitarianLargeFlat



CLKComplicationTemplateUtilitarianSmallFlat



CLKComplicationTemplateUtilitarianSmallRingImage



CLKComplicationTemplateUtilitarianSmallRingText



CLKComplicationTemplateUtilitarianSmallSquare



WatchKit视图转换控制小结

    对于WatchKit App,是可以在Storyboard里建立多个InterfaceController并像在iOS应用一样直观的画出视图转换连接的,当然我们也可以通过视图控制器代码实现相应视图切换与跳转。

    简单来说视图转换连接有三种形式:

    1.Push/Pop - 提供Hierarchical形态下基于栈(Stack)的视图控制,Hierarchical意为分级视图架构,效果类似iOS应用里的Navigation界面,主要用于导航类的视图转换。首先必须有一个根视图控制器,通过触发Storyboard里拖拽生成pushSegue或用pushControllerWithNames:代码将下一级视图压入(Push)堆栈并弹出时,会在标题栏前加上<左箭头,点击会返回上一级视图,也可以执行popController()代码,而直接返回根视图可以用popToRootController()。

    2.Present - 与Push的方式比较类似,会跳转到一个Modal(模态)视图,区别是当前视图的控制器会被释放并执行didDeactivate方法,但我们仍然可以在模态视图里点标题栏或者在视图控制器代码调用dismissController()方法以重新激活上一个视图。

    3.Next page - 分页视图模式,多个视图的横向并列排列,左右扫会切换,下方有小圆点进行标识。现在很多iOS应用启动时都有这种分页导航用于操作方法或新功能的提示。Storyboard里按住control从视图A拖到视图B选择next page可以建立此关系。

   具体可以看下“WatchKit编程指南:WatchKit Apps--界面导航”这篇文章:

  http://www.cocoachina.com/ios/20141216/10642.html

  下面重点总结一些常见问题与解决方法:

  1.Q:主控制器为分页视图时,无法push分级的视图栈;主控制器为分级视图时,无法push分页视图。

   A:Page-based与Stack模式是互斥的,因此必须使用模态方式进行切换。主控制器为分页视图时,要正确弹出一个分级视图栈可以用presentControllerWithName:方法,而主控制器为分级视图时,要正确弹出单页视图,用

presentControllerWithName:conext:方法,而弹出多个页组成的分页视图,需要改为用presentControllerWithNames:contexts:方法。

  2.Q:怎么在视图间传递参数?

  A: 利用context参数封装参数对象,若在push模式下需要传递视图控制器delegate,可参考本人之前翻译的那篇“WatchKit的代理与上下文”文章。

3. Q: 定义了ForceTouch时的上下文菜单,结果切换视图时再激活上下文菜单并点击时报错说视图指针丢失。

  A: 因为你代码里是在awakeWithContext:里定义的上下文菜单,然后用模态方式弹出,这样切换视图后原视图被销毁就无法正确调用了菜单内容代码。解决方法是:I.用push方式切换视图,这样主视图存于视图栈并不会销毁对象;II.依旧用模态方式切换视图,但把上下文菜单定义代码放到willActivate()函数里,这样菜单定义会重新加载不至于失效。


WatchKit Storyboard攻略(二)

    上一篇主要写到了WatchKit里对于Main入口界面设置Storyboard的一些要点和技巧,没想到被转载让那么多小伙伴们看到,因此我也会继续讲解这一部分的后续内容。本篇主要针对第二类视图界面也就是Glance(瞥览)进行示例介绍,编写之际恰逢WatchKit beta2的更新,因此也将顺便介绍有关更新内容。

   Glance的用途大家应该比较熟悉了,它是专门用来快速浏览信息的视图界面,所有信息在一屏内显示,而且界面元素无法交互,用户点击任意位置都会可开启Watch的主应用。Glance视图的激活方式是从边缘上划。

   我们现在打算构造一个显示用户当前位置的Glance。视图上应包括当前时间、当前位置描述与位置地图。因此我们会需要WKInterfaceDate、WKIntefaceLabel和WKInterfaceMap三个组件,考虑将他们垂直瀑布式排列。步骤如下:

    1.建立项目工程和设置启动方式。

    我们用Xcode6beta2建立一个TestWatchStoryboard的项目并增加target,添加WatchKit App扩展,这一步时记得勾上Glance场景的选项。
Xcode提示你激活Watch程序的scheme,确认激活,但用这个是无法启动Glance的。我们可以用Duplicate scheme复制一份,并将新scheme更名为Glance of TestWatchStoryboard2 WatchKit App。


然后修改启动界面为Glance,即可通过新scheme启动我们的Glance。


    2.配置Glance视图。

    打开WatchKitApp的Interface.storyboard,点击Glance的ViewController,可以看到右边出现Glance模板配置界面。


   右方只有模板选择的功能。目前模板都是分为上(Upper)和下(Lower)两部分。虽然选择很丰富但个人认为强制切割成2块而不能整体性的全屏是它的主要局限。前面说了我们有三个元素,因此把Upper上方部分模板改为Group-Body1(模板里的Body其实代表的是一个标签WKInterfaceLabel)。

   接着拖拽1个Date组件到Upper的Group中代表当前时间,再拖拽1个Map控件到Lower的Group代表当前地图位置,界面和结构如下:


    这时我们也可以发现Xcode6.2beta2与beta1的区别:点击各项属性的+号能分别为42mm和38mm设备指定不同的属性值,结合上一篇里我们提到的特性,界面布局的灵活性得到大大提升!

   比如我们运行在38mm表盘上时发现日期时间在一行内显示不下,可以为38mm表盘设置缩小一半的Scale,将Min Scale值中38mm设备的对应值设置为0.5,并同理设置Label元素:


   3.利用代码更新内容

   再简单介绍一下本示例的代码实现思路。

   首先建立所述三个Storyboard控件与控制器代码中对象的IBOutlet关联。名称分别为txtDate、txtLocation与map:

    @IBOutletweakvar txtDate: WKInterfaceDate!

    @IBOutletweakvar txtLocation: WKInterfaceLabel!

    @IBOutletweakvar map: WKInterfaceMap!

    然后增加各控件初始化时的设置代码,这里我们发现了beta2版的又一个差异,WKInterfaceController的初始化函数以前是init(context: AnyObject?),现在变更为awakeWithContext(context: AnyObject?) ,这个变动的原因是你其实无法在WatchKit Extension里进行视图控制器构造函数的调用,所以init是名不副实的,还是以awakeFromNib类似的名称命名更好理解。我们为了简化,静态的设置地图位置与地址标签为武汉大学:

    overridefunc awakeWithContext(context: AnyObject?) {

        super.awakeWithContext(context)

        txtLocation.setText("@:\WuhanUniversty")

        map.setRegion(MKCoordinateRegion(center: CLLocationCoordinate2DMake(30.541093, 114.360734), span: MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)))

    }

  已经完成!选择Glance的Scheme并运行,38mm设备上效果如下:


    Glance部分内容不算多,本系列下一篇我们会研究Notification。

后话:作者非常开心的看到Xcode6.2beta2所带WatchKit的功能得到进一步丰富,这证明Apple确实在不断完善SDK,相信等到AppleWatch发售时WatchKit正式版的功能将更加完整。这也给了作者更新WatchKit有关文章的动力,若未关注本人新浪微博(@WatchKit开发),也希望转载前先联系作者,以确保正确的内容出现于公众媒体,感谢大家!





WatchKit Storyboard攻略(一)

目前的WatchKit只有用户界面的渲染是靠AppleWatch进行,本文的目的主要在于探索WatchKit界面部分的功能开发与小技巧,内容层次上偏基础。

我们现阶段能用到的WatchKit是不完全体,能定制的界面元素都在唯一的Storyboard文件里,但是仔细一看我们就发现,XCode6.2里Watch的Storyboard和iPhone里的完全是两码事,且可动态交互的内容极少。

但是也不要气馁,至少在界面元素的排版方面,比起iPhone用的传统Storyboard其实更加简便。

首先我们了解一下WatchApp的界面组成的基本概念。我们知道,WatchKit目前提供的三种Storyboard模板有WatchApp用的Main模板、瞥览的Glance模板与静态/动态通知模板。这里重点先看一下Main模板,其实它分为两个部分--标题栏与内容frame,对于42mm和38mm的Watch来说,其尺寸是有区别的,见图1与图2:

图1 42mmAppleWatch界面尺寸与分辨率


图2 38mmAppleWatch界面尺寸与分辨率


红色表示标题栏,我们目前唯一能做的似乎就是设定标题文本。


不过还好也可以通过在ViewController的代码里通过setTitle来动态改变标题内容,颜色也是可以通过Global Tint来改变的(见之前的翻译文章)。

黄色部分是我们可以真正掌控的部分,在ViewController的代码里可以通过contentFrame属性进行访问(小小的表盘被标题占用了那么多空间- -!)。


XCode里针对Storyboard剩余能设置的属性都是针对它的了!我们可以设置Background定义背景图,指定图的多种显示模式(默认都是ScaleToFill,好处后面说),并通过设置Animate为true来实现在背景上自动播放图片帧动画。Insets设置为Custom后可以设置视图上下左右留白的空间,默认值都是0。

下面就是本文重点部分了,还是以一个实际的应用场景讲一下更多控件元素的具体使用和排版技巧:

比如说我们要做一个手表程序的启动画面和菜单,构思如下图(程序名Logo部分应与顶部间距40px,与左右边缘需要保持间距20px,水平位置居中;2个菜单项宽度180px,也是水平居中,垂直方向与底部间距24px)。为了精致我为程序名和菜单会制作一些图片资源。但很快就意识到了麻烦,前面已经发现2种大小的AppleWatch分辨率是不同的,这意味着如果做两种设备的适配并保持此排版,图片通常思路下是需要2种尺寸的。



其实完全没有必要,使用WatchKit专用的Storyboard布局功能仅使用一套资源图片就可以轻松的解决统一排版问题,这也将减少图片传输带来的开销并节省Watch宝贵的存储空间。

我们新建一个项目并加好WathApp的target,打开Inteface.storyboard文件,在Main模板里设置InterfaceController的Insets为Custom并按如下设置边距。


这里要注意的是AppleWatch使用的是2倍像素密度图像资源,Top的值减去了标题栏的38像素。

再拖一个Group控件上去,作为主要界面元素的容器。设定其Size的Width和Height均为Relative to Container,系数保持缺省值1,效果立现。


Relative to Container的作用是设定控件的Width属性或Height属性占父容器的比例(1代表100%)。

把Group的Layout设置为Vertical垂直排列,再加3个Image上去代表logo和2个按钮。


先来看看logo,我们现在边界已经确定好,因此只要它宽度与Group保持一致就行,而不同的设备,用控件自带的Scale功能就好!高度它可以自己计算!


运行程序并分别选用42mm和38mm设备,发现logo图确实是在保证边距的情况下在38mm设备上缩小了。

本文的情景里对于菜单按钮要求有点区别,为保证用户能方便按到按钮,按钮大小是必须保证的。因此这里我们设置2个按钮Image的size为fixed width与fixed height并填好图片对应宽高,并设置Position位置为向底端对齐。

预览里已经可以看到效果了,如果要修改2个按钮之间的间隔,修改Group的spacing值就OK了。

运行2种设备比较一下:



现在这套方案还是很简单的,按42mm的大尺寸设计,依据需求灵活对属性进行设置选择缩放或者固定尺寸,并利用Group进行各种对齐等等,跟Html排版很类似。

先就说这么多吧,也没有太多体系化的东西。主要还是靠自己的应用场景去设计并调整实践才能有更好的心得体会。


【翻译】WatchKit:开始动画吧!

文章来自:@NatashaTheRobot

WatchKit最另人惊讶的一件事之一就是不再依赖我们喜爱的UIKit组件库。现在我们是直接面向界面进行处理,不再有我们能拿来做动画的layer层属性。为了在Watch上动画,我们必须利用许多图像进行翻页动画。

为了测试这一功能,作者截取了小黄人踢足球的一段GIF动画,随便找了一个网上的Gif Splitter工具来提取GIF的各独立帧,然后把这些成果文件改成统一名称,但文件名末尾有着帧序号以及@2x.png,并把他们导入到WatchApp的 Images.xcassets文件夹:

竟然一共有131帧!

然后作者把图像加到Interface Controller里,并设置动画!


这样就行了,运行程序,就会播放动画了!

如果你喜欢更有控制力一些,也可以用代码控制动画播放,比如你可以指定播放哪些帧:


注意这次设定了整个动画的历时(duration)为15秒,现在动画有了慢放的效果!

http://natashatherobot.com/wp-content/uploads/MinionAnimationSlow.mp4?_=2

你应该注意到了,动画在循环播放.因为我设定了重复次数为Int.max。要让动画只播放1次,设定repeatCount为1!

你可以控制使得动画在任何时候暂停。对你的InterfaceImage调用stopAnimating()方法就好。

享受AppleWatch上动画的快感吧!

项目资源代码见:

https://github.com/NatashaTheRobot/WatchKitAnimationDemo

 

 



 

【翻译】WatchKit: 自定义Global Tint

Twitter上的

@benmorrow 提到了ShortLook通知的一项可自定义特性: 


Short-Look通知的界面不能直接进行自定义,当然,但它是基于你的WatchApp设定进行计算的。通知的App图标、名称以及标题字符明显的配置在WatchApp内容里(这是WatchApp的标准内容)。但你可能不知道App名称的文本颜色是基于你WatchApp的Global Tint颜色设置来生成的。

我(原作者)强烈推荐去设置Global Tint,因为缺省的暗灰色实在太丑了!


要更改Global Tint, 在你Watch App的Interface.storyboard里,选择任意元素,转到右边Utilities的 File Inspector面板,你就能更改Global Tint 了!


Global Tint的设置也会改变你Interface Controller的标题效果:

还有个你可能没注意到的有趣现象。从Table里点击出来的Interface Controller(明细控制器),标题是在返回按钮右边显示的。在iOS里,我们习惯了在Navigation栈的前一个ViewController里标识,但是Watch上,只需要设定Title(标题属性)就好!(反正也没有NavigationBar- -)



[WatchKit开发]用帧动画做AppleWatch小游戏

     WatchKit已经发布了2天,先行者们已经进行了探索并发表了总览性的文章去帮助引导开发者。然而这一般本的WatchKit明确的显示了:1.AppleWatch设备不负责计算功能,而仅负责图像渲染;2.不支持iOS的传统CoreAnimation等动画形式。这两点对于希望在AppleWatch上开发小游戏的开发者几乎是断了其念头。但是对于我这个新入行的人来说,必须有坚持的精神(没钱又任性)才能更快速的前进,因此尝试了用已有手段去实现一个超mini小游戏。

      对WatchKit已经有所了解的话,会明白上述两个麻烦是可以解决的。对第一个问题,可以借助WatchKit Extension在iPhone上运算然后传输结果给Watch,但是这会造成延时。对于第二个问题,Apple提供的第一个CodeSample使用了帧动画,但这可能造成存储空间的浪费。但也许这些副作用对于小如AppleWatch的设备体验来说也是可以接受的,那么我们还是开始实践吧!

     我计划做一个这样的小游戏:屏幕左边是玩家,屏幕右边会出现怪物并往左移动,而我们要做的就是点击屏幕下方按钮控制玩家进行上下移动的切换来实现躲避怪物。

     首先建立一个testGame项目,并添加一个WatchApp的target
下一步的时候我们先选择Swift语言,生成了可以开发WatchKit的工程。

然后展开testGameWatchApp可以找到Inteface.storyboard


    大神们昨天的文章已经提到现在用代码是不能创建界面元素的。那么我们就在Inteface.storyboard里先拖几个图像上去试试,先拖了1个Image到MainInterfaceControllerScene上然后设定尺寸为背景大小作为背景图,然后我们再拖第2个Image叠上去想作为玩家,结果却自动变成了这样:


哎呀呀原来现在的Layout都是自动的,设置不了位置了啊- -!此路不通!

好吧,看了一下能用的UI对象,新的Group元素是可以设置背景图而且可以嵌套的,就像我们用Html做排版那样!

我们将图片帧的资源文件做好放到testGameWatchApp下,player0.png代表玩家在上方,player1.png代表玩家在下方;monster00.png~monster04.png代表怪物在上方的动作序列帧,monster10.png~monster14.png代表怪物在上方的动作序列帧。



我们再拖了1个Group做背景,2个Group嵌入其中分别代表玩家和怪物。背景Group的设置简化如下:


玩家的Group:


接下来是怪物的:


大家现在应该可以明白,我的思路就是每个Group代表不同的对象运动范围,通过小图片元素配透明底图,切换图片序列实现在不同位置的移动效果。

好了再加一个button,目前只有button等几个元素可以实现点击事件的处理。


除了背景图,在InterfaceController里全部建立IBOutlet。

   @IBOutletweakvar player: WKInterfaceGroup!

    @IBOutletweakvar monster: WKInterfaceGroup!

    @IBOutletweakvar btn: WKInterfaceButton!

添加控制变量的声明

    var pos:UInt32!=0//0表示玩家在上 1表示在下

    var i:UInt8=0//怪物的当前帧序列号

    var rand:UInt32!=arc4random() % 2//怪物出来的位置-0表示上 1表示在下

    let max:UInt8=4//撞到玩家的位置(常量)

然后写初始化函数里的代码,我们需要做一个定时器,每0.2秒通过执行自定义的update()函数更新怪物的位置并执行相关检测

    override init(context: AnyObject?) {

        super.init(context: context)

        var timer=NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: "update", userInfo: nil, repeats: true)

    }

update函数的代码

func update(){

 //检测位置

        ifi==max {

            ifpos==rand {

                NSLog("You die!")

            }

        }

        //更新怪物图像

        monster.setBackgroundImageNamed("monster\(rand)\(i).png")

        i++

        

        //未撞上,重置

        ifi>max {

            i=0

            rand=arc4random() % 2

        }

    }

将dodge按钮的SendAction拖到Controller里命名为dodge

@IBActionfunc dodge() {

        ifpos==0 {

         pos=1

        } else {

         pos=0   

        }

        //改变玩家的位置图像

        player.setBackgroundImageNamed("player\(pos).png")

    }

好了,现在运行!效果已出来,按dodge按钮可以上下移动躲避怪物,撞到后会在控制台打印“You died!”


模拟器上实测,按钮按下后动画效果有近1秒的延迟,这是因为图片是从iPhone传过来的。我们可以添加图片缓存来加速

我们先测试缓存玩家的2张图片,将图片的target membership设置一下:


然后在init函数里补充代码,

    let img0:UIImage=UIImage(named: "player0.png")!

    WKInterfaceDevice.currentDevice().addCachedImage(img0, name: "player0")

    let img1:UIImage=UIImage(named: "player1.png")!

    WKInterfaceDevice.currentDevice().addCachedImage(img1, name: "player1")

修改玩家的图像加载代码,再次运行,响应延迟降低为半秒。怪物图片的缓存这里就略过了。

我们再补充玩家死亡事件,添加新的interfacecontroller,并设置identifier



修改NSLog("You die!"为:

 //NSLog("You die!")

   self.presentControllerWithName("over", context:nil)

基本思路就介绍到这里,证明AppleWatch目前也是可以做点超简单小游戏的。若要做出更精美的效果,应该需要用到更多绘制图像的API,以后有机会再细述吧。