Xamarin.Forms 이미지 자습서

아티클
Developer (초급)
완료하는 데 10분 걸림

이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.

첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
StackLayout 자습서

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

XAML에서 Xamarin.FormsImage을 만듭니다.
Image 모양을 사용자 지정합니다.
각 플랫폼 프로젝트에서 로컬 이미지 파일을 표시합니다.

Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 이미지를 표시하고 모양을 사용자 지정하는 방법을 보여 주는 간단한 애플리케이션을 만들겠습니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.

또한 Xamarin.Forms용 XAML 핫 다시 로드를 사용하여 애플리케이션을 다시 빌드하지 않고 UI 변경 내용을 확인할 수 있습니다.

이미지 만들기

9분 남음

Visual Studio
Mac용 Visual Studio

이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.

Visual Studio를 실행하고, ImageTutorial이라는 비어 있는 새 Xamarin.Forms 앱을 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각에서 솔루션의 이름이 ImageTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
솔루션 탐색기의 ImageTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Image로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Image.Source 속성은 URI를 통해 표시할 이미지를 지정합니다. Image.Source 속성은 ImageSource 형식입니다. 그러면 이미지를 파일, URI 또는 리소스에서 가져올 수 있습니다. 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 이미지 표시를 참조하세요.

HeightRequest 속성은 디바이스 독립적 단위로 Image의 높이를 지정합니다.

참고 항목

하지만 이 예제에서 WidthRequest 속성을 설정하는 데 필요하지 않습니다. 기본적으로 Image가 이미지의 가로 세로 비율을 유지 관리하기 때문입니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

참고 항목

Image 보기는 24시간 동안 다운로드된 이미지를 자동으로 캐시합니다. 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 다운로드된 이미지 캐싱을 참조하세요.

이 자습서를 완료하려면 iOS 및 Android 플랫폼 지원이 설치된 Mac용 Visual Studio(최신 릴리스)가 있어야 합니다. 또한 Xcode(최신 릴리스)도 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요.

Mac용 Visual Studio를 실행하고, ImageTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각에서 솔루션의 이름이 ImageTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
Solution Pad의 ImageTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Image로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Image.Source 속성은 URI를 통해 표시할 이미지를 지정합니다. Image.Source 속성은 ImageSource 형식입니다. 그러면 이미지를 파일, URI 또는 리소스에서 가져올 수 있습니다. 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 이미지 표시를 참조하세요.

HeightRequest 속성은 디바이스 독립적 단위로 Image의 높이를 지정합니다.

참고 항목

하지만 이 예제에서 WidthRequest 속성을 설정하는 데 필요하지 않습니다. 기본적으로 Image가 이미지의 가로 세로 비율을 유지 관리하기 때문입니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

참고 항목

Image 보기는 24시간 동안 다운로드된 이미지를 자동으로 캐시합니다. 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 다운로드된 이미지 캐싱을 참조하세요.

모양 사용자 지정

6분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 Image 선언을 수정하여 모양을 사용자 지정합니다.
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
이 코드는 이미지의 크기 조정 모드를 정의하는 Aspect 속성을 Fill로 설정합니다. Fill 멤버는 Aspect 열거형에서 정의되고, 이미지를 왜곡하는지에 관계 없이 보기를 완전히 채우도록 이미지를 확장합니다. 이미지 크기 조정에 관한 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 이미지 표시를 참조하세요.

OnPlatform 태그 확장을 사용하면 플랫폼별 기준으로 UI 모양을 사용자 지정할 수 있습니다. 이 예제에서는 태그 확장을 사용하여 HeightRequest 및 WidthRequest 속성을 iOS에서 300개 디바이스 독립적 단위로 지정하고, Android에서 250개 디바이스 독립적 단위로 지정합니다. OnPlatform 태그 확장에 대한 자세한 내용은 XAML 태그 확장 사용 가이드에서 OnPlatform 태그 확장을 참조하세요.

또한 HorizontalOptions 속성은 이미지를 가로 방향으로 가운데에 맞추도록 지정합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Visual Studio에서 애플리케이션을 중지합니다.

MainPage.xaml에서 Image 선언을 수정하여 모양을 사용자 지정합니다.
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
이 코드는 이미지의 크기 조정 모드를 정의하는 Aspect 속성을 Fill로 설정합니다. Fill 멤버는 Aspect 열거형에서 정의되고, 이미지를 왜곡하는지에 관계 없이 보기를 완전히 채우도록 이미지를 확장합니다. 이미지 크기 조정에 관한 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 이미지 표시를 참조하세요.

OnPlatform 태그 확장을 사용하면 플랫폼별 기준으로 UI 모양을 사용자 지정할 수 있습니다. 이 예제에서는 태그 확장을 사용하여 HeightRequest 및 WidthRequest 속성을 iOS에서 300으로 설정하고, Android에서 250으로 설정합니다. OnPlatform 태그 확장에 대한 자세한 내용은 XAML 태그 확장 사용 가이드에서 OnPlatform 태그 확장을 참조하세요.

또한 HorizontalOptions 속성은 이미지를 가로 방향으로 가운데에 맞추도록 지정합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

로컬 이미지 표시

4분 남음

이미지 파일은 플랫폼 프로젝트에 추가되고 Xamarin.Forms 공유 코드에서 참조될 수 있습니다. 이미지를 배포하는 이 메서드는 다양한 플랫폼 또는 약간 다른 디자인의 다양한 해결 방법을 사용하는 경우와 같이 이미지가 특정 플랫폼을 지정하는 경우에 필요합니다.

이 연습에서는 ImageTutorial 솔루션을 수정하여 URI에서 다운로드된 이미지가 아닌 로컬 이미지를 표시합니다. 로컬 이미지는 Xamarin 로고이며 아래 단추를 클릭하여 다운로드됩니다.

XamarinLogo.png 다운로드

Important

모든 플랫폼에서 단일 이미지를 사용하려면 모든 플랫폼에서 동일한 파일 이름을 사용해야 하고, 해당 이름은 유효한 Android 리소스 이름(예: 소문자, 숫자, 밑줄 및 마침표만 허용됨)이어야 합니다.

Visual Studio
Mac용 Visual Studio

솔루션 탐색기의 ImageTutorial.iOS 프로젝트에서 자산 카탈로그를 확장하고, 자산을 두 번 클릭하여 엽니다. 그런 다음, Assets.xcassets 탭에서 더하기 단추를 클릭하고 이미지 세트 추가를 선택합니다.
Assets.xcassets 탭에서 새 이미지 세트를 선택하면 편집기가 표시됩니다.
유니버설 범주의 경우 파일 시스템에서 1x 상자로 XamarinLogo.png를 끌어옵니다.
Assets.xcassets 탭에서 새 이미지 세트의 이름을 마우스 오른쪽 단추로 클릭하고 이름을 XamarinLogo로 바꿉니다.

Assets.xcassets 탭을 저장 후 닫습니다.
솔루션 탐색기의 ImageTutorial.Android 프로젝트에서 Resources 폴더를 확장합니다. 그런 다음, 시스템에서 drawable 폴더로 XamarinLogo.png 파일을 끌어옵니다.

참고 항목

Visual Studio에서는 이미지에 대한 빌드 작업을 AndroidResource로 자동으로 설정합니다.
ImageTutorial 프로젝트의 MainPage.xaml에서 Image 선언을 수정하여 로컬 XamarinLogo파일을 표시합니다.
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
이 코드는 Source 속성을 표시할 로컬 파일로 설정합니다. WidthRequest 속성은 iOS에서 300개 디바이스 독립적 단위로 설정되고, Android에서 250개 디바이스 독립적 단위로 설정됩니다. 또한 HorizontalOptions 속성은 이미지를 가로 방향으로 가운데에 맞추도록 지정합니다.

참고 항목

iOS에서 PNG 이미지의 경우 Source 속성에 지정된 파일 이름에서 .png 확장명을 생략할 수 있습니다. 다른 이미지 형식의 경우 확장명이 필요합니다.
Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Visual Studio에서 애플리케이션을 중지합니다.

로컬 이미지에 관한 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 로컬 이미지를 참조하세요.

Solution Pad의 ImageTutorial.iOS 프로젝트에서 Assets.xcassets를 두 번 클릭하여 엽니다. 그런 다음, 자산 목록에서 새 이미지 세트를 마우스 오른쪽 단추로 클릭합니다.
자산 목록에서 새 이미지 세트를 선택하면 편집기가 표시됩니다.
유니버설 범주의 경우 파일 시스템에서 1x 상자로 XamarinLogo.png를 끌어옵니다.
자산 목록에서 새 이미지 세트의 이름을 두 번 클릭하고 이름을 XamarinLogo로 바꿉니다.
Solution Pad의 ImageTutorial.Android 프로젝트에서 Resources 폴더를 확장합니다. 그런 다음, 시스템에서 drawable 폴더로 XamarinLogo.png 파일을 끌어옵니다.
폴더에 파일 추가 대화 상자에서 확인을 선택합니다.

참고 항목

Mac용 Visual Studio에서는 이미지에 대한 빌드 작업을 AndroidResource로 자동으로 설정합니다.
ImageTutorial 프로젝트의 MainPage.xaml에서 Image 선언을 수정하여 로컬 XamarinLogo파일을 표시합니다.
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
이 코드는 Source 속성을 표시할 로컬 파일로 설정합니다. WidthRequest 속성은 iOS에서 300개 디바이스 독립적 단위로 설정되고, Android에서 250개 디바이스 독립적 단위로 설정됩니다. 또한 HorizontalOptions 속성은 이미지를 가로 방향으로 가운데에 맞추도록 지정합니다.

참고 항목

iOS에서 PNG 이미지의 경우 Source 속성에 지정된 파일 이름에서 .png 확장명을 생략할 수 있습니다. 다른 이미지 형식의 경우 확장명이 필요합니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

로컬 이미지에 관한 자세한 내용은 Xamarin.Forms 가이드의 이미지에 있는 로컬 이미지를 참조하세요.