watchOS 2教程(一):开始吧

2024-01-07 05:08
文章标签 教程 watchos

本文主要是介绍watchOS 2教程(一):开始吧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

67.png

本文是投稿文章，译者：Swift_波（简书）
原文地址

这一年的WWDC大会上,苹果公司推出了watchOS 2,这标志着Apple Watch的开发产生了巨大的变化。现在,你可以开发能运行在你手表上原生的app了。 在这篇watchOS 2教程中,你会开发一个简单但是功能齐全的watchOS 2的app。

在这个过程中,你会学到:

  • 如何为iOS app添加watchOS 2的target

  • 如何在两个target之间共享数据

  • 如何添加一个watchOS 2界面控制器到Storyboard,并放置界面对象

  • 如何创建WKInterfaceController的子类并连线

正式开始吧

首先下载教程的起始项目吧。

在Xcode中打开它然后编译运行。你应该会看到一个空白界面:

1.png

这个项目没有太多的文件,只包含一些你需要的最基本的文件。

添加WatchKit App

选择File\New\Target…,在出现的对话框中选择watchOS\Application\WatchKit App然后点击Next:

2.png

在接下来的界面中,设置项目名字为Watch,确保语言设置为Swift,然后取消选中任何复选框。点击Finish:

1447749262966004.png

之后会询问你是否想要激活watch scheme,你需要这么做,所以确保选择了激活:

blob.png

祝贺,你刚刚创建了你的第一个手表app!这真的很容易。

你会注意到,这个操作实际上创建了两个target,而不是一个,在项目导航中看到两个对应的组。这是因为手表app的代码实际是作为一个扩展形式存在的,类似iOS上的Today extensions。

当你在项目导航中点开Watch和Watch Extensions组的时候,你会看到所有storyboard放在Watch组,当前target创建的所有的类文件放在Watch Extensions组中:

blob.png

你需要遵循如下的原则:任何你添加的代码必须放在Watch Extension组中然后添加到Watch Extension target,而所有的assets或者storyboards需要放在Watch组里。

小家务

在继续前,你需要删掉一些target模板添加的你不需要的文件。

在项目导航里面右键点击InterfaceController.swift然后选择删除。 当弹出提示,选择Move to Trash来确保文件确实从项目中删掉了:

blob.png

下一步,打开Interface.storyboard,选择其中仅有的界面控制器,按下backspace键来删除它。现在就剩下一个空storyboard,或者是我认为的,一个空白画布。

共享数据和代码

起始项目包含一个记录所有Aber航空公司航班信息的JSON文件,一个模型类表示飞行数据。这正是应该共享的数据,因为iOS app和手表app使用相同的模型类和数据-你记得DRY(不要写重复的代码)原则吗?

在项目导航中点开Shared组然后选择Flights.json。之后,在File Inspector中找到Target Membership区域,选中Watch Extension

blob.png

文件现在应该被AirAber和Watch Extensions这两个target所包含。 为其他Shared组的文件重复这个步骤,比如说Flight.swift。 这些都做完后,你可以开始开发航班详情界面了!

构造界面

打开 Watch\Interface.storyboard,从对象库拖一个界面控制器到storyboard里面.选中这个界面控制器,打开属性检查器设置它的Identificer为Flight,然后勾选Is Initial Controller:

44.png

你设置的这个Identifier让你可以在代码中引用这个界面控制器。选中Is Initial Controller简单告诉WatchKit你希望当应用程序启动的时候首先显示这个界面。

下一步,从对象库中拖动一个组到界面控制器:

43.png

之后这个组会包含Aber公司的logo,航班号和路线。

选中这个组,在属性检查器的顶部改变它的Insets为Custom。这会显示四个额外的文本框让你可以手动的设置组的上下左右。设置Top为6:

e2.png

这仅仅让你的组到顶部有个额外的空隙。

下一步,拖动Image到组中。组会相应的收缩来改变Top inset(感谢Xcode!),之后在文档大纲中检查来确保Image是组的子节点,而不是同级:

e32.png

现在需要显示一张图片,下载logo图片然后把它拖动到Watch\Assets.xcassets中。这会创建一个新的logo图片,存放在2x的部分。

654.png

为了给图片染色,选中这张图片,在属性检查器中修改Render As为Template Image。

重新打开 Watch\Interface.storyboard 选中之前的image.使用属性检查器,做如下的改变:

  • 设置图片为Logo - 当下拉列表没有出现,你可以自己输入;

  • 设置Tint为#FA114F(也可以在颜色面板中输入值);

  • 设置Width为Fixed,值为40;

  • 设置Height为Fixed,值为40。

属性检查器现在应该像下面这样:

blob.png

不要担心看不到logo,因为Xcode设计时无法给模板图片染色!

下一步,往已经存在的组中拖动另外一个组,确保它出现在image的右侧,使用属性检查器设置Layout属性为Vertical.同样修改Spacing为0、Width为Size to Fit Content。然后拖动两个label到新的组中,放置一个到另一个的下面。

1.png

选择上面的label,使用属性检查器,设置文本为Flight 123,文字颜色为#FA114F。

选择下面的label,设置文本为MAM to SFO。界面控制器最后看起来像下面这样:

2.png

这些文本仅仅充当占位符,之后会被控制器中设置的文本取代。

下一步,拖动另一个组到界面控制器中,但是这次确保与第一个组同级。当不能设置组级别关系请使用文档大纲(Document Outline)。

3.png

选中新的组,设置它的Layout为Vertical、Spacing为0。

现在,拖动三个label到新的组中:

4.png

确保label都在group中,而不是与group同级!

选择顶部的label使用属性检查器修改它的文本为AA123 Boards。

选中中间的label,修改文本颜色为#FA114F,字体选择System,Regulaer样式和54.0的size.最后,修改Height为Fixed,值是44。

选中底部的label修改文本为On time,文本颜色为#04DE71。 你的界面控制器应该现在像下面这样:

blob.png

从对象库中拖动一个新的组到下面的组,这次确保它是在子节点而不是在同级,之后向其中添加两个label,你完全的界面对象关系应该像这样:

6.png

使用属性检查器,设置左边的label文本为Gate 1A。右边的label设置为Seat 64A,之后设置它的Horizontal alignment为Right 完全的界面应该像如下这样:

7.png

恭喜,你已经完成你的第一个watch app界面的布局了,现在是时候给它填充一些真实的数据然后在模拟器上运行。

创建控制器

在项目导航中右击Watch Extensions组,选择New File,在出现的对话框中选择watchOS\Source\WatchKit Class然后点击Next。命名新的类为FlightInterfaceController,确保它为WKInterfaceController的子类,语言设置为Swift:

8.png

点击Next,之后是Create

可以看到新的文件在代码编辑器中打开了,删除其中的三个空方法,只剩下import语句和类定义。

添加这些Outlets到FlightInterfaceController的顶部:

1
2
3
4
5
6
7
@IBOutlet  var  flightLabel: WKInterfaceLabel!
@IBOutlet  var  routeLabel: WKInterfaceLabel!
@IBOutlet  var  boardingLabel: WKInterfaceLabel!
@IBOutlet  var  boardTimeLabel: WKInterfaceLabel!
@IBOutlet  var  statusLabel: WKInterfaceLabel!
@IBOutlet  var  gateLabel: WKInterfaceLabel!
@IBOutlet  var  seatLabel: WKInterfaceLabel!

这里仅仅为之前的每个label添加一个Outlet。稍后会把他们连接起来。

下一步,在outlets下面添加flight属性和对应的属性观察器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 1
var  flight: Flight? {
   // 2
   didSet {
     // 3
     if  let flight = flight {
       // 4
       flightLabel.setText( "Flight \(flight.shortNumber)" )
       routeLabel.setText(flight.route)
       boardingLabel.setText( "\(flight.number) Boards" )
       boardTimeLabel.setText(flight.boardsAt)
       // 5
       if  flight.onSchedule {
         statusLabel.setText( "On Time" )
       }  else  {
         statusLabel.setText( "Delayed" )
         statusLabel.setTextColor(UIColor.redColor())
       }
       gateLabel.setText( "Gate \(flight.gate)" )
       seatLabel.setText( "Seat \(flight.seat)" )
     }
   }
}

会一步步讲解发生的事情:

1.你定义了一个可选的属性类型为Flight。这个类在Flight.swift中定义;

2.你添加了一个属性观察器,当属性设值时候会触发它;

3.在可选属性中确保有一个真的flight而不是nil,当flight存在才会去设置labels的值;

4.使用flight的相关属性去设置labels

5.如果航班被延误，那么你就将标签的文本颜色改为红色

在控制器第一次显示时候设置航班。添加以下声明：

1
2
3
4
override func awakeWithContext(context: AnyObject?) {
   super .awakeWithContext(context)
   flight = Flight.allFlights().first!
}

本后面的教程会修改为在上下文中传递值给它,但现在你只需要从共享的JSON文件中加载所有的航班,然后使用数组中的第一个。

在后面的教程你将学到更多关于awakeWithContext（_：)的知识,但是现在你仅仅需要知道它是界面控制器生命周期第一环节,一个设置flight值的地方。 现在仅剩最后一步你就可以编译运行了,就是去连接outlets

连接outlets

打开 Watch\Interface.storyboard 选择界面控制器,使用Identity Inspector,设置Class\Custom Class为FlightInterfaceController

下一步,右击界面控制器顶部的黄色图片弹出窗口:

9.png

现在,按下面的列表连接outlets:

  • boardingLabel: AA123 Boards

  • boardTimeLabel: 15:06

  • flightLabel: Flight 123

  • gateLabel: Gate 1A

  • routeLabel: MAN to SFO

  • seatLabel: Seat 64A

  • statusLabel: On time

在运行之前,有一件事情要做。本教程的实例app专为42mm的Apple Watch开发的,所以你需要确保正确设置了模拟器,否则界面元素看起来会有点小。对于一个现实app,需要确保界面能很好运行在两种大小的手表上,但这在本教程的范围之外。

在Xcode中,选择Window\Devices打开设备管理器,点击右下角的 + 图标.在弹出的对话框中,命名模拟器为iPhone 6 - 42mm,设置设备类型为iPhone 6,修改配对的Apple watch为Apple Watch - 42mm (WatchOS 2.0)然后点击Create:

10.png

关闭设备管理器,选择Watch Scheme,然后选中新的模拟器:

11.png

编译运行。一段模拟器启动完成你会看到下面界面:

12.png

注意:如果收到一条错误消息,说明安装失败,然后你可以再次尝试使用Xcode,或者在手表模拟器上手动安装app。为此,打开iOS模拟器中的手表app,点击AirAber,在Apple Watch弹出我们的app。一旦这么做了,返回手表模拟器,按Shift + Ctrl + H导航到主界面, 然后点击AirAber图片来启动手表app。

恭喜!你已经完成WatchKit初始界面,并使用真实的数据使它很好运行在手表模拟器上。

稍后会做什么?

下面是这个系列教程完整示例项目。

在这个练习中你已经学会了如何往现有的iOS app中添加手表app，如何创建一个界面控制器和使用嵌套组构造一个非常复杂的界面，以及使用WKInterfaceController类来配合这项工作。那么，接下来呢？

本教程系列的第二部分，你将学习所有关于表和导航WatchKit的使用。

参考:

1. watchOS 2教程(一):开始吧

2. watchOS 2 Tutorial Part 1: Getting Started

这篇关于watchOS 2教程(一):开始吧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/578810。

相关文章

Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
Linux系统中卸载与安装JDK的详细教程

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1
阅读更多...
Linux卸载自带jdk并安装新jdk版本的图文教程

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa
阅读更多...
Java使用Curator进行ZooKeeper操作的详细教程

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3
阅读更多...
springboot简单集成Security配置的教程

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》：本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig（自定义资源权限规则
阅读更多...
MySQL Workbench 安装教程(保姆级)

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言：详细步骤：一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本，要是
阅读更多...
通过Docker Compose部署MySQL的详细教程

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基
阅读更多...
Linux安装MySQL的教程

Linux安装MySQL的教程

《Linux安装MySQL的教程》：本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2