Xamarin.ios의 이미지Images in Xamarin.Mac

이 문서에서는 Xamarin.ios 응용 프로그램에서 이미지 및 아이콘 작업을 설명 합니다. 응용 프로그램의 아이콘을 만드는 데 필요한 이미지를 만들고 유지 관리 하는 방법 및 C# 코드와 Xcode의 Interface Builder에서 이미지를 사용 하는 방법을 설명 합니다.This article covers working with images and icons in a Xamarin.Mac application. It describes creating and maintaining the images needed to create your application's icon and using images in both C# code and Xcode's Interface Builder.

개요Overview

Xamarin.ios 응용 프로그램 C# 에서 및 .net을 사용 하는 경우 목표-CXcode 에서 작업 하는 개발자와 동일한 이미지 및 아이콘 도구에 액세스할 수 있습니다.When working with C# and .NET in a Xamarin.Mac application, you have access to the same Image and Icon tools that a developer working in Objective-C and Xcode does.

MacOS (이전의 Mac OS X) 응용 프로그램 내에서 이미지 자산을 사용 하는 몇 가지 방법이 있습니다.There are several ways that image assets are used inside a macOS (formerly known as Mac OS X) application. 단순히 응용 프로그램 UI의 일부로 이미지를 표시 하 고 도구 모음이 나 소스 목록 항목과 같은 UI 컨트롤에 할당 하 여 아이콘을 제공 하면 Xamarin.ios를 사용 하면 다음과 같은 방식으로 macOS 응용 프로그램에 유용한 아트 워크를 쉽게 추가할 수 있습니다. :From simply displaying an image as part of your application's UI to, assigning it to a UI control such as a Tool Bar or Source List Item, to providing Icons, Xamarin.Mac makes it easy to add great artwork to your macOS applications in the following ways:

  • UI 요소 -이미지는 배경으로 표시 되거나 이미지 뷰에서 응용 프로그램의 일부로 표시 될 수 있습니다 (NSImageView).UI elements - Images can be displayed as backgrounds or as part of your application in a Image View (NSImageView).
  • Button -이미지를 단추 (NSButton)로 표시할 수 있습니다.Button - Images can be displayed in buttons (NSButton).
  • 이미지 셀 -테이블 기반 컨트롤 (NSTableView 또는 NSOutlineView)의 일부로 이미지는 이미지 셀 (NSImageCell)에서 사용할 수 있습니다.Image Cell - As part of a table based control (NSTableView or NSOutlineView), images can be used in a Image Cell (NSImageCell).
  • 도구 모음 항목 -이미지를 도구 모음 (NSToolbar)에 이미지 도구 모음 항목 (NSToolbarItem)으로 추가할 수 있습니다.Toolbar Item - Images can be added to a Toolbar (NSToolbar) as a Image Toolbar Item (NSToolbarItem).
  • 원본 목록 아이콘 -원본 목록의 일부로 (특별히 형식이 지정 된 NSOutlineView)Source List Icon - As part of a Source List (a specially formatted NSOutlineView).
  • 앱 아이콘 -일련의 이미지를 .icns 집합과 함께 그룹화 하 여 응용 프로그램의 아이콘으로 사용할 수 있습니다.App Icon - A series of images can be grouped together into a .icns set and used as your application's icon. 자세한 내용은 응용 프로그램 아이콘 설명서를 참조 하세요.See our Application Icon documentation for more information.

또한 macOS는 응용 프로그램 전체에서 사용할 수 있는 미리 정의 된 이미지 집합을 제공 합니다.Additionally, macOS provides a set of predefined images that can be used throughout your application.

응용 프로그램의 예제 실행An example run of the app

이 문서에서는 Xamarin.ios 응용 프로그램에서 이미지 및 아이콘을 사용 하는 기본 사항을 설명 합니다.In this article, we'll cover the basics of working with Images and Icons in a Xamarin.Mac application. Hello, Mac 문서를 먼저 사용 하는 것이 가장 좋습니다. 특히 Xcode 및 Interface Builder콘센트 및 작업 섹션을 소개 하 고,에서 사용할 주요 개념 및 기술을 설명 하 고 있습니다. 이 문서를 참조 하세요.It is highly suggested that you work through the Hello, Mac article first, specifically the Introduction to Xcode and Interface Builder and Outlets and Actions sections, as it covers key concepts and techniques that we'll be using in this article.

Xamarin.ios 프로젝트에 이미지 추가Adding images to a Xamarin.Mac project

Xamarin.ios 응용 프로그램에서 사용할 이미지를 추가 하는 경우 개발자가 프로젝트 소스에 이미지 파일을 포함할 수 있는 몇 가지 위치와 방법이 있습니다.When adding an image for use in a Xamarin.Mac application, there are several places and ways that the developer can include image file to the project's source:

  • 주 프로젝트 트리 [사용 되지 않음] -프로젝트 트리에 직접 이미지를 추가할 수 있습니다.Main project tree [deprecated] - Images can be added directly to the projects tree. 코드에서 주 프로젝트 트리에 저장 된 이미지를 호출 하는 경우에는 폴더 위치가 지정 되지 않습니다.When calling images stored in the main project tree from code, no folder location is specified. 예를 들어 NSImage image = NSImage.ImageNamed("tags.png");을 참조하십시오.For example: NSImage image = NSImage.ImageNamed("tags.png");.
  • 리소스 폴더 [사용 되지 않음] -특수 리소스 폴더는 아이콘, 시작 화면 또는 일반 이미지 (또는 개발자가 추가 하려는 다른 이미지 또는 파일)와 같은 응용 프로그램 번들의 일부가 될 파일에 대 한 것입니다.Resources folder [deprecated] - The special Resources folder is for any file that will become part of the Application's Bundle such as Icon, Launch Screen or general Images (or any other image or file the developer wishes to add). 주 프로젝트 트리에 저장 된 이미지와 마찬가지로 코드에서 Resources 폴더에 저장 된 이미지를 호출 하는 경우에는 폴더 위치가 지정 되지 않습니다.When calling images stored in the Resources folder from code, just like images stored in the main project tree, no folder location is specified. 예를 들어 NSImage.ImageNamed("tags.png")을 참조하십시오.For example: NSImage.ImageNamed("tags.png").
  • 사용자 지정 폴더 또는 하위 폴더 [사용 되지 않음] -개발자가 프로젝트 소스 트리에 사용자 지정 폴더를 추가 하 고 여기에 이미지를 저장할 수 있습니다.Custom Folder or Subfolder [deprecated] - The developer can add a custom folder to the projects source tree and store the images there. 프로젝트를 구성 하는 데 도움이 되도록 파일이 추가 된 위치를 하위 폴더에 중첩 시킬 수 있습니다.The location where the file is added can be nested in a subfolder to further help organize the project. 예를 들어, 개발자가 Card 폴더를 프로젝트에 추가 하 고 하위 폴더를 해당 폴더에 추가한 경우에는 Hearts 폴더에 Hearts 이미지를 저장 NSImage.ImageNamed("Card/Hearts/Jack.png") 런타임에 이미지를 로드 합니다.For example, if the Developer added a Card folder to the project and a sub folder of Hearts to that folder, then store an image Jack.png in the Hearts folder, NSImage.ImageNamed("Card/Hearts/Jack.png") would load the image at runtime.
  • Asset Catalog 이미지 집합 [기본 설정] -OS X El Capitan에 추가 됨, 자산 카탈로그 이미지 집합 은 응용 프로그램에 대 한 다양 한 장치 및 크기 조정 요소를 지 원하는 데 필요한 이미지의 모든 버전 또는 표현을 포함 합니다.Asset Catalog Image Sets [preferred] - Added in OS X El Capitan, Asset Catalogs Image Sets contain all the versions or representations of an image that are necessary to support various devices and scale factors for your application. 이미지 자산 파일 이름 ( @1x , @2x )에 의존 하지 않습니다.Instead of relying on the image assets filename (@1x, @2x).

자산 카탈로그 이미지 집합에 이미지 추가Adding images to an asset catalog image set

위에서 설명한 것 처럼 자산 카탈로그 이미지 집합 에는 응용 프로그램의 다양 한 장치 및 크기 조정 요소를 지 원하는 데 필요한 이미지의 모든 버전 또는 표현이 포함 되어 있습니다.As stated above, an Asset Catalogs Image Sets contain all the versions or representations of an image that are necessary to support various devices and scale factors for your application. 이미지 자산 파일 이름에 의존 하는 대신 (위의 확인 독립적 이미지 및 이미지 명명법 참조) 이미지 집합 은 자산 편집기를 사용 하 여 장치 및/또는 해상도에 속하는 이미지를 지정 합니다.Instead of relying on the image assets filename (see the Resolution Independent Images and Image Nomenclature above), Image Sets use the Asset Editor to specify which image belongs to which device and/or resolution.

  1. Solution Pad에서 assets.xcassets 파일을 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Pad, double-click the Assets.xcassets file to open it for editing:

    Assets.xcassets 선택Selecting the Assets.xcassets

  2. 자산 목록을 마우스 오른쪽 단추로 클릭 하 고 새 이미지 집합을 선택 합니다.Right-click on the Assets List and select New Image Set:

    새 이미지 집합 추가Adding a new image set

  3. 새 이미지 집합을 선택 하면 편집기가 표시 됩니다.Select the new image set and the editor will be displayed:

    새 이미지 집합 선택Selecting the new image set

  4. 여기에서 필요한 각각의 서로 다른 장치 및 해상도에 대 한 이미지를 끌어올 수 있습니다.From here we can drag in images for each of the different devices and resolutions required.

  5. 자산 목록 에서 새 이미지 집합의 이름을 두 번 클릭 하 여 편집 합니다.Double-click the new image set's Name in the Assets List to edit it:

    이미지 집합 이름 편집Editing the image set name

다른 해상도의 개별 비트맵 파일을 포함 하는 대신 casset에 PDF 형식의 벡터 이미지를 포함할 수 있도록 하는 이미지 집합 에 추가 된 특수 vector 클래스입니다.A special Vector class as been added to Image Sets that allows us to include a PDF formatted vector image in the casset instead including individual bitmap files at the different resolutions. 이 메서드를 사용 하 여 @1x 해상도 (벡터 PDF 파일 형식)에 대 한 단일 벡터 파일을 제공 하면 파일의 @2x@3x 버전이 컴파일 시간에 생성 되 고 응용 프로그램의 번들에 포함 됩니다. .Using this method, you supply a single vector file for the @1x resolution (formatted as a vector PDF file) and the @2x and @3x versions of the file will be generated at compile time and included in the application's bundle.

이미지 집합 편집기 인터페이스The image set editor interface

예를 들어 150px x 150px의 해상도를 사용 하 여 자산 카탈로그의 벡터로 MonkeyIcon.pdf 파일을 포함 하는 경우 컴파일할 때 다음 비트맵 자산이 최종 앱 번들에 포함 됩니다.For example, if you include a MonkeyIcon.pdf file as the vector of an Asset Catalog with a resolution of 150px x 150px, the following bitmap assets would be included in the final app bundle when it was compiled:

  1. MonkeyIcon@1x.png -150px x 150px resolution.MonkeyIcon@1x.png - 150px x 150px resolution.
  2. MonkeyIcon@2x.png -300px x 300px 해상도입니다.MonkeyIcon@2x.png - 300px x 300px resolution.
  3. MonkeyIcon@3x.png -450px x 450px resolution.MonkeyIcon@3x.png - 450px x 450px resolution.

자산 카탈로그에서 PDF 벡터 이미지를 사용 하는 경우 다음 사항을 고려해 야 합니다.The following should be taken into consideration when using PDF vector images in Asset Catalogs:

  • PDF는 컴파일 시간에 비트맵으로 래스터화됩니다. 최종 응용 프로그램에서 제공 되는 비트맵으로 래스터화됩니다.This is not full vector support as the PDF will be rasterized to a bitmap at compile time and the bitmaps shipped in the final application.
  • 자산 카탈로그에 설정 된 이미지의 크기는 조정할 수 없습니다.You cannot adjust the size of the image once it has been set in the Asset Catalog. 코드에서 또는 자동 레이아웃 및 크기 클래스를 사용 하 여 이미지의 크기를 조정 하려고 하면 다른 비트맵과 마찬가지로 이미지가 왜곡 됩니다.If you attempt to resize the image (either in code or by using Auto Layout and Size Classes) the image will be distorted just like any other bitmap.

Xcode의 Interface Builder에서 이미지 집합 을 사용 하는 경우 특성 검사자의 드롭다운 목록에서 집합의 이름을 선택 하면 됩니다.When using an Image Set in Xcode's Interface Builder, you can simply select the set's name from the dropdown list in the Attribute Inspector:

Xcode의 Interface Builder에서 이미지 집합 선택Selecting an image set in Xcode's Interface Builder

새 자산 컬렉션 추가Adding new assets collections

자산 카탈로그에서 이미지를 사용 하는 경우 assets.xcassets 컬렉션에 모든 이미지를 추가 하는 대신 새 컬렉션을 만들 수 있습니다.When working with images in Assets Catalogs there might be times when you want to create a new collection, instead of adding all of your images to the Assets.xcassets collection. 예를 들어 주문형 리소스를 디자인할 때입니다.For example, when designing on-demand resources.

프로젝트에 새 자산 카탈로그를 추가 하려면 다음을 수행 합니다.To add a new Assets Catalog to your project:

  1. Solution Pad 에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 추가 > 새 파일 ...을 선택 합니다.Right-click on the project in the Solution Pad and select Add > New File...

  2. Mac > Asset Catalog를 선택 하 고, 컬렉션의 이름을 입력 하 고, 새로 만들기 단추를 클릭 합니다.Select Mac > Asset Catalog, enter a Name for the collection and click the New button:

    새 자산 카탈로그 추가Adding a new Asset Catalog

여기에서 기본 assets.xcassets 컬렉션이 프로젝트에 자동으로 포함 되는 것과 동일한 방식으로 컬렉션을 사용할 수 있습니다.From here you can work with the collection in the same way as the default Assets.xcassets collection automatically included in the project.

리소스에 이미지 추가Adding images to resources

중요

MacOS 앱에서 이미지를 사용 하는이 방법은 Apple에서 더 이상 사용 되지 않습니다.This method of working with images in a macOS app has been deprecated by Apple. 대신 자산 카탈로그 이미지 집합 을 사용 하 여 앱의 이미지를 관리 해야 합니다.You should use Asset Catalog Image Sets to manager your app's images instead.

Xamarin.ios 응용 프로그램 ( C# 코드 또는 Interface Builder)에서 이미지 파일을 사용 하려면 먼저 프로젝트의 Resources 폴더에 번들 리소스로포함 해야 합니다.Before you can use an Image file in your Xamarin.Mac application (either in C# code or from Interface Builder) it needs to be included in the project's Resources folder as a Bundle Resource. 프로젝트에 파일을 추가 하려면 다음을 수행 합니다.To add a file to a project, do the following:

  1. Solution Pad 에서 프로젝트의 Resources 폴더를 마우스 오른쪽 단추로 클릭 하 고 추가 > 파일 추가...를 선택 합니다.Right-click on the Resources folder in your project in the Solution Pad and select Add > Add Files...:

    파일 추가Adding a file

  2. 파일 추가 대화 상자에서 프로젝트에 추가할 이미지 파일을 선택 하 고 빌드 재정의 작업 에 대해 BundleResource를 선택한 후 열기 단추를 클릭 합니다.From the Add Files dialog box, select the images files to add to the project, select BundleResource for the Override build action and click the Open button:

    추가할 파일 선택Selecting the files to add

  3. 파일이 Resources 폴더에 아직 없는 경우 파일을 복사, 이동 또는 연결할 것인지 묻는 메시지가 표시 됩니다.If the files are not already in the Resources folder, you'll be asked if you want to Copy, Move or Link the files. 일반적으로 복사되는 요구 사항에 맞는 모든 것을 선택 합니다.Pick which every suits your needs, typically that will be Copy:

    추가 작업 선택Selecting the add action

  4. 새 파일이 프로젝트에 포함 되 고 사용 하기 위해 읽혀집니다.The new files will be included in the project and read for use:

    Solution Pad에 추가 된 새 이미지 파일The new image files added to the Solution Pad

  5. 필요한 모든 이미지 파일에 대해이 프로세스를 반복 합니다.Repeat the process for any image files required.

Xamarin.ios 응용 프로그램의 원본 이미지로 png, jpg 또는 pdf 파일을 사용할 수 있습니다.You can use any png, jpg, or pdf file as a source image in your Xamarin.Mac application. 다음 섹션에서는 레 티 나 기반 Mac을 지원 하기 위해 이미지 및 아이콘의 고해상도 버전을 추가 하는 방법을 살펴보겠습니다.In the next section, we'll look at adding High Resolution versions of our Images and Icons to support Retina based Macs.

중요

리소스 폴더에 이미지를 추가 하는 경우 빌드 재정의 작업기본값으로설정 된 상태로 둘 수 있습니다.If you are adding Images to the Resources folder, you can leave the Override build action set to Default. 이 폴더에 대 한 기본 빌드 작업은 BundleResource입니다.The default Build Action for this folder is BundleResource.

모든 앱 그래픽 리소스의 고해상도 버전 제공Provide high-resolution versions of all app graphics resources

Xamarin.ios 응용 프로그램 (아이콘, 사용자 지정 컨트롤, 사용자 지정 커서, 사용자 지정 아트 워크 등)에 추가 하는 모든 그래픽 자산은 표준 해상도 버전 외에도 고해상도 버전이 있어야 합니다.Any graphic asset that you add to a Xamarin.Mac application (icons, custom controls, custom cursors, custom artwork, etc.) need to have high-resolution versions in addition to their standard-resolution versions. 이는 응용 프로그램이 레 티 나 Display 장착 된 Mac 컴퓨터에서 실행 될 때 가장 적합 한 것을 확인 하는 데 필요 합니다.This is required so that your application will look its best when run on a Retina Display equipped Mac computer.

@2x 명명 규칙 채택Adopt the @2x naming convention

중요

MacOS 앱에서 이미지를 사용 하는이 방법은 Apple에서 더 이상 사용 되지 않습니다.This method of working with images in a macOS app has been deprecated by Apple. 대신 자산 카탈로그 이미지 집합 을 사용 하 여 앱의 이미지를 관리 해야 합니다.You should use Asset Catalog Image Sets to manager your app's images instead.

표준 및 고해상도 버전의 이미지를 만들 때 Xamarin.ios 프로젝트에 포함할 때 이미지 쌍에 대해이 명명 규칙을 따릅니다.When you create the standard and high-resolution versions of an image, follow this naming convention for the image pair when including them in your Xamarin.Mac project:

  • 표준 해상도 - ImageName. 파일 이름-확장명 (예: 태그도 .png)Standard-Resolution - ImageName.filename-extension (Example: tags.png)
  • 고해상도 - ImageName@2x.filename-extension (예: tags@2x.png )High-Resolution - ImageName@2x.filename-extension (Example: tags@2x.png)

프로젝트에 추가 되 면 다음과 같이 표시 됩니다.When added to a project, they would appear as follows:

Solution Pad의 이미지 파일The image files in the Solution Pad

이미지가 Interface Builder의 UI 요소에 할당 되 면 _ImageName_에서 파일을 선택 하기만 하면 됩니다 . 파일 이름-확장명 형식 (예: tags .png)When an image is assigned to a UI element in Interface Builder you'll simply pick the file in the ImageName.filename-extension format (Example: tags.png). 코드에서 C# 이미지를 사용 하는 경우와 마찬가지로 ImageName에서 파일을 선택 합니다 . 파일 이름-확장명 형식입니다.The same for using an image in C# code, you'll pick the file in the ImageName.filename-extension format.

Xamarin.ios 응용 프로그램이 Mac에서 실행 되는 경우 ImageName . 파일 이름-확장명 형식 이미지가 표준 해상도 디스플레이에서 사용 되는 경우 ImageName@2x.filename-extension 이미지가 mac (레 티 나 Display base) mac에서 자동으로 선택 됩니다.When you Xamarin.Mac application is run on a Mac, the ImageName.filename-extension format image will be used on Standard Resolution Displays, the ImageName@2x.filename-extension image will automatically be picked on Retina Display bases Macs.

Interface Builder에서 이미지 사용Using images in Interface Builder

Xamarin.ios 프로젝트의 Resources 폴더에 추가한 모든 이미지 리소스를 설정 하 고, 빌드 작업을 BundleResource 에 자동으로 Interface Builder 표시 하 고,이를 처리 하는 경우 UI 요소의 일부로 선택할 수 있습니다. 이미지).Any image resource the you have added to the Resources folder in your Xamarin.Mac project and have set the build action to BundleResource will automatically show up in Interface Builder and can be selected as part of a UI element (if it handles images).

Interface builder에서 이미지를 사용 하려면 다음을 수행 합니다.To use an image in interface builder, do the following:

  1. BundleResource빌드 작업 을 사용 하 여 Resources 폴더에 이미지를 추가 합니다.Add an image to the Resources folder with a Build Action of BundleResource:

    Solution Pad의 이미지 리소스An image resource in the Solution Pad

  2. 주 storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.Double-click the Main.storyboard file to open it for editing in Interface Builder:

    주 스토리 보드 편집Editing the main storyboard

  3. 이미지를 사용 하는 UI 요소를 디자인 화면 (예: 이미지 도구 모음 항목)으로 끌어 옵니다.Drag a UI element that takes images onto the design surface (for example, a Image Toolbar Item):

    도구 모음 항목 편집Editing a toolbar item

  4. 이미지 이름 드롭다운에서 Resources 폴더에 추가한 이미지를 선택 합니다.Select the Image that you added to the Resources folder in the Image Name dropdown:

    도구 모음 항목의 이미지 선택Selecting an image for a toolbar item

  5. 선택한 이미지가 디자인 화면에 표시 됩니다.The selected image will be displayed in the design surface:

    도구 모음 편집기에 표시 되는 이미지The image being displayed in the Toolbar editor

  6. 변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

위의 단계는 특성 검사자에서 이미지 속성을 설정할 수 있도록 하는 모든 UI 요소에 대해 작동 합니다.The above steps work for any UI element that allows their image property to be set in the Attribute Inspector. 이미지 파일의 @2x 버전을 포함 한 경우에는 레 티 나 표시 기반 mac에서 자동으로 사용 됩니다.Again, if you have included a @2x version of your image file, it will automatically be used on Retina Display based Macs.

중요

이미지 이름 드롭다운에서 이미지를 사용할 수 없는 경우 Xcode에서 storyboard 프로젝트를 닫고 Mac용 Visual Studio에서 다시 엽니다.If the Image isn't available in the Image Name dropdown, close your .storyboard project in Xcode and reopen it from Visual Studio for Mac. 이미지를 아직 사용할 수 없는 경우 해당 빌드 작업BundleResource 하 고 이미지가 Resources 폴더에 추가 되었는지 확인 합니다.If the image still isn't available, ensure that its Build Action is BundleResource and that the image has been added to the Resources folder.

코드에서 C# 이미지 사용Using images in C# code

Xamarin.ios 응용 프로그램의 코드를 사용 C# 하 여 메모리에 이미지를 로드할 때 이미지는 NSImage 개체에 저장 됩니다.When loading an image into memory using C# code in your Xamarin.Mac application, the image will be stored in a NSImage object. 이미지 파일이 Xamarin.ios 응용 프로그램 번들에 포함 된 경우 (리소스에 포함) 다음 코드를 사용 하 여 이미지를 로드 합니다.If the image file has been included in the Xamarin.Mac application bundle (included in resources), use the following code to load the image:

NSImage image = NSImage.ImageNamed("tags.png");

위의 코드는 NSImage 클래스의 정적 ImageNamed("...") 메서드를 사용 하 여 리소스 폴더에서 지정 된 이미지를 메모리로 로드 합니다. 이미지를 찾을 수 없는 경우 null 반환 됩니다.The above code uses the static ImageNamed("...") method of the NSImage class to load the given image into memory from the Resources folder, if the image cannot be found, null will be returned. Interface Builder에서 할당 된 이미지와 마찬가지로, @2x 버전의 이미지 파일을 포함 하는 경우 레 티 나 Display 기반 mac에서 자동으로 사용 됩니다.Like Images assigned in Interface Builder, if you have included a @2x version of your image file, it will automatically be used on Retina Display based Macs.

Mac 파일 시스템에서 응용 프로그램 번들 외부에 이미지를 로드 하려면 다음 코드를 사용 합니다.To load images outside of the application's bundle (from the Mac file system), use the following code:

NSImage image = new NSImage("/Users/KMullins/Documents/photo.jpg")

템플릿 이미지 작업Working with template images

MacOS 앱의 디자인에 따라 색 구성표의 변경 (예: 사용자 기본 설정에 따라)과 일치 하도록 사용자 인터페이스 내에서 아이콘이 나 이미지를 사용자 지정 해야 하는 경우가 있을 수 있습니다.Based on the design of your macOS app, there might be times when you need to customize an icon or image inside of the User Interface to match a change in color scheme (for example, based on user preferences).

이 효과를 얻으려면 이미지 자산의 렌더링 모드템플릿 이미지로전환 합니다.To achieve this effect, switch the Render Mode of your Image Asset to Template Image:

템플릿 이미지 설정Setting a template image

Xcode의 Interface Builder에서 UI 컨트롤에 이미지 자산을 할당 합니다.From the Xcode's Interface Builder, assign the Image Asset to a UI control:

Xcode의 Interface Builder에서 이미지 선택Selecting an image in Xcode's Interface Builder

또는 필요에 따라 코드에서 이미지 소스를 설정 합니다.Or optionally set the image source in code:

MyIcon.Image = NSImage.ImageNamed ("MessageIcon");

다음 공용 함수를 뷰 컨트롤러에 추가 합니다.Add the following public function to your View Controller:

public NSImage ImageTintedWithColor(NSImage sourceImage, NSColor tintColor)
    => NSImage.ImageWithSize(sourceImage.Size, false, rect => {
        // Draw the original source image
        sourceImage.DrawInRect(rect, CGRect.Empty, NSCompositingOperation.SourceOver, 1f);

        // Apply tint
        tintColor.Set();
        NSGraphics.RectFill(rect, NSCompositingOperation.SourceAtop);

        return true;
    });

중요

특히 macOS Mojave에서 어두운 모드를 사용 하는 경우 사용자 지정 렌더링 NSImage 개체를 다시 지정 하는 경우 LockFocus API를 사용 하지 않는 것이 중요 합니다.Particularly with the advent of Dark Mode in macOS Mojave, it is important to avoid the LockFocus API when reating custom-rendered NSImage objects. 이러한 이미지는 정적이 되며 모양이 나 디스플레이 밀도 변경을 고려 하도록 자동으로 업데이트 되지 않습니다.Such images become static and will not be automatically updated to account for appearance or display density changes.

위의 처리기 기반 메커니즘을 사용 하 여, 예를 들어 NSImageView에서 NSImage 호스팅될 때 동적 조건을 다시 렌더링 하면 자동으로 발생 합니다.By employing the handler-based mechanism above, re-rendering for dynamic conditions will happen automatically when the NSImage is hosted, for example, in an NSImageView.

마지막으로 템플릿 이미지의 농도를 검사 하려면 이미지에 대해이 함수를 색으로 호출 합니다.Finally, to tint a Template Image, call this function against the image to colorize:

MyIcon.Image = ImageTintedWithColor (MyIcon.Image, NSColor.Red);

테이블 뷰에서 이미지 사용Using images with table views

이미지를 NSTableView 셀의 일부로 포함 하려면 테이블 뷰의 NSTableViewDelegate's GetViewForItem 메서드에서 데이터가 반환 되는 방법을 변경 하 여 일반적인 NSTextField 대신 NSTableCellView를 사용 해야 합니다.To include an image as part of the cell in a NSTableView, you'll need to change how the data is returned by the Table View's NSTableViewDelegate's GetViewForItem method to use a NSTableCellView instead of the typical NSTextField. 예를 들면,For example:

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTableCellView view = (NSTableCellView)tableView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTableCellView ();
        if (tableColumn.Title == "Product") {
            view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
            view.AddSubview (view.ImageView);
            view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
        } else {
            view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
        }
        view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
        view.AddSubview (view.TextField);
        view.Identifier = tableColumn.Title;
        view.TextField.BackgroundColor = NSColor.Clear;
        view.TextField.Bordered = false;
        view.TextField.Selectable = false;
        view.TextField.Editable = true;

        view.TextField.EditingEnded += (sender, e) => {

            // Take action based on type
            switch(view.Identifier) {
            case "Product":
                DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
                break;
            case "Details":
                DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
                break; 
            }
        };
    }

    // Tag view
    view.TextField.Tag = row;

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed ("tags.png");
        view.TextField.StringValue = DataSource.Products [(int)row].Title;
        break;
    case "Details":
        view.TextField.StringValue = DataSource.Products [(int)row].Description;
        break;
    }

    return view;
}

여기에는 몇 줄의 관심이 있습니다.There are a few lines of interest here. 첫째, 이미지를 포함 하려는 열에 대해 필요한 크기와 위치의 새 NSImageView을 만듭니다. 또한 이미지를 사용 하 고 있는지 여부에 따라 새 NSTextField를 만들고 기본 위치를 배치 합니다. :First, for columns that we want to include an image, we create a new NSImageView of the required size and location, we also create a new NSTextField and place its default position based on whether or not we are using an image:

if (tableColumn.Title == "Product") {
    view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
    view.AddSubview (view.ImageView);
    view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
} else {
    view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
}

두 번째로, 부모 NSTableCellView에 새 이미지 뷰와 텍스트 필드를 포함 해야 합니다.Secondly, we need to include the new Image View and Text Field in the parent NSTableCellView:

view.AddSubview (view.ImageView);
...

view.AddSubview (view.TextField);
...

마지막으로 테이블 뷰 셀을 사용 하 여 축소 하 고 확장할 수 있는 텍스트 필드에 지시 해야 합니다.Lastly, we need to tell the Text Field that it can shrink and grow with the Table View Cell:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

예제 출력:Example output:

앱에서 이미지를 표시 하는 예제An example of displaying an image in an app

테이블 뷰 작업에 대 한 자세한 내용은 테이블 뷰 설명서를 참조 하세요.For more information on working with Table Views, please see our Table Views documentation.

개요 보기가 포함 된 이미지 사용Using images with outline views

NSOutlineView에 있는 셀의 일부로 이미지를 포함 하려면 개요 뷰의 NSTableViewDelegate's GetView 메서드에서 데이터가 반환 되는 방법을 변경 하 여 일반적인 NSTextField대신 NSTableCellView를 사용 해야 합니다.To include an image as part of the cell in a NSOutlineView, you'll need to change how the data is returned by the Outline View's NSTableViewDelegate's GetView method to use a NSTableCellView instead of the typical NSTextField. 예를 들면,For example:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTableCellView view = (NSTableCellView)outlineView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTableCellView ();
        if (tableColumn.Title == "Product") {
            view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
            view.AddSubview (view.ImageView);
            view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
        } else {
            view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
        }
        view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
        view.AddSubview (view.TextField);
        view.Identifier = tableColumn.Title;
        view.TextField.BackgroundColor = NSColor.Clear;
        view.TextField.Bordered = false;
        view.TextField.Selectable = false;
        view.TextField.Editable = !product.IsProductGroup;
    }

    // Tag view
    view.TextField.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.TextField.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.TextField.StringValue;
            break;
        case "Details":
            prod.Description = view.TextField.StringValue;
            break; 
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed (product.IsProductGroup ? "tags.png" : "tag.png");
        view.TextField.StringValue = product.Title;
        break;
    case "Details":
        view.TextField.StringValue = product.Description;
        break;
    }

    return view;
}

여기에는 몇 줄의 관심이 있습니다.There are a few lines of interest here. 첫째, 이미지를 포함 하려는 열에 대해 필요한 크기와 위치의 새 NSImageView을 만듭니다. 또한 이미지를 사용 하 고 있는지 여부에 따라 새 NSTextField를 만들고 기본 위치를 배치 합니다. :First, for columns that we want to include an image, we create a new NSImageView of the required size and location, we also create a new NSTextField and place its default position based on whether or not we are using an image:

if (tableColumn.Title == "Product") {
    view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
    view.AddSubview (view.ImageView);
    view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
} else {
    view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
}

두 번째로, 부모 NSTableCellView에 새 이미지 뷰와 텍스트 필드를 포함 해야 합니다.Secondly, we need to include the new Image View and Text Field in the parent NSTableCellView:

view.AddSubview (view.ImageView);
...

view.AddSubview (view.TextField);
...

마지막으로 테이블 뷰 셀을 사용 하 여 축소 하 고 확장할 수 있는 텍스트 필드에 지시 해야 합니다.Lastly, we need to tell the Text Field that it can shrink and grow with the Table View Cell:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

예제 출력:Example output:

개요 뷰에 표시 되는 이미지의 예An example of an image being displayed in an Outline View

개요 보기를 사용 하는 방법에 대 한 자세한 내용은 개요 보기 설명서를 참조 하세요.For more information on working with Outline Views, please see our Outline Views documentation.

요약Summary

이 문서에서는 Xamarin.ios 응용 프로그램에서 이미지 및 아이콘을 사용 하는 방법에 대해 자세히 살펴봅니다.This article has taken a detailed look at working with Images and Icons in a Xamarin.Mac application. Xcode의 Interface Builder에서 이미지와 아이콘을 사용 하는 방법 및 코드에서 C# 이미지와 아이콘을 사용 하는 방법에 대 한 다양 한 형식 및 사용 방법을 살펴보았습니다.We saw the different types and uses of Images, how to use Images and Icons in Xcode's Interface Builder and how to work with Images and Icons in C# code.