내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8용 다중 해상도 앱

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1만

 

Windows Phone 8 업데이트 3 은 WVGA, WXGA, 720p 및 1080p 해상도를 포함하는 휴대폰을 지원합니다. 이 점이 WVGA 해상도만 지원하는 Windows Phone OS 7.1 과 차별화되는 점입니다. 이 항목에서는 Windows Phone 8 업데이트 3 에서 지원하는 해상도와, 다양한 해상도를 사용하는 휴대폰을 대상으로 하는 앱을 개발하는 방법에 대해 설명합니다.

자세한 내용은 대형 화면 Windows Phone 이용을 참조하세요.

이 항목에는 다음 단원이 포함되어 있습니다.

 

다음 표에는 Windows Phone 8 업데이트 3 에서 지원되는 해상도 및 가로 세로 비율이 나와 있습니다.

해결 방법

해결 방법

가로 세로 비율

Windows Phone OS 7.1 의 델타

배율 조정 해상도

WVGA

480 × 800

15:9

없음. Windows Phone OS 7.1 에만 지원되는 해상도입니다.

480 × 800

WXGA

768 × 1280

15:9

1.6x 배율

480 × 800

720p

720 × 1280

16:9

1.5x 배율, 세로 80픽셀(배율 조정 후 53픽셀)

480 × 853

1080p

1080 x 1920

16:9

1.5x 배율, 세로 80픽셀(배율 조정 후 53픽셀)

480 × 853

1080p 해상도 화면에서 ScaleFactor 속성은 1.5를 반환하지만 OS 내부에서는 2.25x 배율을 사용합니다.

다음 그림은 해상도가 서로 다른 휴대폰에서 화면이 표시되는 방법을 보여 줍니다.

Examples of app running on multiple resolutions

모든 Windows Phone OS 7.1 휴대폰은 동일한 해상도를 사용하므로 콘텐츠를 한 Windows Phone OS 7.1 휴대폰에서 보기 좋게 배치할 수 있고, 이것으로 모든 Windows Phone OS 7.1 휴대폰에서 이 콘텐츠가 보기 좋게 표시됨을 알 수 있습니다. 각 컨트롤이 크기를 조정하여 흐르는 방법과 관련한 내부 사항은 고려할 필요가 없습니다.

Windows Phone 8 업데이트 3 에서는 지원되는 각 화면 비율마다 컨트롤 및 기타 UI 요소가 제대로 표시되도록 컨트롤 및 기타 UI 요소를 직접 배치해야 합니다. Windows Phone 8 업데이트 3 휴대폰은 15:9 또는 16:9의 두 가지 화면 비율 중 하나를 사용하므로 한 화면 비율에 맞게 배치된 컨트롤이 다른 화면 비율에서는 예기치 않게 배치될 수 있습니다.

WVGA, WXGA, 720p 및 1080p 해상도의 휴대폰에서 페이지가 제대로 렌더링되도록 하려면 컨트롤의 높이와 너비 또는 여백을 하드 코딩하지 마세요. 도구 상자에서 컨트롤을 끌어서 놓은 후에는 자동으로 추가된 여백을 삭제하거나 신중하게 테스트합니다.

유연성 있는 레이아웃을 만들려면 Grid 컨트롤과 같은 컨테이너를 사용할 수 있습니다. 컨트롤의 높이와 너비를 하드 코딩하는 대신 컨트롤을 그리드에 배치하고 *Auto 값을 사용하여 행과 열의 높이와 너비를 설정합니다. 이렇게 하면 사용자 휴대폰의 높이와 너비에 맞게 앱이 컨트롤을 확대 및 축소합니다. 컨트롤의 높이와 너비를 하드 코딩하는 경우 레이아웃이 다른 해상도에 맞게 조정되지 않을 수 있습니다.

중요중요:

각 화면 비율에서(15:9 및 16:9)에서 앱을 테스트해야 합니다. 해상도별로 다른 이미지 자산을 사용하는 경우가 아닌 한 각 픽셀 해상도에서 테스트할 필요는 없습니다.

다음 XAML에서는 Grid 컨트롤을 사용하여 이러한 지침을 구현하는 레이아웃에 대한 코드를 보여 줍니다.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
        BorderThickness="3" BorderBrush="White" Padding="4" 
        Margin="12">
    <TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69" />
    </Border>
    <Button Grid.Row="1" Grid.Column="0" Content="Clear" />
    <Button Grid.Row="1" Grid.Column="1" Content="/" />
    <Button Grid.Row="1" Grid.Column="2" Content="*" />
    <Button Grid.Row="1" Grid.Column="3" Content="-" />
    <Button Grid.Row="2" Grid.Column="0" Content="7" />
    <Button Grid.Row="2" Grid.Column="1" Content="8" />
    <Button Grid.Row="2" Grid.Column="2" Content="9" />
    <Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2" />
    <Button Grid.Row="3" Grid.Column="0" Content="4" />
    <Button Grid.Row="3" Grid.Column="1" Content="5" />
    <Button Grid.Row="3" Grid.Column="2" Content="6" />
    <Button Grid.Row="4" Grid.Column="0" Content="1" />
    <Button Grid.Row="4" Grid.Column="1" Content="2" />
    <Button Grid.Row="4" Grid.Column="2" Content="3" />
    <Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2" />
    <Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2" />
    <Button Grid.Row="5" Grid.Column="2" Content="." />
</Grid>

이 앱은 WVGA, WXGA, 720p 및 1080p에 대해 동적 레이아웃을 지원합니다. Height 속성이 Auto로 설정되어 있으므로 출력 상자의 크기가 WVGA 및 WXGA 휴대폰에서 동일하게 설정되고 버튼이 사용 가능한 나머지 공간에 맞춰 균등하게 축소됩니다. 720p 및 1080p 해상도에서는 버튼이 WVGA나 WXGA 해상도에서보다 약간 더 높습니다.

MinHeightMaxHeight 속성을 설정하여 최소 높이 및 최대 높이를 설정할 수 있습니다. 방향에 관계없이 8mm 미만의 화면 요소는 정확하게 터치하기가 어렵다는 것을 명심하세요. MinHeight 속성 및 MinWidth를 사용하여 대화형 요소가 예상보다 더 많이 축소되지 않도록 설정할 수 있습니다. 이 속성들을 결합하여 레이아웃이 WVGA 해상도에 맞게 축소되고, 더 높은 해상도에서는 확대되지 않도록 할 수 있습니다.

그래픽, 동영상, 오디오, 아이콘 등과 같은 자산은 앱 크기의 상당 부분을 차지합니다. 앱의 모든 해상도에 대한 자산을 포함하면 앱 공간을 많이 사용하게 됩니다. 대부분의 앱의 경우 WXGA 자산만 포함하는 것이 좋습니다. WXGA 자산은 최상의 화질을 제공하며, 다른 해상도에서도 적절하게 표시되도록 자동으로 배율을 조정합니다.

WXGA/WVGA와 720p/1080p 해상도 간 가로 세로 비율 차이로 인해 앱에 해상도마다 고유한 배경 이미지를 포함하려 할 수도 있습니다. 지원되는 모든 해상도에 대한 이미지를 앱에 포함하려면 다음 단계를 사용하여 장치 해상도를 검색한 후 런타임에 관련 이미지를 로드합니다.

런타임에 해상도 종속적 이미지를 로드하려면

  1. 프로젝트 파일에서 WVGA, WXGA 및 720p 해상도에 대한 이미지를 추가합니다. 이 예제에서는 이미지 파일 이름을 각각 MyImage.screen-wvga.png, MyImage.screen-wxga.png 및 MyImage.screen-720p.png로 지정합니다.

  2. 이미지의 출력 디렉터리로 복사 속성을 항상 복사로 설정합니다.

  3. 이름이 ResolutionHelper.cs인 클래스를 프로젝트에 추가한 후 다음 코드를 복사하여 새 클래스에 붙여 넣습니다.

    public enum Resolutions { WVGA, WXGA, HD };
    
    public static class ResolutionHelper
    {
       private static bool IsWvga
       {
          get
          {
             return App.Current.Host.Content.ScaleFactor == 100;
          }
       }
    
       private static bool IsWxga
       {
          get 
          { 
             return App.Current.Host.Content.ScaleFactor == 160; 
          }
       }
         
       private static bool IsHD
       {
          get 
          { 
             return App.Current.Host.Content.ScaleFactor == 150; 
          }
       }
    
       public static Resolutions CurrentResolution
       {
          get
          {
             if (IsWvga) return Resolutions.WVGA;
             else if (IsWxga) return Resolutions.WXGA;
             else if (IsHD) return Resolutions.HD;
             else throw new InvalidOperationException("Unknown resolution");
          }
       }
    }
    

    위의 클래스는 ScaleFactor 속성을 사용하여 장치의 해상도를 확인합니다.

  4. 다음 코드가 들어 있는 MultiResImageChooser.cs라는 클래스를 추가합니다. 이 클래스는 전 단계에서 만들어진 ResolutionHelper.cs 클래스를 사용하여 장치의 해상도를 결정합니다. 그런 다음 검색된 해상도에 해당하는 이미지의 URI에서 만든 새 BitmapImage를 반환합니다.

    using System.Windows.Media.Imaging;
    
        public class MultiResImageChooserUri
        {
            public Uri BestResolutionImage
            {
                get
                {
                    switch (ResolutionHelper.CurrentResolution)
                    {
                        case Resolutions.HD:
                            return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative);
                        case Resolutions.WXGA:
                            return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
                        case Resolutions.WVGA:
                            return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative);
                        default:
                            throw new InvalidOperationException("Unknown resolution type");
                    }
                }
            }
    
        }
    
    
  5. MainPage.xaml에서 Image 요소를 추가하고 Source 속성을 MultiResImageChooser.cs 클래스에서 반환된 URI에 바인딩합니다.

    
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
    </Grid>
    
  6. App.xaml의 <Application> 요소에서 다음 xmlns 네임스페이스 매핑을 추가합니다.

    xmlns:h="clr-namespace:MultiResSnippet"
    
  7. App.xaml에서 다음 응용프로그램 리소스를 추가합니다.

    
    <!--Application Resources-->
    <Application.Resources>
       <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
    </Application.Resources>
    

모든 해상도에 대해 시작 화면을 표시하려면 768 × 1280인 단일 이미지 파일(SplashScreenImage.jpg)을 사용합니다. 휴대폰이 이미지 배율을 올바른 크기로 자동으로 조정합니다.

모든 해상도에 대해 완벽한 픽셀의 시작 화면을 제공하려면 다음 파일명을 포함한 이미지를 추가하면 됩니다.

  • SplashScreenImage.Screen-WVGA.jpg

  • SplashScreenImage.Screen-WXGA.jpg

  • SplashScreenImage.Screen-720p.jpg

Windows Phone 8 업데이트 3 에서는 1080p 휴대폰에 기본적으로 720p 시작 화면 파일을 사용합니다.

중요중요:

모든 시작 화면 이미지는 앱 프로젝트의 루트 폴더에 있어야 합니다.

자세한 내용은 Windows Phone의 시작 화면을 만드는 방법을 참조하세요.

타일 및 앱 아이콘의 경우 WXGA 해상도에 대해서만 이미지를 포함해야 합니다. WVGA, 720p 및 1080p 화면의 경우 휴대폰이 이미지 배율을 올바른 크기로 자동으로 조정합니다. 타일 및 그 크기에 대한 자세한 내용은 Windows Phone 8의 타일을 참조하세요.

표시:
© 2014 Microsoft