태블릿 및 데스크톱 앱의 레이아웃Layout for Tablet and Desktop apps

Xamarin은 지원 되는 플랫폼에서 사용할 수 있는 모든 장치 유형을 지원 하므로 휴대폰 외에도 앱을 다음에서 실행할 수 있습니다.Xamarin.Forms supports all device types available on the supported platforms, so in addition to phones, apps can also run on:

  • IpadiPads,
  • Android 태블릿,Android tablets,
  • Windows 태블릿 및 데스크톱 컴퓨터 (Windows 10 실행).Windows tablets and desktop computers (running Windows 10).

이 페이지에 대 한 간략 한 설명:This page briefly discusses:

장치 유형Device Types

Xamarin.ios에서 지 원하는 모든 플랫폼에 대해 더 큰 화면 장치를 사용할 수 있습니다.Larger screen devices are available for all of the platforms supported by Xamarin.Forms.

Ipad (iOS)iPads (iOS)

Info.plist > Devices 설정을 유니버설 (iPhone 및 iPad가 모두 지원 됨)로 구성 하 여 xamarin.ios 템플릿에 iPad 지원이 자동으로 포함 됩니다.The Xamarin.Forms template automatically includes iPad support by configuring the Info.plist > Devices setting to Universal (which means both iPhone and iPad are supported).

편리한 시작 환경을 제공 하 고 모든 장치에서 전체 화면 해상도를 사용 하도록 하려면 iPad 특정 시작 화면 (storyboard 사용)이 제공 되어 있는지 확인 해야 합니다.To provide a pleasant startup experience, and ensure the full screen resolution is used on all devices, you should make sure an iPad-specific launch screen (using a storyboard) is provided. 이렇게 하면 iPad 미니, iPad 및 iPad Pro 장치에서 앱이 올바르게 렌더링 됩니다.This ensures the app is rendered correctly on iPad mini, iPad, and iPad Pro devices.

IOS 9 이전에 모든 앱은 장치에서 전체 화면을 차지 했지만 일부 Ipad는 이제 화면 멀티태스킹 분할을 수행할 수 있습니다.Prior to iOS 9 all apps took up the full screen on the device, but some iPads can now perform split screen multitasking. 즉, 앱에서 화면의 측면에 있는 슬림 한 열, 화면 너비의 50% 또는 전체 화면을 모두 사용할 수 있습니다.This means your app could take up just a slim column on the side of the screen, 50% of the width of the screen, or the entire screen.

화면 분할 기능을 사용 하는 경우 320 픽셀 너비 또는 1366 픽셀 너비 만큼 잘 작동 하도록 앱을 디자인 해야 합니다.Split-screen functionality means you should design your app to work well with as little as 320 pixels wide, or as much as 1366 pixels wide.

Android 태블릿Android Tablets

Android 에코 시스템은 작은 휴대폰에서 최대 규모의 태블릿까지 수많은 지원 되는 화면 크기를 가집니다.The Android ecosystem has a myriad of supported screen sizes, from small phones up to large tablets. Xamarin.ios는 모든 화면 크기를 지원할 수 있지만 다른 플랫폼과 마찬가지로 더 큰 장치에 대 한 사용자 인터페이스를 조정 하는 것이 좋습니다.Xamarin.Forms can support all screen sizes, but as with the other platforms you might want to adjust your user interface for larger devices.

다양 한 화면 해상도를 지원할 때 네이티브 이미지 리소스를 다양 한 크기로 제공 하 여 사용자 환경을 최적화할 수 있습니다.When supporting many different screen resolutions, you can provide your native image resources in different sizes to optimize the user experience. 에서 최적화 된 이미지 리소스를 포함 하도록 Android 앱 프로젝트에서 폴더 및 파일 이름을 구성 하는 방법에 대 한 자세한 내용은 android 리소스 설명서를 검토 하 고 특히 다양 한 화면 크기에 대 한 리소스를 만듭니다. 앱입니다.Review the Android resources documentation (and in particular creating resources for varying screen sizes) for more information on how to structure the folders and filenames in your Android app project to include optimized image resources in your app.

Windows 태블릿 및 데스크톱Windows Tablets and Desktops

Windows를 실행 하는 태블릿 및 데스크톱 컴퓨터를 지원 하려면 windows 10에서 실행 되는 유니버설 앱을 빌드하는 WINDOWS UWP 지원을사용 해야 합니다.To support tablets and desktop computers running Windows, you'll need to use Windows UWP support, which builds universal apps that run on Windows 10.

Windows 태블릿 및 데스크톱에서 실행 되는 앱은 전체 화면 실행 외에도 임의의 차원으로 크기를 조정할 수 있습니다.Apps running on Windows tablets and desktops can be resized to arbitrary dimensions in addition to running full-screen.

태블릿 및 데스크톱을 위한 최적화Optimizing for Tablet and Desktop

휴대폰 또는 태블릿/데스크톱 장치를 사용 중인지 여부에 따라 Xamarin.ios 사용자 인터페이스를 조정할 수 있습니다.You can adjust your Xamarin.Forms user interface depending on whether a phone or tablet/desktop device is being used. 즉, 태블릿 및 데스크톱 컴퓨터와 같은 대량 화면 장치에 대 한 사용자 환경을 최적화할 수 있습니다.This means you can optimize the user-experience for large-screen devices such as tablets and desktop computers.

장치.Device.Idiom

@No__t_1 클래스를 사용 하 여 앱 또는 사용자 인터페이스의 동작을 변경할 수 있습니다.You can use the Device class to change the behavior of your app or user interface. @No__t_0 열거를 사용 하 여 다음을 수행할 수 있습니다.Using the Device.Idiom enumeration you can

if (Device.Idiom == TargetIdiom.Phone)
{
    HeroImage.Source = ImageSource.FromFile("hero.jpg");
} else {
    HeroImage.Source = ImageSource.FromFile("herotablet.jpg");
}

이 접근 방식을 확장 하 여 개별 페이지 레이아웃을 중요 하 게 변경 하거나 큰 화면에서 완전히 다른 페이지를 렌더링할 수도 있습니다.This approach can be expanded to make significant changes to individual page layouts, or even to render entirely different pages on larger screens.

MasterDetailPage 활용Leveraging MasterDetailPage

@No__t_1 은 특히 UISplitViewController 를 사용 하 여 네이티브 iOS 환경을 제공 하는 iPad에서 큰 화면에 적합 합니다.The MasterDetailPage is ideal for larger screens, especially on the iPad where it uses the UISplitViewController to provide a native iOS experience.

이 Xamarin 블로그 게시물 을 검토 하 여 휴대폰에서 하나의 레이아웃을 사용 하 고 더 큰 화면에서 MasterDetailPage와 함께 다른 레이아웃을 사용할 수 있도록 사용자 인터페이스를 조정 하는 방법을 확인 하세요.Review this Xamarin blog post to see how you can adapt your user interface so that phones use one layout and larger screens can use another (with the MasterDetailPage).