플랫폼 및 디바이스 관용구에 따라 UI 모양 사용자 지정

  • 아티클

Browse sample. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 앱은 특정 플랫폼 및 디바이스에 맞게 UI를 사용자 지정할 수 있습니다. 이렇게 하면 앱에서 다음을 수행할 수 있습니다.

  • 공간을 가장 효과적으로 사용합니다. 모바일 디바이스에서 잘 보이도록 앱을 디자인하는 경우 앱은 데스크톱 디바이스에서 계속 사용할 수 있지만 공간이 낭비될 가능성이 높습니다. 화면이 특정 크기보다 큰 경우 더 많은 콘텐츠를 표시하도록 앱을 사용자 지정할 수 있습니다. 예를 들어 쇼핑 앱은 모바일 디바이스에서 한 번에 하나의 항목을 표시할 수 있지만 데스크톱 디바이스에 여러 항목을 표시할 수 있습니다. 또한 화면에 더 많은 콘텐츠를 배치하면 사용자가 수행해야 하는 탐색의 양을 줄일 수 있습니다.
  • 디바이스 기능을 활용합니다. 특정 디바이스에는 특정 기능이 있을 가능성이 높습니다. 예를 들어 모바일 디바이스에는 위치 센서와 카메라가 있을 가능성이 높지만 데스크톱 디바이스에는 위치 센서가 없을 수 있습니다. 앱은 사용할 수 있는 기능을 검색하고 이를 사용하는 컨트롤을 사용하도록 설정할 수 있습니다.
  • 입력에 최적화합니다. UI 요소를 다시 정렬하여 특정 입력 형식에 맞게 최적화할 수 있습니다. 예를 들어 앱 아래쪽에 탐색 요소를 배치하면 모바일 사용자가 더 쉽게 액세스할 수 있습니다. 그러나 데스크톱 사용자는 종종 앱의 맨 위로 탐색 요소를 볼 것으로 예상합니다.

특정 플랫폼 및 디바이스 관용구에 대해 앱의 UI를 최적화하는 경우 반응형 UI를 만듭니다. .NET MAUI에서 반응형 UI를 만드는 기본 방법은 태그 확장 및 OnIdiom 태그 확장을 사용하는 OnPlatform 것입니다.

참고 항목

상태 트리거라고 하는 트리거 범주는 디바이스 방향이 변경되는 경우와 같은 특정 시나리오에서 UI 모양을 사용자 지정하는 데 사용할 수 있습니다. 자세한 내용은 상태 트리거를 참조 하세요.

플랫폼에 따라 UI 모양 사용자 지정

OnPlatform 태그 확장을 사용하면 플랫폼별 기준으로 UI 모양을 사용자 지정할 수 있습니다. 클래스와 On 동일한 기능을 OnPlatform<T> 제공하지만 보다 간결한 표현을 제공합니다.

OnPlatform 태그 확장은 다음 속성을 정의하는 OnPlatformExtension 클래스에서 지원됩니다.

  • Default- 플랫폼을 나타내는 속성에 적용할 기본값으로 설정한 형식 object입니다.
  • Android- Android에 적용할 값으로 설정한 형식 object입니다.
  • iOSiOS에 적용할 값으로 설정한 형식 object의
  • MacCatalyst- Mac Catalyst에 적용할 값으로 설정한 형식 object입니다.
  • Tizen- Tizen 플랫폼에 적용할 값으로 설정한 형식 object입니다.
  • WinUI- WinUI에 적용할 값으로 설정한 형식 object입니다.
  • Converter- 구현으로 설정할 수 있는 형식 IValueConverter입니다 IValueConverter .
  • ConverterParameter- 구현에 전달할 값으로 설정할 수 있는 형식 object입니다 IValueConverter .

참고 항목

XAML 파서를 사용하면 OnPlatformExtension 클래스를 OnPlatform로 축약할 수 있습니다.

속성은 Default .의 콘텐츠 속성입니다 OnPlatformExtension. 따라서 중괄호로 표현된 XAML 태그 식의 경우 첫 번째 인수인 경우 식의 일부를 제거할 Default= 수 있습니다. 속성이 Default 설정되지 않은 경우 태그 확장이 BindableProperty.DefaultValue 대상인 경우 속성 값으로 기본값이 BindableProperty지정됩니다.

Important

XAML 파서는 태그 확장을 사용하는 속성에 올바른 형식의 값이 OnPlatform 제공될 것으로 예상합니다. 형식 변환이 필요한 경우 태그 확장은 OnPlatform .NET MAUI에서 제공하는 기본 변환기를 사용하여 이를 수행하려고 시도합니다. 그러나 기본 변환기에서 수행할 수 없는 일부 형식 변환이 있으며 이러한 경우 Converter 속성을 구현으로 IValueConverter 설정해야 합니다.

OnPlatform 데모 페이지에는 태그 확장을 사용하는 OnPlatform 방법이 표시됩니다.

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

이 예제에서는 세 OnPlatform 식 모두 클래스 이름의 약어 버전을 OnPlatformExtension 사용합니다. 세 OnPlatform 가지 태그 확장은 iOS 및 Android에서 BoxView 해당 속성과 HeightRequest 속성을 서로 다른 값으로 설정합니다xref:Microsoft.Maui.Graphics.ColorWidthRequest. 태그 확장은 지정되지 않은 플랫폼에서 이러한 속성에 대한 기본값을 제공하는 동시에 식의 일부를 제거 Default= 합니다.

디바이스 관용구를 기반으로 UI 모양 사용자 지정

OnIdiom 태그 확장을 사용하면 앱이 실행 중인 디바이스의 관용구에 따라 UI 모양을 사용자 지정할 수 있습니다. 다음 속성을 정의하는 클래스에서 지원 OnIdiomExtension 됩니다.

  • Default- 디바이스 관용구를 나타내는 속성에 적용할 기본값으로 설정한 형식 object입니다.
  • Phone- 휴대폰에 적용할 값으로 설정한 형식 object입니다.
  • Tablet- 태블릿에 적용할 값으로 설정한 형식 object입니다.
  • Desktop데스크톱 플랫폼에 적용할 값으로 설정한 형식 object의 입니다.
  • TVTV 플랫폼에 적용할 값으로 설정한 형식 object의 입니다.
  • WatchWatch 플랫폼에서 적용할 값으로 설정한 형식 object의 입니다.
  • Converter- 구현으로 설정할 수 있는 형식 IValueConverter입니다 IValueConverter .
  • ConverterParameter- 구현에 전달할 값으로 설정할 수 있는 형식 object입니다 IValueConverter .

참고 항목

XAML 파서를 사용하면 OnIdiomExtension 클래스를 OnIdiom로 축약할 수 있습니다.

속성은 Default .의 콘텐츠 속성입니다 OnIdiomExtension. 따라서 중괄호로 표현된 XAML 태그 식의 경우 첫 번째 인수인 경우 식의 일부를 제거할 Default= 수 있습니다.

Important

XAML 파서는 태그 확장을 사용하는 속성에 올바른 형식의 값이 OnIdiom 제공될 것으로 예상합니다. 형식 변환이 필요한 경우 태그 확장은 OnIdiom .NET MAUI에서 제공하는 기본 변환기를 사용하여 이를 수행하려고 시도합니다. 그러나 기본 변환기에서 수행할 수 없는 일부 형식 변환이 있으며 이러한 경우 Converter 속성을 구현으로 IValueConverter 설정해야 합니다.

다음 XAML 예제에서는 태그 확장을 사용하는 OnIdiom 방법을 보여 줍니다.

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

이 예제에서는 세 OnIdiom 식 모두 클래스 이름의 약어 버전을 OnIdiomExtension 사용합니다. 세 OnIdiom 가지 태그 확장은 휴대폰, 태블릿 및 데스크톱 관용구에서 BoxView 서로 다른 값으로 , 및 HeightRequest 속성을 설정합니다ColorWidthRequest. 태그 확장은 지정되지 않은 관용구에서 이러한 속성에 대한 기본값을 제공하는 동시에 식의 일부를 제거 Default= 합니다.