| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

WatchKit Storyboard攻略(二)

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

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

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

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

我们用Xcode6beta2建立一个TestWatchStoryboard的项目并增加target,添加WatchKit App扩展,这一步时记得勾上Glance场景的选项。

WatchKit Storyboard攻略(二)

Xcode提示你激活Watch程序的scheme,确认激活,但用这个是无法启动Glance的。我们可以用Duplicate scheme复制一份,并将新scheme更名为Glance of TestWatchStoryboard2 WatchKit App。

WatchKit Storyboard攻略(二)

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

WatchKit Storyboard攻略(二)

2.配置Glance视图

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

WatchKit Storyboard攻略(二)

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

WatchKit Storyboard攻略(二)

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

WatchKit Storyboard攻略(二)

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

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

WatchKit Storyboard攻略(二)

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设备上效果如下:

WatchKit Storyboard攻略(二)

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

后话:作者非常开心的看到Xcode6.2beta2所带WatchKit的功能得到进一步丰富,这证明Apple确实在不断完善SDK,相信等到AppleWatch发售时WatchKit正式版的功能将更加完整。

来源:台伟的博客

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1421896724640.html
WatchKit iOS开发 移动开发