技术控

    今日:36| 主题:57635
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] watchOS 3 Tutorial Part 1: Getting Started

[复制链接]
又何必自找失落╮ 投递于 2016-10-4 23:19:08
498 6
Update Note: This tutorial has been updated to Swift 3/watchOS 3 by Audrey Tam. The original tutorial was written byMic Pringle.
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-1-技术控-The,and,you,to,interface

  In this watchOS 3 Tutorial, you’ll build a simple but fully functional watchOS 3 app. Specifically, you will work on a watchOS app for a fictional airline called Air Aber.
  In the process, you’ll learn:
  
       
  • How to add a watchOS 3 target to an iOS app;   
  • How to share data across the two targets;   
  • How to add a watchOS 3 interface controller to the Storyboard, and lay out the interface objects; and   
  • How to create the WKInterfaceController subclass and wire everything up.  
  Let’s get started! ┗(°0°)┛
  Getting Started

   Start by downloading thestarter project for this tutorial.
  Open it in Xcode, and build and run. You should see a blank white screen:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-2-技术控-The,and,you,to,interface

  There’s not much to this project as it stands: it just includes a few helper files you’ll need, and not much else. You’ll address that now!
  Adding the WatchKit App

   Select File\New\Target… . In the dialog that appears, choose watchOS\Application\WatchKit App , then click Next :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-3-技术控-The,and,you,to,interface

   In the following screen, set Product Name to Watch , make sure Language is set to Swift , and uncheck any checkboxes that are checked. Click Finish :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-4-技术控-The,and,you,to,interface

   You’ll be asked if you want to activate the watch scheme, which you do, so make sure to choose Activate :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-5-技术控-The,and,you,to,interface

  Congratulations, you’ve just created your first watch app! It really is that easy.
  You’ll notice this action actually created two targets, not one, and two corresponding groups in the Project Navigator. This is because the code of a watch app actually runs as an extension bundled within the watch app, in much the same way Today extensions on iOS work.
   Expand the Watch and Watch Extension groups in the Project Navigator, and you’ll see that the storyboard resides in the Watch group, and the classes created by the target template reside in the Watch Extension group:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-6-技术控-The,and,you,to,interface

   This is the pattern you’ll follow moving forward. Any code you add must reside within the Watch Extension group and be added to the Watch Extension target, whereas any assets or storyboards need to be added to the Watch group.
  A Little Housekeeping

  Before continuing, you need to remove a couple of things added by the target template that you don’t need.
   Right-click on InterfaceController.swift in the Project Navigator and choose Delete . When prompted, choose Move to Trash to make sure the file is actually removed from the project:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-7-技术控-The,and,you,to,interface

   Next, open Interface.storyboard , select the only interface controller in there, and hit the delete key. This should leave you with an empty storyboard, or as I prefer to think of it, a blank canvas.
  Sharing Data and Code

   The starter project includes a JSON file containing all the Air Aber flight details, and a model class that represents that data. This is exactly the kind of thing that should be shared amongst targets, since it’s highly likely the iOS app and the watch app will use the same model class and data – you do remember DRY , right?
   Expand the Shared group in the Project Navigator and select Flights.json . Next, find the Target Membership section in the File Inspector , and check Watch Extension :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-8-技术控-The,and,you,to,interface

   The file should now be included in both the AirAber and Watch Extension targets.
   Repeat the process for the other file in the Shared group, Flight.swift .
  And with that done, you can finally begin building the flight details interface!
  Building the Interface

   Open Watch\Interface.storyboard , and drag an Interface Controller from the Object Library onto the storyboard canvas. With the interface controller selected, open the Attributes Inspector, and set Identifier to Flight , and check Is Initial Controller . Uncheck Display Activity Indicator When Loading :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-9-技术控-The,and,you,to,interface

   You set the identifier so you can refer to the interface controller in code. Checking Is Initial Controller simply informs WatchKit this is the interface controller you want to display when the watch app first launches. This interface doesn’t download any data, so it doesn’t need to display the activity indicator.
   Next, drag a Group from the Object Library onto the interface controller:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-10-技术控-The,and,you,to,interface

  Although it doesn’t look much now, this group will eventually contain the Air Aber logo, flight number, and route.
   With the new group selected, head over to the Attributes Inspector and change Insets to Custom . This will reveal four extra text boxes where you can manually set the insets for the top, bottom, left, and right of the group. Change Top to 6 :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-11-技术控-The,and,you,to,interface

  This just gives the layout group a little extra padding at the top.
   Next, drag an Image into the group. If your group shrank in response to changing the Top inset ( thanks Xcode! ), drag the image into the Document Outline instead, making sure it’s a child of the group, rather than a sibling:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-12-技术控-The,and,you,to,interface

   Now you need an image to display. Downloadthis logo image and drag it into your Watch\Assets.xcassets . This should create a new image set called Logo, with the actual image in the 2x slot:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-13-技术控-The,and,you,to,interface

   You want to tint this image, so select the image, then in the Attributes Inspector, change Render As to Template Image .
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-14-技术控-The,and,you,to,interface

   Re-open Watch\Interface.storyboard and select the Image . Using the Attributes Inspector, make the following changes:
  
       
  • Set Image to Logo – if it doesn’t appear in the dropdown, you can simply type it;   
  • Set Tint to #FA114F (you can type this in the Color RGB Sliders panel);   
  • Set Width to Fixed , with a value of 40 ;   
  • Set Height to Fixed , with a value of 40 .  
  The Attributes Inspector should now look like the following:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-15-技术控-The,and,you,to,interface

  Don’t worry if you can’t see the logo, as it turns out that Xcode doesn’t tint template images at design time!
   Next, drag another Group into the existing group, making sure it appears to the right of the image, and set its Layout to Vertical using the Attributes Inspector. Also, change Spacing to Custom\0 and Width to Size to Fit Content . Next, drag two Labels into the new group, positioning one underneath the other:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-16-技术控-The,and,you,to,interface

   Select the upper label and, using the Attributes Inspector, set Text to Flight 123 and Text Color to #FA114F .
   Next, select the lower label, and set its Text to MEL to SFO . Your interface controller should now look like the following:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-17-技术控-The,and,you,to,interface

  This text is simply placeholder text that’ll be replaced when you hook the interface up to its controller class.
   Next, drag another Group onto the interface controller, but this time make sure it’s a sibling of the very first group you added. If you can’t get the group positioned at the correct place in the hierarchy use the Document Outline instead.
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-18-技术控-The,and,you,to,interface

   With this new group selected, set its Layout to Vertical and Spacing to 0 .
   Next, drag three Labels into this new group:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-19-技术控-The,and,you,to,interface

   Make sure the labels are inside the group, not siblings of the group!
   Select the top label and use the Attributes Inspector to change its Text to AA123 Boards .
   Next, select the middle label, and change its Text to 15:06 . Next, change Text Color to #FA114F and Font to System , with a Style of Regular and a Size of 54.0 . Finally, change Height to Fixed , with a value of 44 .
   Select the bottom label, and change its Text to On time and Text Color to #04DE71 .
  Your interface controller should now look like the following:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-20-技术控-The,and,you,to,interface

  You’ve now just one more group to add before you can create the outlets, and have this interface display some real data.
   Drag a new Group from the Object Library into the lower group, this time making sure it’s a child rather than a sibling, and that it’s positioned at the very bottom of the containing group. Next, add two Labels to it. Your complete interface object hierarchy should now look like this:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-21-技术控-The,and,you,to,interface

   Using the Attributes Inspector, set Text to Gate 1A for the left label. For the right label, set Text to Seat 64A and set the Horizontal alignment to Right .
  The completed interface should now look like the following:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-22-技术控-The,and,you,to,interface

  Congratulations, you’ve finished laying out your very first watch app interface. Now it’s time to populate it with some real data and get it up and running in the simulator.
  Creating the Controller

   Right-click on the Watch Extension group in the Project Navigator, and choose New File… . In the dialog that appears, select watchOS\Source\WatchKit Class and click Next . Name the new class FlightInterfaceController , making sure it’s subclassing WKInterfaceController and Language is set to Swift :
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-23-技术控-The,and,you,to,interface

   Click Next , and then Create .
  When the new file opens in the code editor, delete the three empty method stubs, so you’re left with just the import statements and the class definition.
   Add the following outlets to the top of FlightInterfaceController :
   
  1. @IBOutlet var flightLabel: WKInterfaceLabel!
  2. @IBOutlet var routeLabel: WKInterfaceLabel!
  3. @IBOutlet var boardingLabel: WKInterfaceLabel!
  4. @IBOutlet var boardTimeLabel: WKInterfaceLabel!
  5. @IBOutlet var statusLabel: WKInterfaceLabel!
  6. @IBOutlet var gateLabel: WKInterfaceLabel!
  7. @IBOutlet var seatLabel: WKInterfaceLabel!
复制代码
   Here, you’re simply adding an outlet for each of the labels you added to the interface earlier. You’ll hook them up in just a moment.
  Next, add the following property and property observer just below the outlets:
   
  1. // 1
  2. var flight: Flight? {
  3.   // 2
  4.   didSet {
  5.     // 3
  6.     guard let flight = flight else { return }
  7.     // 4
  8.     flightLabel.setText("Flight \(flight.shortNumber)")
  9.     routeLabel.setText(flight.route)
  10.     boardingLabel.setText("\(flight.number) Boards")
  11.     boardTimeLabel.setText(flight.boardsAt)
  12.     // 5
  13.     if flight.onSchedule {
  14.       statusLabel.setText("On Time")
  15.     } else {
  16.       statusLabel.setText("Delayed")
  17.       statusLabel.setTextColor(.red)
  18.     }
  19.     gateLabel.setText("Gate \(flight.gate)")
  20.     seatLabel.setText("Seat \(flight.seat)")
  21.   }
  22. }
复制代码
   Here’s the play-by-play of what’s happening:
  
       
  • You declare an optional property of type Flight . This class is declared in Flight.swift , which is part of the shared code you added to the Watch Extension target earlier;   
  • You add a property observer that is triggered whenever the property is set;   
  • You make sure there’s an actual flight rather than nil in the optional property. You only want to proceed with configuring the labels when you know you have a valid instance of Flight ;   
  • You configure the labels using the relevant properties of flight ;   
  • If the flight is delayed then you change the text color of the label to red.  
   Now you need to set flight when the controller is first shown. Add the following just below the declaration of flight :
   
  1. override func awake(withContext context: Any?) {
  2.   super.awake(withContext: context)
  3.   flight = Flight.allFlights().first
  4. }
复制代码
   Later in the series, you’ll change this implementation to use the context that’s passed to it, but for now, you simply load all the flights from the shared JSON file, and then take the first one from the array.
   You’ll also learn more about awake(withContext:) later in the tutorial, but for now, just know that it’s called early enough in the interface controller’s lifecycle to make it a great place to set flight .
  Now there’s just one final step before you can build and run, and that’s to connect the outlets.
  Connecting the Outlets

   Open Watch\Interface.storyboard and select the interface controller. Using the Identity Inspector, set Custom Class\CLASS to FlightInterfaceController .
  Next, use your favorite method to connect the outlets as per the list below:
  
       
  • flightLabel : Flight 123   
  • routeLabel : MEL to SFO   
  • boardingLabel : AA123 Boards   
  • boardTimeLabel : 15:06   
  • statusLabel : On time   
  • gateLabel : Gate 1A   
  • seatLabel : Seat 64A  
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-24-技术控-The,and,you,to,interface

  Before you hit run, there’s just one more thing to do. The sample app you’re building throughout this tutorial has been designed for the 42mm Apple Watch, so you need to make sure you have the correct watch simulator set up, otherwise some things may look a little off. For a real world app, you’d want to make sure your interfaces work equally well across both sizes of watch, but that’s outside the scope of this tutorial.
  Open the Watch scheme menu, and select one of the 42mm simulators:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-25-技术控-The,and,you,to,interface

  Build and run. Once the simulator has finished loading, you should see the following:
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-26-技术控-The,and,you,to,interface

   Note: If you receive an error message stating the installation failed, then you can either try again with Xcode, or manually install the app in the watch simulator. To do this, open the Watch app in the iOS simulator, tap on AirAber , and then flick Show App on Apple Watch to On . Once that’s done, jump back to the watch simulator, press Shift-Command-H to navigate to the home screen, and then tap the AirAber icon to launch the app.
  Congratulations! You’ve now finished implementing your very first WatchKit interface, and got it up and running in the watch simulator using real data — nice work. :]
  Where To Go From Here?

   Here is the finished example project from this tutorial series so far.
   In this exercise, you’ve learned how to add a watch app to an existing iOS app, how to create an interface controller and lay out a pretty complex interface using nested groups, and how to tie the whole thing together using a WKInterfaceController subclass. So, where to next?
  Part 2 of this tutorial series, of course! In Part 2, you’ll learn all about tables and navigation in WatchKit.
  If you have any questions or comments on this tutorial, please join the forum discussion below! :]
   

watchOS 3 Tutorial Part 1: Getting Started

watchOS 3 Tutorial Part 1: Getting Started-27-技术控-The,and,you,to,interface
If you enjoyed this tutorial series, you’d definitely enjoy our bookwatchOS by Tutorials.
  The book goes into further detail on making watchOS apps and is written for intermediate iOS developers who already know the basics of iOS and Swift development but want to learn how to make Apple Watch apps for watchOS 3.
   It’s been fully updated for Swift 3, watchOS 3 and Xcode 8 — get it on the raywenderlich.com store today!



上一篇:Want to Learn Web Design Basics? Start Here
下一篇:Why Can’t Physics and Math Agree on Deep Neural Networks?
草莓奶茶 投递于 2016-10-5 07:01:40
楼主,么么哒!
回复 支持 反对

使用道具 举报

lzxohgzxf 投递于 2016-10-8 02:39:48
为保住菊花,这个一定得回复!
回复 支持 反对

使用道具 举报

英杰 投递于 2016-10-15 11:05:59
呵呵。。。
回复 支持 反对

使用道具 举报

老米装饰工程a5 投递于 2016-11-6 15:55:22
夏天就是不好,穷的时候我连西北风都没得喝……
回复 支持 反对

使用道具 举报

网络秀秀 投递于 2016-11-15 10:22:08
不错 支持下
回复 支持 反对

使用道具 举报

不认真 投递于 2016-11-20 12:23:35
有钱的捧个钱场,没钱的回家拿钱捧个钱场。
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表