本文章是一个系列,如果有兴趣可以看看以下文章:
AppleWatch开发入门(1)——界面布局
AppleWatch开发入门(2)——代码交互、控制器生命周期、界面跳转
AppleWatch开发入门(3)——Table视图的应用
AppleWatch开发入门(4)——Picker视图的应用
AppleWatch开发入门(5)——Menu的使用
AppleWatch开发入门(6)——watchOS中通知的应用
AppleWatch开发入门(7)——AlertController
AppleWatch开发入门(8)——动画
一、简介
Picker 到底是个什么东西?如下图所示:
Picker 有 3 种模式:List、Stack、Sequence:
- List:有点像 tableview,一行一行展示
- Stack:有点像图片浏览器,一页一页展示,翻动时有动画效果
- Sequence:与 Stack 类似,只不过翻动时没有动画效果
二、创建Picker
在 storyboard 中拖入 Picker:
因为Picker有3种模式(List、Stack、Sequence),我们每种模式弄一个:
三、代码部分
工欲善其事,必先利其器,呃,必先看头文件:
@available(watchOS 2.0, *)
public class WKInterfacePicker : WKInterfaceObject {
// 设置聚焦,有点像becomeFirstResponder
public func focus()
// 失去聚焦,有点像resignFirstResponder
public func resignFocus()
// 改变选中的索引
public func setSelectedItemIndex(_ itemIndex: Int)
// 设置Picker中的内容
public func setItems(_ items: [WKPickerItem]?)
public func setCoordinatedAnimations(_ coordinatedAnimations: [WKInterfaceObject]?)
public func setEnabled(_ enabled: Bool)
}
@available(watchOS 2.0, *)
public class WKPickerItem : NSObject, NSSecureCoding {
// 设置文字,仅当Picker是'List'时有效.
public var title: String?
// Caption to show for the item when focus style includes a caption callout.
public var caption: String?
// 设置title前面的小图片,仅当Picker是'List'时有效,图片大小固定是13×13pt。
@NSCopying public var accessoryImage: WKImage?
// 大图
@NSCopying public var contentImage: WKImage?
}
具体实现
1、 Pick 中的数据源是 WKPickerItem,先懒加载[WKPickerItem]
lazy var items: [WKPickerItem] = {
var its = [WKPickerItem]()
for i in 0...4 {
let item = WKPickerItem()
item.title = "Title" + "\(i)"
item.caption = "Caption" + "\(i)"
item.accessoryImage = WKImage(image: UIImage(named: "ad_0" + "\(i)")!)
item.contentImage = WKImage(image: UIImage(named: "ad_0" + "\(i)")!)
its.append(item)
}
return its
}()
这里图片资源大家根据实际需求添加,加载图片时要特别注意,否则可能加载不出,详细见:AppleWatch开发(1)——界面布局 这篇文章的末尾部分。
2、 连线
@IBOutlet var listPicker: WKInterfacePicker!
@IBOutlet var stackPicker: WKInterfacePicker!
@IBOutlet var sequencePicker: WKInterfacePicker!
3、 设置数据
override func awake(withContext context: Any?) {
super.awake(withContext: context)
listPicker.setItems(items)
stackPicker.setItems(items)
sequencePicker.setItems(items)
sequencePicker.focus()
}
这里要注意,在有多个Picker时,需要设置focus()
,不然系统不知道你要滚动哪一个。