WatchKit 사용자 정의 UI 구현 방법의 요약

왓치키트는 매우 제한된 API만나자마자 오랜 친구 같다만 준비했다.하지만 한번 시도해 보면 유한한 반을 잘 사용할 수 있다면의외로 할 수 있는 게 많아요..
이 기사는 각종 맞춤형 UI 제작 방법을 수시로 정리하고 싶어 한다.

원형 표시기 UI/애니메이션

애플의 Interface Guide에 게재된 UI

Core Graphics와 UIBezierPath를 사용하여 Watch App에서 동적으로 그릴 수 없어서 유감입니다.
그렇다면 어떻게 할지는 애플의 공식 샘플'리스터'가 정답을 보여줬다.

이 Asset Catallog의 Square를 보니 애플도 일반적인 연호 애니메이션으로 이루어진 것 같다.
swift

self.circularProgressImage.setImageNamed("progress-")
self.circularProgressImage.startAnimatingWithImagesInRange(
    NSMakeRange(0, 359),
    duration: 2.0,
    repeatCount: 0)

(360개의 일련 번호 이미지 애니메이션 사용)

동적 리소스를 사용한 애니메이션

왓치키트 앱 쪽에 넣은'Static'리소스의 애니메이션setImageNamed:과 startAnimatingWithImagesInRange:을 사용하면 고속 애니메이션이 가능하지만, 왓치키트 앱의 Asset Catallog에 없는'다이너믹'리소스를 사용하는 경우

프레임당 UIImage를 생성하여 WKinter faceImagesetImage에서 전송

NSTimer로 회전

swift

// NGパターン
func onUpdate(timer: NSTimer) {

    let fileName = String(format: "frame_%d", self.currentIndex)
    let image = UIImage(named: fileName)
    self.image.setImage(image)

    self.currentIndex = currentIndex < kNumberOfFrames - 1 ? currentIndex + 1 : 0
}

이렇게 하면 공연이 매우 나빠질 것이다.

나는 전송인지 그림인지 모르겠지만, 전혀 늦었다.
그러면 현금 캐시를 사용하는지 아닌지, 모든 프레임의 이미지 캐시를 프로그래밍 안내서에 명기하는 것을 추천하지 않는다(※ 캐시 애니메이션 자체는 문제가 되지 않는다).
프로그래밍 안내서에 표시된 정답은 "Animated Image"방법을 사용하는 것입니다.
swift

var images: [UIImage] = []
for var i=0; i<kNumberOfFrames; i++ {
    let fileName = String(format: "yusha_%d", i);
    let image = UIImage(named: fileName)
    images.append(image!)
}
let animatedImage = UIImage.animatedImageWithImages(
    images,
    duration: duration)
self.image.setImage(animatedImage)
self.image.startAnimating()

UIImageanimatedImageWithImages:duration:를 사용하여 Animated UIImage 객체를 생성한 후setImage:.

상당히 원활한 애니메이션.(그림의 크기에 따라 30fps는 괜찮을 것 같다는 느낌을 해봤습니다.※ 측정 코드가 준비되어 있어도 결과는 Extension 측의 성능만 측정할 수 있기 때문에 Watch 측의 실측값을 알 수 없습니다.)

사용자 정의 글꼴

iOS와 동일한 단계에 따라 수행할 수 있습니다.

WatchKit Apps 번들에 글꼴 파일 넣기

WatchKit App의 Info.plist 편집

인터페이스 덮어쓰기

WKINterfaceObject는 UIView의 subview에서 인터페이스를 중첩할 수 없습니다.
그러면 인터페이스 구성 UI를 덮어쓸 수 없다고 해도 그렇지 않다. WKINterface Group으로 설정할 수 있는 배경 이미지setBackgroundImage:를 이용하면 된다.

위 이미지에서 배경 이미지는 WKINter faceLabel과 여러 WKINter faceImage를 중첩합니다.

origin 조정

WKINterfaceObject에는 (UIView에서)frame.origin 성질의 속성이 없습니다.UIEdgeInsets 같은 것도 없습니다.
하지만 여기서도 WKINterface Group을 활용하여 가상의 WKINter face Object 자반을 이용하여 이윤을 창출할 수 있어 잘 조정할 수 있다.

사방

WKInterfaceGroup에는 setCornerRadius:라는 방법이 있다.IB라면 Radius 열에서 설정할 수 있습니다.
그림을 각환으로 설정하려면 WKInterfaceImage를 WKInterfaceGroup에 넣으십시오.

테이블 셀 높이 수정하기

일반적으로 내용의 높이에 따라 결정된다.

38mm와 42mm로 배치 설정

IB의 + 버튼을 사용하여 설정할 수 있습니다.Size Class 와 같은 방식으로 분류됩니다.

Xcode 6 시대의 다중 장치 대응 ~ Size Class 및 벡터 이미지 ~

화면이 n등분되도록 Interface 객체 설정

IB에서 Relative to Container의 배율을 설정할 수 있습니다(기본값은 1).

사용자 인터페이스 사용자화

IB의 중심을 "Group"으로 전환(기본값은 "Text")

Apple Watch 표준 로드 애니메이션

애니메이션을 불러오거나 애플이라면 Activity Indicator인데 워치키트는 이런 API를 제공하지 않은 것으로 알려져 있다.최대한 시간을 들여 처리하지 말라는 말인 것 같습니다.

uiactivityindicatorview - Is there an ActivityIndicator in WatchKit for Apple Watch? - Stack Overflow

하지만 역시 앱을 만들 때 이런 장면이 필요하다면 WKINterfaceImage(그리고 WKINterfaceGroup)에 애니메이션을 연재하게 된다.누군가가 친절하게 나를 도와 닉네임 워치 표준의 애니메이션으로 편집한 연호 이미지를 다운로드했다.

Make Animations for WATCH Using iPhone

0.8 정도 duration이 딱 맞는 것 같아요.

테이블에서 여러 셀 사용

(WKinter faceTable에서 "Cell"이라는 표현이 없고 "row"라고만 할 수 있지만 일단 말하지 않음) 이렇게 여러 개의 Row Controller를 만들었어요.

이런 느낌setRowTypes으로 사용하는 단원의 row name(Row Controller의identifier) 목록을 교부하면

let rowTypes = [
    "LabelCell",
    "LabelCell",
    "SwitchCell",
    "SwitchCell",
]
table.setRowTypes(rowTypes)

이렇게 하면 여러 개의 칸을 사용하는 표를 실현할 수 있다.

(계속)

수시로 예약을 갱신하세요!

참고 문장

WatchKit의 다양한 실제 인증

왓치킷을 실제로 접해보니'iOS 올스타 학습회'#dotsios-Over & Out 이후

1분 이내의 Apple Watch 애플리케이션 & WatchKit 전체 API 설명