祈愿5383

WatchKit Storyboard攻略(三)

WatchKit开发的博客:

  这是WatchKitStoryboard攻略的第三篇,重点自然是Notification(通知)视图这一部分的内容。

  首先转述一下有关概念及原理:AppleWatch应用的通知内容是与iPhone应用同步显示的,但分为ShortLook(短时查看)和LongLook(长时查看)两类进行展现。当某iOS应用的本地或远程通知抵达用户的iPhone 后,iOS将会自行判断显示该通知的设备(iPhone或AppleWatch),对于发送到 AppleWatch的通知来说,系统首先会通过TapticEngine触觉反馈提示用户,如果用户抬起手腕选择查看通知,系统将会首先展示该通知的短时概览(ShortLook),如果用户不放下手腕暂停一会后AppleWatch切换进入LongLook模式。而我们观察Storyboard可知通知是分静态和动态两种的,这里特别强调不要想当然的认为ShortLook就是对应的静态通知,ShortLook的通知目前在模拟器是无法测试的,Storyboard配置的静态与动态通知都是针对的LongLook通知,静态标签内容部分来自Notification payload,动态内容部分则来自于自定义WKUserNotificationInterfaceController类。

  还要注意系统的限制:iOS系统无法定义一个AppleWatch专用的通知,意味着通知必然是同时发送到iPhone与AppleWatch的,只不过可以针对AppleWatch开发专属的动态通知功能。

  我们通过开发一个提供AppleWatch喝水通知的简单示例应用来看看WatchKit提供的Notification有哪些功能。

  (教程运行环境:MacOSX10.10、Xcode6.2beta3、Swift)

  1.工程配置

  建立testNoti项目,新添加WatchKit App的target,


 复制一份Watch主应用的Scheme以建立Notification模板的启动Scheme,
  修改启动点,


  看一下WatchKit App的Inteface.storyboard:Static Notification InterfaceController Scene对应的是静态通知,Notification ControllerScene对应的是动态通知。


  2.静态通知配置

  我们可以看到静态通知的CustomClass是无法指定的,其主要界面实现都通过配置Storyboard里相关属性完成。我们对照Main类的Storyboard配置,可以理解为Notification整个模板的界面背景是一个不可见的Group,而且其上方有一层显示通知来源应用名称及其图标的蒙版区域。

   与Group组件一样,我们可以设置整个通知的背景图。


假设我们的通知界面设计为一个全屏带提醒文字的蓝色图片背景,首先针对42mm设备,做一个312*352的蓝色圆角矩形底图(高度减去了标题栏部分)并添加文字图案,然后设置一下Background的文件名,模式改为Aspect Fill:


  下图是运行效果,同时我们也在图上标注出各项目的对应设置路径。但这样显示不全,还达不到期望的全屏显示的强调效果,


那是因为通知标签高度小了,我们加一个固定高度(这里我们针对42mm设备设置为138)的Group并把Label拖进去,效果已经可以看得到:


接下来设置一下图标,我们简单的做一个宽高88px的作为42mm设备的图标,缩小为80px作为38mm设备图标,并将他们拖入AppIcon对应项

然后是自定义的按钮和通知文本,我们修改WatchKit Extension里的PushNotificationPayload.apns文件中对应内容以测试效果:


运行发现期望的全屏效果已经有了,但按钮需要滚动屏幕才能看到


而点击“Ok I did it”按钮会切换进入AppleWatch应用的主程序,Dismiss按钮则是系统自动生成的。

BTW:程序名称部分的半透明蒙版色彩可以通过修改Notification入口的SashColor属性进行修改。

3.动态通知配置

动态通知在Storyboard部分与静态通知配置方法类似,但我们获得了代码绑定通知界面元素的功能,可以后台动态获取并将其在界面上进行展现。

先测试一下,拖拽一个Label到动态通知控制器上,更改文本为hi:


要将模拟器切换为显示动态通知,必须把Controller代码里这段注释取消:

    overridefunc didReceiveRemoteNotification(remoteNotification: [NSObject : AnyObject], withCompletion completionHandler: ((WKUserNotificationInterfaceType) -> Void)) {

        completionHandler(.Custom)

    }

运行一下,确实可以显示出标签hi了,下面代码绑定此Label控件,

@IBOutletweakvar dynamicLabel: WKInterfaceLabel! 

再添加进一步显示喝水量的代码

overridefunc didReceiveRemoteNotification(remoteNotification: [NSObject : AnyObject], withCompletion completionHandler: ((WKUserNotificationInterfaceType) -> Void)) {

        let mount=1.2 //此值根据你的应用计算生成

        dynamicLabel.setText("Today you should drink \(mount)L water more.")

        completionHandler(.Custom)

    }

最后别忘了在Storyboard里修改dynamicLabel的Lines为3行,以免显示不下


运行即可看到正确的效果。



WatchKit Storyboard攻略(二)

WatchKit开发的博客:

    上一篇主要写到了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开发的博客:

目前的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排版很类似。

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