Apple watchOS에서 PDF 이미지 자동 크기 조정

이 게시물에서는 자동 크기 조정 PDF 이미지와 watchOS 프로젝트에 이미지를 추가하는 방법에 대해 설명합니다.

PDF 형식을 사용하면 다양한 크기에서 흐릿하게 보이지 않고 이미지를 확장할 수 있습니다. 이 형식은 벡터 아트웍에 가장 적합합니다. 아이콘을 생각합니다. Inkscape , Adobe Illustrator 및 Vectornator 과 같은 프로그램은 PDF 이미지를 내보낼 수 있습니다.

PDF 이미지 디자인에 대한 자세한 내용은 Image Optimization 의 Human Interface Guidelines for watchOS 페이지를 참조하십시오. 여기에는 다양한 화면 크기에 사용되는 배율이 포함됩니다.

XCode에서 특정 플래그를 설정하면 WatchKit이 화면 크기에 따라 이미지 크기를 조정하도록 지시합니다. 따라서 자동 크기 조정 PDF 이미지가 있습니다. 즉, 프로젝트는 모든 화면 크기에 대해 하나의 이미지만 필요합니다. 그렇지 않으면 프로젝트에 크기가 조정된 여러 이미지 파일이 필요합니다.

PDF 이미지가 있으면 XCode 프로젝트의 자산 카탈로그에 추가하십시오.

XCode 프로젝트에서:

Assets.xcassets로 이동

자산 카탈로그 편집기(흰색 영역)에서 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다. 그러면 팝업 메뉴가 나타납니다.

이미지 집합을 선택합니다. 그러면 빈 이미지 세트가 생성됩니다.

다음 단계는 Attribute Inspector에서 일부 설정을 변경하는 것입니다. Inspectors 편집기가 표시되지 않으면 XCode의 오른쪽 상단에 있는 버튼을 사용하여 엽니다.



다음으로 Apple Watch에서 사용할 이미지를 표시합니다. Attribute Inspector의 '장치' 섹션에서:

'Universal' 옵션 선택 취소

'Apple Watch' 옵션을 확인합니다.

이렇게 하면 Apple Watch에 대해 하나의 2x 사각형이 생성됩니다.

이제 PDF 이미지를 XCode에 추가하십시오. 나는 이것을 사용하고 있습니다 happy face image.

이미지를 2x Apple Watch Square로 끌어다 놓습니다.

Attribute Inspector에서 이미지 세트에 이름을 지정합니다. 저는 '행복'을 선택했습니다.

다음으로 Attribute Inspector에서 스케일링 옵션을 설정합니다.

'축척' 옵션을 '단일 축척'으로 설정합니다

메뉴 아래에 있는 'Apple Watch' 섹션에서 'Auto Scaling'을 'Automatic'으로 변경합니다

.



이제 이미지가 Apple Watch의 화면 크기에 따라 크기가 조정됩니다!

Attribute Inspector의 'Preserve Vector Data' 상자에 대한 여담입니다. 이것은 watchOS 앱이 아닌 iOS 앱용으로 보입니다. 체크박스를 선택하면 벡터 데이터가 iOS 앱에 포함됩니다. 이렇게 하면 이미지 크기가 자동으로 조정됩니다. 이 옵션은 What's New in Cocoa Touch 비디오 33:50 마크 주변에서 논의됩니다.

나는 상자를 선택하고 선택 취소하는 것을 모두 실험했습니다. watchOS 프로젝트에는 별 차이가 없는 것 같습니다. 이에 대해 StackOverflow Question을 작성했지만 이 글을 쓰는 시점에서 응답을 받지 못했습니다. '벡터 데이터 보존' 상자를 선택하지 않은 상태로 두었습니다.

아래는 자동 크기 조정 PDF 이미지의 사용을 보여주는 코드입니다. 표시된 결과는 44mm 및 38mm 화면의 미리보기 캔버스에서 가져온 것입니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
      VStack {
          Image("Happy")
          Text("Hello, World!")
            .padding()
        }
    }
  }

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      return Group {
        ContentView()
        .previewDevice("Apple Watch Series 6 - 44mm")
        ContentView()
          .previewDevice("Apple Watch Series 3 - 38mm")
      }
    }
}