在 Swift 中编写 watchOS 2 Hello World 程序

作者:codingexplorer,原文链接,原文日期:2015-12-08
译者:mmoaay;校对:千叶知风;定稿:numbbbbb

过去的几个月我一直保持着写博客的习惯,但是现在我得专心工作了。最近在做一些 watchOS 2 相关的更新工作,我觉得如果出个系列教程会对大家很有帮助。首先我们需要学会开发第一个 watchOS 2 应用,所以下面来开发一个 watchOS 2 风格的 “Hello World!”吧!

在教程开始前,我准备介绍如何使用 Swift 在 iOS、watchOS、tvOS 和 OS X 上编程。此外,如果你想在本博客中学到其他知识,请给 Twitter @CodingExplorer 或者 Contact Page 来提出建议。

创建你的 watchOS 2 应用

打开 Xcode,创建一个新项目。可以使用初始界面,也可以通过菜单(File → New → Project…)。然后,定位到 watchOS 部分并选择 Application,现在界面看起来是这样的:

因为只有 “iOS App with WatchKit App“ 这一个选项,所以选中并点击 next。接着你需要给应用起个名字然后做几个选择来初始化项目。我们把应用命名为 “HelloWatch“。简单起见,你可以把下方的 the Notification Scene、Glance Scene 等选项关闭。虽然它们很有用,但是在这个项目中我们只需要生成一个简单的 “Hello World“ 应用。当然,你需要确保将 Language 选项设置为 “Swift“。

这个项目是不会生成 iOS 应用的。如果你想知道如何在 iOS 上写一个 Hello World 应用,请阅读 Hello World! Your first iOS App in Swift
选择好项目的保存位置,我们就可以开始编程了。选中导航面板中 “HelloWatch WatchKit App“ 分组中的 Interface.storyboard。

这个文件就是 watchOS 应用的界面文件。和 iOS “Hello World“ 应用类似,我们在应用中放置一个 label 和一个 button,点击 button 会改变 label 的文本内容。

我们从 Object Library 拖一个 label 和 button 到 storyboard 上,然后把 label 放置在 button 的上方:

这时 label 看起来会比较拥挤,我们设置 width 为 “Relative to Container“ ,并将其值设置为 1,从而把 label 的宽度设置为屏幕的宽度。这个值代表了和屏幕宽高的百分比,所以 1 就是 100%,0.5 就是 50%,以此类推。我们在垂直方向上也给它更多的空间,把 Height 设置为“Relative to Container“ 然后将其值设置为 0.25 (即屏幕高度的 25%)。最后我们把 Text 设置为 “App Loaded…“,如果你喜欢还可以将其设置为居中显示。

给 watchOS UI 添加一些 Swift 代码

UI 已经 OK 了。现在我们把它和代码连接起来,然后让 button 去做一些事情。最简单的方式就是打开辅助编辑器。点击右上方的斜 venn 图标即可:

如果需要更大的操作空间,可以点击最右边的按钮(图标是右侧包含长条的方框)关闭工具面板。

然后,从 label 开始用 Ctrl+拖动或者右击拖动的方式拉一条线到代码中(根据惯例,一般是在类的顶部)。然后就会弹出对话框让你给 label 的 outlet 命名。我们把它叫做 “displayLabel“。按照惯例我仍然建议采用骆驼命名法来给它们(也包括所有的变量)命名,以小写字母开始,接下来每个单词的首字母大写(因为我们不能在变量名中加空格,所以我们以这样的方式来表明这是一个新的单词)。

接下来,我们对 button 做同样的操作。从 button 开始用 Ctrl + 拖动的方式拉一条线到代码中(可以是类范围内的任意位置,据我所知,除了放在 outlet 下方,没有其它特殊的惯例)然后创建一个 action。一定要确保连接的方式是 “action“。如果你创建的是 outlet,它可以让你改变 button 本身的状态,比如它的文本,但这不是我们在这里想做的事情:

再次确认这是一个 “Action“。它会创建一个叫 “buttonTapped“ 的方法,我们在这个方法里面写我们的代码。改变 WKInterfaceLabel 文本的代码非常简单,如下:

@IBAction func buttonTapped() {
    displayLabel.setText("Hello World!")
}

我们的方法中间只有 1 行代码。我们调用了 WKInterfaceLabel 的 “setText“ 方法,然后把新的文本做为参数传递给它。在 iOS 中,我们通过一个叫“text“的属性就可以轻松的改变 label 的显示内容。但是在目前来说,watchOS 并没有这样一个属性,我们甚至无法在程序中读取文本内容,预计下一版本的 watchOS 会加入这个属性,但是现在我们只能用 “setText“ 方法设置文本内容。

大功告成。如果你有 Apple Watch,可以把手机连接到 Mac,然后把这个应用安装到手机上。你也可以使用模拟器。在左上角选择 “HelloWatch WatchKit App“ 这个 target,然后选择任意一个 iPhone 和 Watch 模拟器(或者选择具体的 iPhone,如果你想在真机上测试),然后点击 play 按钮。你可能需要多点击几次 “play“ 按钮(如果你的电脑没有 SSD ,这可以减少加载模拟器的时间),最终你会见到下面的画面:

点击 button 之后就会看到:

完整起见,InterfaceController.swift 文件的所有代码如下:

import WatchKit
import Foundation


class InterfaceController: WKInterfaceController {
    
    @IBOutlet var displayLabel: WKInterfaceLabel!

    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
        
        // Configure interface objects here.
    }
    
    @IBAction func buttonTapped() {
        displayLabel.setText("Hello World!")
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }

}

上面的大部分代码都是模版自动生成的。

总结

文章中的代码都是在 Xcode 7.1.1 中进行测试的。

这就是 watchOS 2 中 “Hello World!“ 应用。你会发现这篇教程非常简单,其实这是有意为之。接下来的教程会经常引用这篇教程,这样就可以避免重复 watchOS 应用的设置步骤。这个系列接下来的文章会更有趣,包括使用 WatchConnectivity 在 iOS 和 watchOS 2 应用之间传递数据以及并发实现。敬请期待更多的 watchOS 和 Swift 教程!

希望这篇文章对你有用。如果你觉得有用,请不要犹豫,把它分享到你的 Twitter 或者你喜欢的社交媒体,每次分享对我来说都很有用。当然,如果你有任何问题,请马上通过 Contact Page 或者 Twitter @CodingExplorer 联系我,我会尽我所能帮助你。谢谢!

本文由 SwiftGG 翻译组翻译,已经获得作者翻译授权,最新文章请访问 http://swift.gg

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 此时此刻,在回家转的最后一班车的站台上,队伍从站台的一头排到了站台的另一头,为了等个座位我每天都往前...
    长颈鹿的小毛鬃阅读 315评论 0 0
  • 文/管子 听了一段王竑锜老师的视频演讲,他讲到了人的组成,这个提法有新意。 我们都知道,一个...
    管子姐姐阅读 938评论 0 0
  • 今天看的内容是巴克遇到了流动资金短缺的问题,他去到当地银行贷款,却没有借到,能够借的亲戚朋友的钱都借了,员工伍德尔...
    hanxuerping阅读 139评论 0 0
  • 芦苇花季 喜欢芦苇花 她 柔柔的 像棉花一样细腻 她 像秋风一样温柔 她 带着燕麦的芳香 有着惊海涛浪的动荡 一阵...
    723edf844d12阅读 185评论 3 5