工欲善其事必先利其器某宪，watch中基本控件的學習是寫watch app的基石
WatchKit中的控件都繼承自WKInterfaceObject淀散，都以WKInterface開頭该镣。下面是apple watch 常用的控件：
source demo 傳送門：https://github.com/wongstar/AppleWatchDemo
WKInterfaceGroup--->Group watch常用的控件廓译，主要有水平和垂直兩個方向
WKInterfaceImage--->圖片
WKInterfaceMovie--->播放視頻相關
WKInterfaceLabel--->label 標簽
WKInterfacePicker --->時間選擇器
WKInterfaceTable--->table ui相關非常重要
WKInterfaceTimer--->timer時間
WKInterfaceSwitch--->switch選擇器
WKInterfaceSlider --->slider一般用在音量大小
WKInterfaceButton --->按鈕ui
WKInterfaceMap --->map地圖相關
WKInterfaceGroup使用
WKInterfaceGroup.png
如上圖所示：
- 從控件版面中拉2個Group控件到UI中，把它們重命名為Group1,Group2乙濒，然后分別拉2個button到Group1 Group2中
- 點擊Group1 設置Layout方向為Vertical ,里面的item直接的間距設置Spacing =11.加入button 1 和button 2加入Group容器中陕赃。
- 點擊Group2 設置Layout方向horizontal ,里面的item會水平排列。設置item直接的間距11 就直接調整Spacing
- 設置Group中item的寬高颁股，所以設置Width和Height為Fixed模式么库，然后填寫對應的寬高值。
WKInterfaceTable使用
首先查看下WatchOS 中WKInterfaceTable提供了哪些方法和屬性
open class WKInterfaceTable : WKInterfaceObject {
open func setRowTypes(_ rowTypes: [String]) // row names. size of array is number of rows
open func setNumberOfRows(_ numberOfRows: Int, withRowType rowType: String) // repeating row name----->必須要實現(xiàn)才能知道又多少rows
open var numberOfRows: Int { get }---->獲取有多少rows
open func rowController(at index: Int) -> Any? ---->必須實現(xiàn)遍歷每個row
open func insertRows(at rows: IndexSet, withRowType rowType: String)--->insert rows 到tableview中去
open func removeRows(at rows: IndexSet) ----->移除指定的row
open func scrollToRow(at index: Int) ------>滑動到指定的row
@available(watchOS 3.0, *)
open func performSegue(forRow row: Int) ---->watch os 3.0點擊之后跳轉
}
從storyboard UI控件區(qū)拉一個table到Interface中 如下圖所示
WKInterfaceTable.png
然后storyboard UI中table拉一個鏈接到TableController中甘有，然后產生一個table參數(shù)
@IBOutlet var table: WKInterfaceTable!
接下來新建一個Cell.swfit 文件
tableCell.png
如上圖所示：
- 新建一個名為TestTableCell.swfit文件.把tableview中的cell對應的Custom class指向該文件
- 加入WKInterfaceLabel 和WKInterfaceImage 2個對象到UI中诉儒，并且把這兩個鏈接指向TestTableCell中的兩個控件變量
TestTableCell.swfit 源碼如下：
class TestTableCell: NSObject {
@IBOutlet var leftTitle: WKInterfaceLabel!
@IBOutlet var icon: WKInterfaceImage!
var source:String?{
didSet{
leftTitle.setText(source);
icon.setImage(UIImage.init(named: "like.png"))
}
}
}
如上源碼所示設置了一個變量source，在tableviewcell中設置值更新對應的label和image
對應的ui 的controller 名稱為：TestTableInterfaceController具體source如下：
table.setNumberOfRows(sources.count, withRowType: "cellId")
for index in 0..<table.numberOfRows{
if let cell = table.rowController(at: index) as? TestTableCell {
cell.source=sources[index]//call cell source 更新UI
}
}
setNumberOfRows (sources.count, withRowType:"cellId")->設置有多少row 注意這里cellId要在storyboard 要設置在Row Controller屬性中Identifier設置為cellId
for index in 0..<table.numberOfRows -->遍歷sources中每個item
table.rowController(at: index) 設置cell相關參數(shù) index:為當前是第幾個row
cell.source=sources[index]//call cell source 更新UI
那tableview item點擊在watch os怎么處理呢亏掀？
- 第一種方式：通過storyBoard中拉線跳轉允睹，通過segue push方式跳轉到其他的Interface,傳值的時候需要在InterfaceController實現(xiàn)下面方法
override func contextForSegue(withIdentifier segueIdentifier: String) -> Any?
- 第二種方式:我們可以重寫實現(xiàn)InterfaceController中的如下方法，來處理Table的點擊事件
override func table(_ table: WKInterfaceTable, didSelectRowAt rowIndex: Int)
Audio Video 使用
- 調用系統(tǒng)播放控件
通過self.presentMediaPlayerControllerWithURL方法來調用系統(tǒng)控件來實現(xiàn)播放幌氮。如下面代碼：
let myBundle = NSBundle.mainBundle()
if let movieURL = myBundle.URLForResource("myMovie", withExtension: "mp4") {
self.movie.setMovieURL(movieURL)
self.presentMediaPlayerControllerWithURL(movieURL,
options: [WKMediaPlayerControllerOptionsAutoplayKey: true],
completion: { (didPlayToEnd : Bool,
endTime : NSTimeInterval,
error : NSError?) -> Void in
if let anErrorOccurred = error {
// Handle the error.
}
// Perform other tasks
})
}
畫面UI見下圖：
movie界面.png
- 通過WKInterfaceMovie控件
WKInterfaceMovie 對象是播放video 和audio控件,：
open class WKInterfaceMovie : WKInterfaceObject {
open func setMovieURL(_ URL: URL)//把Video or Audio url的放入其中
open func setVideoGravity(_ videoGravity: WKVideoGravity) // default is WKVideoGravityResizeAspec
//AVLayerVideoGravityResizeAspectFill： 這可以保留縱橫比缭受，但填滿可用的屏幕區(qū)域，裁剪視頻必要時
open func setLoops(_ loops: Bool)//是否循環(huán)播放
open func setPosterImage(_ posterImage: WKImage?)//設置封面
}
Gravity的可以如下：
public enum WKVideoGravity : Int {
case resizeAspect //
case resizeAspectFill //全部平鋪
case resize //實際size
}
從storyBoard拉根線到TestMapInterfaceController.swift
@IBOutlet var myMovie: WKInterfaceMovie!
let moviePath=Bundle.main.path(forResource: "minion", ofType: "mp4")
if moviePath == nil{
return ;
}
let url = URL(fileURLWithPath:moviePath!)
if url == nil{
return;
}
self.myMovie.setMovieURL(url)//設置url
self.myMovie.setLoops(true)//設置循環(huán)播放
self.myMovie.setPosterImage(WKImage.init(imageName: "like.png"))//設置開始的封面
self.myMovie.setVideoGravity(WKVideoGravity.resizeAspect)//設置video播放的大小
得出下面的UI
視頻.gif
- Play Local Audio file
通過WKAudioFilePlayer播放本地的mp3文件,通過WKAudioFileQueuePlayer 可以循環(huán)播放列表
audio_file.png
想隨時了解我的動態(tài)该互，請關注我的個人公眾號
蟻農之家.jpg
