watchOS系列教程之Hello,Apple Watch!

作者: 刘铭iOS | 来源:发表于2016-05-29 19:35 被阅读1002次

    第一章:Hello,Apple Watch!

    Apple Watch:来自于库比蒂诺最酷的产品?我相信有很多的人都会回答,“Yes!”。所以,我以尽可能快的速度第一时间拿到了这款Watch,然后为我的iPhone从4S升级到6找了一个非常合适的理由:]

    如果你完全是因为为了开发Watch应用,而正在非常兴奋的阅读本书的话,这一章将会带着你,用一种非常爽的体验去创建一款基本的Watch应用,并且会在模拟器中运行,这里将是你一切开始的地方。

    在开始的时候,我们将会运行一个空的Watch应用模板。然后,将会添加一个标签(label)并显示“Hello,World!”文本。最后,我们将会改变label为下面这样:

    001.png

    最后,我们会让你的Watch应用更有趣些,随机显示一组表情符号:

    002.png

    我可以非常荣幸的向大家保证:这将是一章有趣的、成功的、有用的、刺激的和非常酷的内容,让我们开始吧!

    开始

    打开HelloAppleWatch开始项目,构建并运行:

    003.png

    这个简单的iPhone应用只是利用表情符号显示了Hello,Apple Watch!点击按钮会在底部视图看到新的东东,我们所创建的Apple Watch应用就要完成这些个事情。

    注意:如果你现在没有苹果的开发者账号,又想在iPhone和Watch上面运行的话,需要看苹果的Launching Your App on Devices Using Free Provisioning,百度搜搜吧!

    与开发iPhone应用使用故事板和通过视图控制器显示和控制UI的方法相同,一个Apple Watch应用也要使用故事板和一个Interface Controller。做到这点,你需要添加一个Watch应用到项目的Target之中。

    注意:在将来,如果你开发的Watch应用不是基于现存的iPhone应用,则可以使用New Project的模板watchOS\Application\iOS App with WatchKit App。这样Target中就直接创建好Watch应用了。

    从Xcode菜单中选择 File\New\Target...

    004.png

    在target模板窗口中选择watchOS\Application\WatchKit App,注意不是iOS\Apple Watch\WatchKit App。

    005.png

    点击Next按钮。在target选择窗口中,将Product Name设置为HelloAppleWatch WatchKit AppOrganization Name设置为你自己的个人信息,取消Include Notification Scene的勾选,点击Finish按钮。

    006.png

    在弹出的窗口中点击Activate按钮,这时在Xcode的Scheme菜单中会创建一个可以运行Watch应用的选项。可以尝试做这样的事情:从Scheme菜单中选择HelloAppleWatch WatchKit App\iPhone 6 Plus + Apple Watch - 42mm

    007.png

    构建并运行,可以看到两个模拟器:一个是iPhone 6 Plus,另一个是42mm的Apple Watch!第一次运行Watch应用,它可能会在模拟器出现的时候花费一些时间,苹果现在尽可能的让模拟器去反应真实设备的性能。

    最终,Watch模拟器将会显示应用程序的默认启动画面,以及一个黑色屏幕,在屏幕的右上角则是时间显示。

    008.png

    Watch和iPhone模拟器都是一个独立的Mac应用,他们拥有自己的菜单。

    此时,有两个全新的Group出现在项目导航中:

    1. HelloAppleWatchWatchKitApp包含了Interface.storyboard,它用于应用的界面布局。
    2. HelloAppleWatchWatchKitAppExtension包含了InterfaceController.swift,它与iOS上的UIViewController相同。
    009.png

    创建Watch应用的流程与iPhone的相似:在故事板中设置UI,然后将UI通过outlets和actions关联到控制器。

    Hello,World!

    让我们从传统的“Hello,World!”应用程序开始:]

    一个简单的label,在Attributes Inspector中设置文本。就是如此简单的操作,可以让大家充分领略Apple Watch界面的功能和限制。我们将会在第三章“UI Controls”,学习创建Apple Watch界面的更多技能。

    打开Interface.storyboard。在本章,不需要编辑区域左侧的大纲视图,点击左下角的方块儿按钮将其关闭。然后显示Utilities区域和Object Library

    010.png

    在搜索过滤器中输入label,从对象库中拖拽一个label到唯一的这个Interface controller中。在Attributes Inspector中可以看到label的自定义选项。

    011.png

    默认时候,label位于界面的左上角。与iOS界面设计不同,我们不可以随意的去通过拖拽的方式移动label——如果你坚持这样的话,它会再次回到界面的左上角位置。但是,通过Attributes Inspector可以让我们进行简单的位置控制——设置label的文本和屏幕居中:

    1. 设置Text为Hello,World!
    2. 设置Alignment\Horizontal为Center
    3. 设置Alignment\Vertical为Center
    012.png

    注意:当我们在Attributes Inspector中修改Text属性的时候,内容的改变是不会马上反应到界面中去的,知道我们按下回车键。我们也可以双击label本身去改变Text的内容。

    注意到Size\WidthSize\Height都是Size to Fit Content,这代表了label的大小与文本内容自适应。

    013.png

    构建并运行Watch应用,你会看到下面的情况:

    014.png

    祝贺你创建了自己的第一个Watch应用。

    使用代码设置label的text属性

    我们想让这款Watch应用能够有些动态的东东,至少可以在控制器中通过代码设置label的text。这样我们需要在InterfaceController.swift文件中创建outlets。

    打开assistant editor(助手编辑器)并且设置Automatic,这样就会自动显示InterfaceController.swift文件。

    015.png

    选择label,然后按住Control键并拖拽鼠标从labelInterfaceController.swift中,类声明代码下方的空白区域处。Xcode会提醒我们Insert Outlet。释放鼠标以后会弹出一个面板,如下图所示。检查类型是WKInterfaceLabel,设置Name为label后点击Connect

    016.png
    一个@IBOutlet声明会出现在InterfaceController.swift中:

    @IBOutlet var label: WKInterfaceLabel!

    代码是对Watch界面中label的引用,因此我们就可以使用它来设置text了。

    添加下面的代码到willActivate()super.willActivate()的下方:

    label.setText("Hello, Apple Watch!")

    构建并运行App:

    017.png

    完美!你现在已经添加了一个label到Watch界面中,并且通过代码设置了它的text。你已经在做一件另自己印象深刻的事情————编写代码并运行在自己的Watch应用上。

    Apple的颜色表情字体

    文本在小小的Watch表盘上挤得要命。如果文本的字体再大些或者文字再多些,可能就需要将label的Lines属性值从1改为0,这将会告知label——你可以显示多行文本信息。

    但是,在当前的这个应用中是不需要这样做的,因为我们将会使用Apple‘s color emoji字体替代文本,它会节省更多的空间并且还很有趣!

    首先,选择故事板中的label,然后点击Attributes Inspector中Font属性中的T icon,在弹出的字体设置面板中,改变FontSystem,以及将Size改为24,点击Done

    018.png

    接下来,编辑InterfaceController.swift中的Hello,Apple Watch!字符串。

    1. 选择Hello然后按Control-Command-Space键,在弹出的表情视图中找到搜索框。
    2. 搜索框中输入waving,鼓掌的表情会出现,点击它替换之前的Hello。
    019.png

    重复这一步骤替换Apple、Watch和惊叹号为表情符号。删除字符串之间的逗号和空格,最后成为这样:

    020.png

    构建并运行App:

    021.png

    一个超级Cool的应用!

    铸造表情符号的应用

    在iPhone和Watch App上共享EmojiData.swift

    打开EmojiData.swift文件:它包含一个Int的extension,里面只有一个简单的random()函数和五个表情数组:people、nature、objects、places和symbols。我们可以使用这些表情做出很有意思的事情。我们也可以随意的向数组中增加更多的表情符号。

    let people = ["😄", "😙", "😔", "😣", "😕", "👯", "💁"]
    let nature = ["🐣", "🍀", "🌺", "🌴", "⛅️", "🐋", "🐺"]
    let objects = ["🎁", "⏳", "🍎", "🎵", "💰", "⌚️"]
    let places = ["✈️", "♨️", "🎭", "🚲", "🎢"]
    let symbols = ["🔁", "🔀", "⏩", "⏪", "🆒"]
    

    在iPhone和Apple Watch设备中共享文件最简单的方法是在项目导航中右击EmojiData.swift文件,然后选择New Group from Selection。设置group的名称为Shared,然后将该group移出HelloAppleWatch文件夹,这样就可以让它同时在HelloAppleWatch和HelloAppleWatch WatchKit App使用了。

    打开Shared组,选择EmojiData.swift并且在File Inspector中的Target Membership部分,勾选HelloAppleWatch WatchKit App Extension。这样,InterfaceController.swift就可以使用EmojiData.swift了。

    023.png

    创建随机表情

    InterfaceController.swift

    1. 在@IBOutlet语句的下面,awakeWithContext(_:)函数的上面,创建一个EmojiData对象:
      let emoji = EmojiData()
    
    1. 在willActivate()中,使用下面的代码替换label.setText()。最后一行label.setText开头的代码,必须写在一行上,绝对不能用回车换行。
    // 1
    let peopleIndex = emoji.people.count.random()
    let natureIndex = emoji.nature.count.random()
    let objectsIndex = emoji.objects.count.random()
    let placesIndex = emoji.places.count.random()
    let symbolsIndex = emoji.symbols.count.random()
    // 2
    label.setText("\(emoji.people[peopleIndex])
      \(emoji.nature[natureIndex])\(emoji.objects[objectsIndex])
        \(emoji.places[placesIndex])\(emoji.symbols[symbolsIndex])")
    

    random()产生一个随机数,上面的代码:

    1. 为每个数组在0和数组中元素个数间产生一个随机数;
    2. 使用五个随机数所获取的表情创建一个label的text。

    构建并运行Watch应用,看看这次的运气如何呢?

    开启下一个运气

    在模拟器中运行后,我们可以看看运势如何,但是要获取下一个运势,必须要回到Home界面。我们需要一个按钮,这样在点击它以后会得到一个新的运势!实现起来并不难,并且还可以重构我们的代码。

    替换label为button

    打开Interface.storyboard并删除label——没错,是删除!拖拽一个button到Interface controller中:它将贴靠到顶部,但我们将会让它占据大部分的屏幕。这样,点击任何地方都会得到新的运势。

    在Attributes Inspector中,设置按钮的FontSystem 22.0Alignment\HorizontalCenterAlignment\VerticalBottom。设置按钮的Size \HeightRelative to Container值为0.9—这让按钮的高度为屏幕的90%。

    024.png

    当用户点击按钮,放在willActivate()中的代码就应该已经运行了。我们需要再写一遍,并且将它放在一个自定义的方法中,这样,不管是willActivate()还是用户点击按钮的话,都会调用它。

    打开InterfaceController.swift,在willActivate()的下面添加一个新的方法:

    func showFortune() {
    }
    

    拷贝之前添加到willActivate()中,super.willActivate()下面的所有代码,粘贴到showFortune()方法中,然后将willActivate()方法中的代码替换为调用showFortune()的代码,文件看起来像下面这样:

    override func willActivate() {
      super.willActivate()
      showFortune()
    }
    func showFortune() {
      let peopleIndex = emoji.people.count.random()
      let natureIndex = emoji.nature.count.random()
      let objectsIndex = emoji.objects.count.random()
      let placesIndex = emoji.places.count.random()
      let symbolsIndex = emoji.symbols.count.random()
      // 2
      label.setText("\(emoji.people[peopleIndex])
        \(emoji.nature[natureIndex])\(emoji.objects[objectsIndex])
           \(emoji.places[placesIndex])
    }
    \(emoji.symbols[symbolsIndex])")
    

    label.setText()?我们不是已经从Interface controller中删除了label吗?我们会尽快为button建立关联。打开Interface.storyboard。在assistant editor模式下,在label的IBOutlet代码上面建立button的关联。在弹出的菜单中,检查Type是WKInterfaceButton,Name为button。

    OK,现在将showFortune()方法中的label.setText替换为button.setTitle,在Interface.storyboard中删除label的IBOutlet关联。

    接下来,为button建立IBAction关联,从按钮Control-drag鼠标到showFortune()方法的下面。这次,在弹出的面板中确保ConnectionAction,action的名字为newFortune,点击Connection

    025.png

    我们会看到空的方法:

    @IBAction func newFortune() {
    }
    

    在newFortune()方法中我们只需要做一件事情,调用showFortune()方法:

      showFortune()
    

    完善我们的App

    最后一件事情:添加一个背景图片。打开HelloAppleWatch WatchKit App\Assets.xcassets和Attributes Inspector。点击+按钮并选择New Image Set。修改NameCookie,勾选Devices\watchOS\Apple Watch并且拖拽38mm.png42mm.png到对应的位置。

    026.png
    打开Interface.storyboard,选择Interface Controller,在Attributes Inspector中将Background设置为Cookie 027.png

    构建并运行,让Watch告诉你现在的运势吧!

    相关文章

      网友评论

        本文标题:watchOS系列教程之Hello,Apple Watch!

        本文链接:https://www.haomeiwen.com/subject/jqyqdttx.html