zoukankan      html  css  js  c++  java
  • 再过几个月Apple Watch就要正式发布了

    QQ截图20150202110231.jpg

    本文由cocoaChina译者小组成员@TurtleFromMars 翻译自Appcoda,原作者:julian engel原文:WatchKit Introduction: Building a Simple Guess Game
    编 者注:再过几个月Apple Watch就要正式发布了。如你所知,Apple已在Xcode 6.2 beta上附带了WatchKit SDK,让开发者为Apple Watch创建应用。您或许已经开始尝试用WatchKit开发App,如果还没起手,本篇入门教程就是为您准备的。这周Julo开发组的Julian会 为您介绍WatchKit,展示如何利用它创建一个简单的猜数游戏,您将会了解如何创建Watch app,布局界面并测试应用。

    我们这就开始教程吧。

    Apple 在2014年11月18日发布的Xcode 6.2 beta中首次内置了WatchKit,该SDK可以让开发者为Apple Watch创建应用。要想为Apple Watch开发应用,首先你需要一个苹果开发者付费账号,下载Xcode 6.2 beta。本教程的示例App使用Swift语言编写,需要对Swift语言编程基础有一定要求。

    正片开始。

    了解WatchKit App

    现在Apple尚不允许开发者创建原生Watch app,目前你可以构建的三种Apple Watch 用户体验分别是WatchKit app,Glance和可操作式通知(actionable notification)。本教程集中讲解WatchKit app,暂不涉及Glance和通知。

    首 先,Watch app不是独立的应用,也就是说在用户iPhone上运行的配对App必不可少,我们要构建的Watch app只是iPhone app的扩展,Watch app的安装和管理由iPhone app负责。另外,iPhone app与Watch app可以相互沟通,不过本教程不涵盖这部分内容。

    QQ截图20150202110455.jpg

    Apple Watch有38mm和42mm两种屏幕尺寸,但不必分别设计用户界面,Xcode会自动调整布局,适应屏幕尺寸。不过这里用的不是Auto Layout,而是WatchKit独有的布局系统。

    示例App

    今天我们要为Apple Watch创建一个简单的猜数游戏,游戏规则如下:Watch app会先确定一个0到5之间的自然数,让玩家进行猜测,然后检测玩家是否猜中,显示相应信息。App界面如下:

    finalLayout.png

    创建WatchKit示例应用

    我想你已经装好了Xcode 6.2 beta 4(或更新版本),请用Single View Application模板新建一个项目,命名为WatchKitDemo(随意命名即可),选择语言为Swift,其他设置原封不动,项目保存在你喜欢的地方。

    watch-kit-new-project.png

    之 前讲过,Watch app是iPhone app的扩展,要想创建Watch app,请在Xcode菜单上选择Editor > Add Target,然后选择Apple Watch > WatchKit App,构建Watch app必需的一切都可以用WatchKit App模板自动生成。

    watch-kit-target.png

    取消选择Include Notification Scene,其他选项不变,点击Finish,然后会弹出提示询问是否激活新方案(scheme)。

    watch-kit-warning.png

    点击Activate,即在Xcode项目中添加新方案,该方案可在Apple Watch模拟器中测试App。在项目导航栏中可以看到两个新加的文件夹:WatchKit Extension还有WatchKit App。

    watch-kit-new-folder.jpg

    WatchKit app仅包含Storyboard和用户界面相关资源,而负责应用逻辑、更新界面的代码位于WatchKit extension。简而言之,Watch app提供展现信息的视图、与用户交互,而挑重担的是iPhone app。

    设计用户界面

    现在我们开始设计Watch app的用户界面。选择WatchKitDemo WatchKit App下的Interface.Storyboard文件,与iOS app类似,Xcode提供Storyboard来为Watch app设计用户界面。

    首 先向界面控制器(Interface Controller)中拖入一个文本标签(Label),你会发现它自动定位到视图控制器的顶部,这是因为Apple Watch屏幕尺寸很小,界面控制器被分为上(TOP)、中(CENTER)、下(BOTTOM)三大区域。现在选中文本标签,在属性检查器的 Position栏下可以设置横纵位置,把Horizontal和Vertical都设为Center。

    然后把文本改为“Your guess is: 3”,如图:

    watchkit-demo-label.jpg

    接下来我们要让用户修改猜想的数字,向界面中拖入一个滑动条(Slider),然后如图修改滑动条属性:

    watchkit-slider.png

    由于猜数在0到5之间,设步长(steps)为5,这样滑动条就被分成了5格,每格代表一个数字。我们想让3作为默认数字,设值(value)为0.6,最小值(minimum)为0,最大值(maximum)为1。

    设置完毕后,从对象库拖入一个按钮(Button),设标题为Guess,将垂直位置设为Center。

    要 构建完整的界面,我们还需要一个文本标签,用来显示用户猜测结果是否正确。向视图中拖入一个Label,设文本为“Press Guess to play”,然后修改垂直位置为Bottom,设字体的Min Scale(最小比例)为0.5,让文本适应较窄的空间。最终设计如下:

    watch-kit-demo-final-layout.png

    代码时间

    好,搭完界面,开始写代码吧。前面说过,程序逻辑在WatchKit Extension中。InterfaceController.swift已经关联刚刚设计完的Interface Controller。

    打开源码文件,为文本标签和滑动条分别创建outlet,然后在InterfaceController类中添加以下代码:

    1
    2
    3
    @IBOutlet var guessSlider: WKInterfaceSlider!         // the slider
    @IBOutlet var guessLabel: WKInterfaceLabel!     // the label displaying the guess number
    @IBOutlet var resultLabel: WKInterfaceLabel!    // Wrong/Correct Label

    然后是这行代码,创建猜测数字的变量:

    1
    var guessNumber = 3

    项目基础设施创建完成,现在把界面元素连接到相应的outlet。切回Interface.storyboard,开启辅助编辑器,显示刚刚在写的代码文件,然后分别连接outlet和相应控件。

    watchkit-outlets.png

    现在按住control从滑动条拖到代码上,这次不是IBOutlet,选IBAction,命名为updateGuess。

    watchkit-outletaction.png

    会自动添加如下函数:

    1
    @IBAction func updateGuess(value: Float) { }

    该方法将用于获取用户猜测的数字并更新文字提示,在其中插入这两行代码:

    1
    2
    guessNumber = Int(value * 5)
    guessLabel.setText("Your guess: (guessNumber)")

    由于之前滑动条取值范围被设为0到1,取值乘5所得才是我们实际需要的数字,随后更新文本标签。

    按住control从按钮拖到代码,再创建一个action方法,命名为startGuess,该方法生成一个随机数并与猜测数进行比较,并更新提示内容,代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @IBAction func startGuess() {
        var randomNumber = Int(arc4random_uniform(6))
         
        if(guessNumber == randomNumber) {
            resultLabel.setText("Correct. You win!")
        else {
            resultLabel.setText("Wrong. The number is (randomNumber)")
        }
    }

    代码中首先使用arc4random_uniform(6)函数生成一个0到5的随机数,然后进行比较,显示结果。

    搞定。可以测试App了。

    运行Watch App

    要 想运行App,请选择“WatchKitDemo WatchKit App”方案,然后指定运行设备,点击运行按钮测试应用。在模拟器中还可以由Hardware > External Displays > Apple Watch - 38mm切换屏幕尺寸。

    watchkit-simulator.jpg

  • 相关阅读:
    2019年2月14日训练日记
    定制你的WordPress
    打造你的专属埃菲尔塔
    【DIY】打造一个六足蜘蛛机器人
    【数据结构专题-03】树
    【数据结构专题-02】算法介绍
    【数据结构专题-01】数据结构基本介绍
    【DIY】制作一个刷卡进门装置
    【Java实战】Java实现简易音乐播放器
    【Java实战】Java实现简易坦克对战小游戏
  • 原文地址:https://www.cnblogs.com/wq-gril/p/4270057.html
Copyright © 2011-2022 走看看