watchOS ) Table구성하는 법

 

안녕하세요 :) Zedd입니다.

watchOS 개발중인데...어렵네요;;

Table구성하는 법을 정리해보려고 합니다.

SwiftUI로 했으면 엄청 쉬웠을텐데ㅠㅠ...

 

1. 테이블 추가

 

2. 지정된 InterfaceController에 IBOutlet 연결

@IBOutlet weak var settingsTable: WKInterfaceTable!

iOS에서는 UITable"View" 였지만..watchOS에서는 ~View이런식으로 안붙는듯 하다.

그래서 이름도 그냥 ~table로 지어줌.

 

3. Row Controller.swift파일을 만들고, Low Controller 정의.

import WatchKit
import Foundation

class SettingsLowController: NSObject {
    
}

 

4. Table Row Controller에 Custom class 지정

Table Row Controller를 누르고 오른쪽 Identity Inspector에 보면

이런게 있는데, 3번에서 정의한 Row Controller를 넣어준다.

 

5. Identifier지정.

그대로 Attribute Inspector로 이동해

Identifier를 지정해준다.

나는 그냥 클래스 이름 그대로 넣은거임.

 

6. 데이터 준비

var arr: [String] = ["Zedd", "Alan Walker", "Martin Garrix", "Marshmello", "Don Diablo", "Kygo"]

일단은 static하게 준비하겠음.

 

7. row개수 지정

var arr: [String] = ["Zedd", "Alan Walker", "Martin Garrix", "Marshmello", "Don Diablo", "Kygo"]

override func awake(withContext context: Any?) {
    super.awake(withContext: context)
    self.setupTable()
}

func setupTable() {
    self.settingsTable.setNumberOfRows(self.arr.count, withRowType: "SettingsLowController")
}

iOS처럼 Delegate나 Datasource가 없다. 

setNumberOfRows로 count를 지정해주고 withRowType에는 아까 지정한 Identifier를 넣으면 된다.

 

8. 빌드

 

9. Row에 UI 요소 추가

 

10. 추가한 UI 요소에 대한 IBOutlet 추가

3번에서 만든 SettingsLowController에 추가해준다!!!

 

11. LowController에 데이터를 받고 하고싶은 로직 추가

나는 String을 받아서 Label에 넣어주고 싶으므로

class SettingsLowController: NSObject {
    
    @IBOutlet weak var titleLabel: WKInterfaceLabel!
    
    func configure(text: String) {
        self.titleLabel.setText(text)
    }
}

이렇게 해준다.

 

12. 다시 ~InterfaceController에 돌아와서 RowController에 데이터 넘겨주기

아까 setupTable에 

func setupTable() {
    self.settingsTable.setNumberOfRows(self.arr.count, withRowType: "SettingsLowController")
    
    for index in 0..<self.settingsTable.numberOfRows { ✅
      guard let controller = self.settingsTable.rowController(at: index) as? SettingsLowController else { continue }
        controller.configure(text: self.arr[index])
    }
}

요 코드를 추가해준다. 

Delegate이런게 없어서 전부 이런식으로 하는 듯 하다.

 

13. 빌드

 

여기까지 다 하고...이 리스트를

carousel 스타일로 만들고 싶었다.

당연히 SwiftUI가 아닌...그냥 WatchKit만 이용해서 될 줄 알았는데, 위에건 SwiftUI에서만 되나보다............

ㅎ ㅏ...

이 화면은 SwiftUI로 만들어서 붙혀야할 듯 ㅎ.....