[iOS] Watch : 이미지 크기 변경 및 적용

애플워치에 이미지를 넣는 것입니다.

워치키트앱의 왼쪽메뉴의 'Assets.xcassets'를 클릭하면 아래화면이 나옵니다.

오른쪽 속성 인스펙터에서 그림처럼 ' Screen Width'를 38mm and 42mm로 조정하면, 각각의 크기에 맞게 이미지를 넣을 수 있습니다.

또한 Devices 가 Universial로 되어 있으면, Apple Watch로 선택합니다. 아래 캡쳐한 이미지 위오른쪽 부분인데 반쯤 짤렸네요. 

탐색창에서 파일을 그냥 끌어다 왼쪽에 넣고, 오른쪽에서 네모 상자 안에 이미지를 넣습니다.

다음, 오브젝트 라이브러리에서 Image를 선택하고 끌어다 놓습니다.

이미지를 메뉴판 아래에 놓고, 속성에서 Image를 아까 올려놓은 '피자'를 기본 이미지로 선택합니다.

프로그램으로 이미지를 변경할 경우, 네이게이터(왼쪽 부분)의 세번째 디렉토리의 'Assets.xcassets'에 이미지를 올려 놓습니다. (메뉴판에 나올 이미지를 아까와 같이 드래그해서 올려 놓습니다)

Suppose you wanted to change the pizza image by clicking one of the buttons. If you call for an image in the Watch Kit extension, it must be loaded in the extension assets, not the apps.

다시, 스토리 보드로 와서 메뉴판 안의 이미지 크기를 조정하고, 

(이미지 값을 선택할때 애스펙트 핏과, 애스펙트 필의 설명입니다. : Set the mode to Aspect Fit, which preserves the aspect ratio of the image by scaling it to fit the image view. This shrinks the image. I prefer a bigger image. Selet Aspect Fill, which zooms in to keep the aspect ratio. You can add background images to other objects, such as buttons.)

버튼 메뉴도 이미지로 바꿔 봅니다. 각 버튼을 눌렀을때 그 이미지가 크게 나오게 할 것입니다.

피자, 파스타, 케익에 동일하게 적용합니다.  사이즈를 Fixed 또는 '콘텐츠에 맞게(Size To Fit Content)' 등으로 적절히 조정합니다.

이제 어시스턴트 에디터 버튼을 눌러 두개의 화면이 보이게 하고,

이미지와 3개의 버튼을 소스와 연결합니다.

각 버튼은  Action으로 연결합니다. 이름은 didPressedPizza와 같이 변경...

소스를 아래와 같이 넣습니다. 

[소스]

//  InterfaceController.swift

//

import WatchKit

import Foundation

class InterfaceController: WKInterfaceController {

    @IBOutlet var image: WKInterfaceImage!

    @IBAction func didPressPizza() {

        image.setImage(#imageLiteral(resourceName: "pizza"))  //여기서 #imageLiteral(resourceName:) 부분이 소스에서는 그림으로 보여짐  ios8 부터

    }

    

    @IBAction func didPressPasta() {

        image.setImage(#imageLiteral(resourceName: "pasta"))

    }

    @IBAction func didPressCake() {

        image.setImage(#imageLiteral(resourceName: "cake"))

    }

}