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

샘플 찾아보기

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

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

특정 플랫폼 및 디바이스 관용구에 대해 앱의 UI를 최적화하는 경우 반응형 UI를 만듭니다. .NET MAUI에서 반응형 UI를 만드는 기본 방법은 OnPlatform<T> 및 OnIdiom<T> 클래스를 사용하는 것입니다. 다른 접근 방법은 OnPlatform 및 OnIdiom XAML 마크업 확장을 사용하는 것입니다. 그러나 이러한 태그 확장은 안전하게 트리밍되지 않습니다. 마크업 확장에 대한 자세한 내용은 마크업 확장을 사용하여 UI 모양 사용자 지정을 참조하세요.

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

OnPlatform<T> 및 On 클래스를 사용하면 플랫폼별로 UI 모양을 사용자 지정할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform<T> 제네릭 클래스이므로 제네릭 형식 인수(이 경우 Padding 속성의 형식인 Thickness)를 지정해야 합니다. 이 작업은 x:TypeArguments XAML 특성을 사용하여 수행됩니다. OnPlatform<T> 클래스는 모든 플랫폼에 적용할 값으로 설정할 수 있는 Default 속성을 정의합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

이 예제에서 Padding 속성은 iOS 및 Android에서 다른 값으로 설정되고 다른 플랫폼은 기본값으로 설정됩니다.

OnPlatform<T> 클래스는 On 개체로 구성된 IList 형태의 Platforms 속성도 정의합니다. 각 On 개체는 Platform 및 Value 속성을 설정하여 특정 플랫폼에 대한 Thickness 값을 정의할 수 있습니다. 또한 On.Platform 속성은 IList<string>형식이므로 값이 동일한 경우 여러 쉼표로 구분된 플랫폼을 포함할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

잘못된 Platform 값을 제공해도 오류가 발생하지 않습니다. 대신 플랫폼별 값을 적용하지 않고 XAML이 실행됩니다.

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

OnIdiom<T> 클래스를 사용하면 앱이 실행되는 디바이스의 관용구에 따라 UI 모양을 사용자 지정할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> 제네릭 클래스이므로 제네릭 형식 인수(이 경우 Margin 속성의 형식인 Thickness)를 지정해야 합니다. 이 작업은 x:TypeArguments XAML 특성을 사용하여 수행됩니다. OnIdiom<T> 클래스는 모든 플랫폼에 적용할 값으로 설정할 수 있는 Default 속성을 정의합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness" Default="20">
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

이 예제에서 Margin 속성은 데스크톱 관용구의 특정 값으로 설정되고 다른 관용구는 기본값으로 설정됩니다.

태그 확장을 사용하여 UI 모양 사용자 지정

OnPlatform 및 OnIdiom 태그 확장을 사용하여 UI 모양을 사용자 지정할 수도 있습니다. 그러나 이러한 태그 확장은 안전하게 트리밍되지 않습니다.

플랫폼에 따라 태그 확장을 사용하여 UI 모양 사용자 지정

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

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

• object형식의 Default플랫폼을 나타내는 속성에 적용할 기본값으로 설정합니다.
• Android, object유형으로 Android에 적용할 값으로 설정합니다.
• iOS에 적용할 값으로 설정한 object형식의 iOS.
• MacCatalyst는 Mac Catalyst에 적용할 값으로 설정하는 object유형입니다.
• Tizen, object형식의 Tizen 플랫폼에 적용할 값으로 설정합니다.
• WinUI는 object유형이며, WinUI에 적용할 값으로 설정됩니다.
• Converter는 IValueConverter형식의 것으로, IValueConverter 구현으로 설정할 수 있습니다.
• object형식의 ConverterParameter은(는) IValueConverter 구현에 전달할 값으로 설정할 수 있습니다.

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

다음 XAML 예제에서는 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 마크업 확장은 BoxView의 Color, WidthRequest, 및 HeightRequest 속성을 iOS 및 Android에서 서로 다른 값으로 설정합니다. 마크업 확장은 지정되지 않은 플랫폼에서 이러한 속성에 대한 기본값을 제공하는 동시에 식의 Default= 부분을 제거하는 역할을 합니다.

디바이스 관용구를 기반으로 태그 확장을 사용하여 UI 모양 사용자 지정

OnIdiom 태그 확장을 사용하면 앱이 실행 중인 디바이스의 관용구에 따라 UI 모양을 사용자 지정할 수 있습니다. OnIdiom<T> 클래스와 동일한 기능을 제공하지만 보다 간결한 표현을 제공합니다.

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

• Default, object유형으로, 디바이스 관용구를 나타내는 속성에 적용할 기본값으로 설정합니다.
• 휴대폰에 적용될 값으로 설정한 Phone, object형식입니다.
• object형식의 Tablet태블릿에 적용할 값으로 설정합니다. 이 속성은 Android 및 iOS 플랫폼에서만 사용할 수 없습니다.
• 데스크톱 플랫폼에 적용할 값으로 설정한 object형식의 Desktop. 일부 노트북은 Tablet 속성을 사용하여 분류할 수 있습니다.
• object형식의 TV을 TV 플랫폼에 적용할 값으로 설정합니다.
• Watch 플랫폼에 적용할 값으로 설정된 Watch, object유형.
• Converter은 IValueConverter유형으로, IValueConverter 구현으로 설정할 수 있습니다.
• ConverterParameter, object형식으로 IValueConverter 구현에 전달할 값으로 설정할 수 있습니다.

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

다음 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의 Color, WidthRequest및 HeightRequest 속성을 다른 값으로 설정합니다. 마크업 확장은 지정되지 않은 표현에서 이러한 속성에 대한 기본값을 제공하는 동시에 식의 Default= 부분을 제거합니다.