TvOS 아이콘 및 Xamarin에서 이미지를 사용 하 여 작업Working with tvOS Icons and Images in Xamarin

영상을 만들기 아이콘 및 이미지는 Apple TV 앱에 대 한 생생한 사용자 환경을 개발 하는 중요 한 부분입니다.Creating captivating icons and imagery are a critical part of developing an immersive user experience for your Apple TV apps. 이 가이드는 만들고 Xamarin.tvOS 앱에 대 한 필요한 그래픽 자산을 포함 하는 데 필요한 단계를 설명 합니다.This guide will cover the steps required to create and include the necessary graphic assets for your Xamarin.tvOS apps:

  • 이미지를 시작한 다음 -앱을 처음 시작 하 고 시작이 완료 되 면 앱의 첫 번째 화면으로 바뀝니다 시작 이미지를 표시 합니다.Launch Image - A launch image displays when your app is first started, and is replaced by the app's first screen once launch has completed.
  • 계층화 된 이미지 -Apple TV에서 선택한 항목에 대 한 3D 효과 만드는 시차 효과 사용 하 여 Apple의 새 계층화 된 이미지 작업에 특정 합니다.Layered Images - Specific to the Apple TV, Apple's new Layered Images work with the Parallax Effect to create a 3D effect for selected items. 하는 방법은 여러 가지가 계층화 된 이미지 만들기합니다.There are several ways to Create Layered Images.
  • 앱 아이콘 -뿐 아니라 Apple TV 홈 화면에 대 한 하지만 앱 스토어 아이콘은 필수입니다.App Icon - Icons are required for not only the Apple TV Home screen but for the App Store. 계층화 된 이미지 형식으로 제공 되어야 합니다.They must be provided as a Layered Image.
  • 코너 이미지 상위 -앱 홈 화면 위쪽 행에 배치 되 면 앱의 기능을 강조 하는 인기 코너 이미지 필요 합니다.Top Shelf Image - If your app is placed on the Top Row of the Home screen, it will need a Top Shelf Image to highlight your app's features. 제공할 수 있습니다 동적 위쪽 선반 콘텐츠 앱의 콘텐츠를 강조 표시 합니다.Optionally, you can provide Dynamic Top Shelf Content to highlight the content in your app.
  • 게임 센터 이미지 -앱은 게임을 Game Center를 사용 하 여 면 몇 가지 추가 이미지가 필요 없게 됩니다.Game Center Images - If your app is a game and uses Game Center, several additional images will be required.
  • Xamarin.tvOS 프로젝트 이미지 설정 -Xamarin.tvOS 앱에 대 한 앱 아이콘 및 시작 이미지를 설정 하는 데 필요한 단계를 설명 합니다.Setting Xamarin.tvOS Project Images - Covers the steps required to set the Launch Image and App Icon for your Xamarin.tvOS app.

중요

Apple TV에서 모든 이미지는 1 x 해상도 (@1x)을 수행 해야 하 고 이 크기의 이미지를 사용 합니다.All images on the Apple TV are at the 1x resolution (@1x) and you should only use images of this size. 더 큰 등 더 높은 해상도 그래픽 뿐만 아니라 시간이 걸릴를 다운로드 하 여 더 많은 메모리와 저장소를 사용 하 여 있지만 런타임에 동적으로 크기가 다시 조정 해야 하며 그리기 성능이 저하 됩니다.Including larger, higher-resolution graphics not only take time to download and use more memory and storage, but they have to be dynamically rescaled at runtime and will negatively affect drawing performance.

시작 이미지Launch Image

시작 이미지 Xamarin.tvOS 앱 Apple TV에서 처음 시작 될 때 표시 되는 먼저 이며 이와 같이 모든 tvOS 앱 시작 이미지를 제공 해야 합니다.The Launch Image is the first thing that is displayed when your Xamarin.tvOS app is initially started on the Apple TV, and as such, every tvOS app must supply a Launch Image.

시작 이미지 신속 하 게 나타나고 앱이 빠르고 응답성을 느낄 수 있습니다.The Launch Image appears quickly and gives the impression that your app is fast and responsive. Apple TV 바뀝니다 시작 이미지를 앱의 첫 번째 화면을 사용 하 여 곧 있습니다 후.The Apple TV will replace the Launch Image with the first screen of your app shortly there after.

시작 이미지 꾸밈 식이나 광고에 대 한 영업 기회에 앱 신속 하 게 시작 하 고 준비 하는 효과 제공 하기 위한 것만 사용 하도록 합니다.Launch Images are not an opportunity for ads or artistic expression, they exist only to give the impression that your app launches quickly and is ready to use.

시작 이미지 크기Launch Image Size 노트Notes
1920x1080px1920x1080px 비-레이어.png 파일에만Non-layered .png files only

Apple에서는 앱의 시작 이미지를 디자인 하기 위한 다음 제안 합니다.Apple makes the following suggestions for designing your app's Launch Image:

  • 첫 번째 화면에 거의 동일한 -Your 시작 화면 앱의 첫 번째 화면 최대한 근접해 야 합니다.Nearly Identical to the First Screen - Your Launch Screen should be as close to your app's first screen as possible. 다른 그래픽 또는 요소를 포함 하 여 발생할 수 있습니다는 성가신 첫 번째 화면에 표시 되 면 "플래시".Including different graphics or element can result in an annoying "flash" when the first screen appears.
  • 텍스트를 사용 하 여 방지 -시작 이미지는 정적이 고 따라서 지역화 되지 않는 표시 하기 전에 합니다.Avoid Using Text - Launch Images are static and as such, will not be localized before being displayed.
  • 시작 downplay -때문에 Apple TV 사용자가 앱을 자주 전환, 앱 시작 프로세스에 주목 하지 않아야 합니다.Downplay Launch - Because Apple TV users frequently switch apps, you shouldn't draw attention to the app launch process.
  • 브랜딩 없거나 광고 -Your 시작 이미지를 정보 화면으로 사용할 수 없습니다 또는 앱의 첫 번째 화면의 정적 일부가 아닌 한 모든 브랜딩 포함 합니다.No Ads or Branding - Your Launch Image should not be used as an About screen or include any branding unless it is static part of your app's first screen. 광고 엄격 하 게 사용할 수 없습니다.Ads are strictly prohibited.

시작 이미지 설정Setting the Launch Image

TvOS 프로젝트 시작 이미지를 설정 하려면 다음을 수행 하십시오.To set the Launch Image for your tvOS project, please do the following:

  1. 솔루션 탐색기를 두 번 클릭 Assets.xcassets 열어 편집 하려면:In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기를 클릭 합니다 LaunchImages 자산:In the Asset Editor, click on the LaunchImages asset:

  3. 클릭 합니다 Apple TV x 1 항목 및 시작 이미지를 선택 하거나 필요에 따라 끌어서 새 이미지를 파일 시스템에서:Click on the 1x Apple TV entry and select the Launch Image or optionally drag a new image in from the file system:

  4. 변경 내용을 저장합니다.Save your changes.

계층화 된 이미지Layered Images

새 Apple TV, 소파 사항을 마음속를 통해 연결 된 화면의 콘텐츠 대화방에 사용자를 유지 하는 데 도움이 되는 3D 효과 생성 하기 위해 시차 효과 사용 하 여 계층화 된 이미지 작업을 합니다.New to the Apple TV, Layered Images work with the Parallax Effect to produce a 3D effect that helps to keep the user on the couch mentally connected to the content on the screen across the room.

계층화 된 이미지에는 다음이 포함 되어에서 두 개의 (2) 5 (5)로 결합 되어 전체 이미지를 구성 하는 계층을 구분 합니다.Layered Images contain from two (2) to five (5) separate layers that are combined to form a complete image. 배경 계층을 제외 하 고 각 계층 투명도 함께 해당 Z 순서 사용 하 여 깊이 효과를 만듭니다.With the exception of the background layer, each layer uses its Z-order along with transparency to create an illusion of depth. 계층화 된 이미지를 사용 하 여 사용자 상호 작용, 더 높은 Z 순서 계층 확장 되 고 overlapped이 효과를 만듭니다.When the user interacts with a Layered Image, higher Z-ordered layers are scaled and overlapped to create this effect.

중요

계층화 된 이미지는 앱의 아이콘에 대 한 필수 항목이 며 다른 선택적 포커스 항목 (예: 인기 코너 이미지).Layered Images are required for your app's icons and are optional for other Focusable Items (such as the Top Shelf Image). 그러나 Apple에서 계층화 된 이미지를 사용 하 여 앱에서 포커스를 얻을 수 있는 모든 이미지에 대 한 제안 합니다.However, Apple suggests using Layered Images for any image that can get focus in your app.

Apple에서는 계층화 된 이미지를 디자인 하기 위한 다음 제안 합니다.Apple makes the following suggestions for designing your Layered Images:

  • 배경 계층 불투명 확인 -배경 계층 (계층 1) 해야 불투명 또는 Apple TV에 계층화 된 이미지를 사용 하려고 할 때 오류를 얻게 됩니다.Make the Background Layer Opaque - Your background layer (layer 1) must be opaque or you'll get an error when you try to use the Layered Image on Apple TV. 다른 모든 계층에는 여러 수준의 투명도 3 차원 효과 향상 시키기 위해 포함할 수 있습니다.All other layers can contain multiple levels of transparency to enhance the 3D effect.
  • 전경, 중간 및 배경 요소 격리 -주요 요소 (예: 게임 자) 전경에서 사용 하 여 중간 보조 요소에 그림자입니다.Isolate Foreground, Middle and Background Elements - Place prominent elements (like game characters) in the foreground, use the middle for secondary elements or shadows. 마지막으로, 중립 백그라운드에 상위 계층에 대 한 단계를 제공 하기를 포함 합니다.Finally, include a neutral background to provide a stage for your upper layers.
  • 텍스트 전경에 유지 -텍스트 수준이 높은 가립니다 수를 원하는 경우가 아니면 일반적으로 것 최상위 계층에 있습니다.Keep Text in the Foreground - Unless you want your text to be obscured by higher levels, generally it should be on the topmost layer.
  • 간단한 계층화를 사용 하 여 -The 시차 효과 미묘한 설계 되었습니다 따라서 jarring, 비현실적 효과 방지 하기 위해 최소 사용자 계층을 유지 합니다.Use Simple Layering - The Parallax Effect was designed to be subtle so keep your layers to a minimal to prevent jarring, unrealistic effects.
  • 안전 영역 포함 -시차 효과 중 상위 계층을 자를 수 있습니다, 때문에 각 계층에 안전한 영역 테두리를 구축 해야 합니다.Include a Safe Zone - Because upper layers can be cropped during a Parallax Effect, you need to build a Safe Zone border into each layer. 너무 가깝게 계층 edge 내용을 받게 되 면에서 잘리는 크기 될 수 있습니다.If you get your content too close the layers edge, it can become cropped off. 더 많은 크기 조정 및 자르기 하위 계층 보다 상위 계층 경험할 수 있습니다.Upper layers will experience more scaling and cropping than lower layers. 참조를 크기 조정 이미지 계층 아래의 섹션입니다.See the Sizing Image Layers section below.
  • 주로 미리 -계층화 된 이미지를 원하는 경우 3D 효과가 발생 하 고 개별 계층에서 콘텐츠 하나도 자가 되는 빈도를 미리 볼 수 해야 합니다.Preview Often - Layered Images should be previewed often to ensure that the desired 3D effect occurs and that none of the content on the individual layers is being cropped. 예상 대로 렌더링 되도록 실제 Apple TV 하드웨어에서 계층화 된 이미지를 미리 봐야 합니다.You should preview your Layered Images on real Apple TV hardware to make sure they render as expected.

기본 제공 가능 하면 항상 사용 해야 UIKit 포커스에 나올 때 시차 효과 자동으로 얻게 될 것 처럼 계층화 된 이미지를 표시 하는 컨트롤입니다.Whenever possible, you should always use the built-in UIKit controls to display your Layered Images, as they will automatically get the Parallax Effect when they come into focus.

크기 조정 이미지 계층Sizing Image Layers

반드시 포함 해야 하는 안전한 영역 테두리는 계층화 된 이미지를 구성 하는 각 계층에 합니다.It is important to remember to include a Safe Zone border into each layer that will compose your Layered Image. 개별 계층을 확장 하 고 시차 효과 중 자를 수, 있으므로 계층의 가장자리에 너무 가까워지면 경우 계층의 콘텐츠 해제 자를 수 있습니다.Because the individual layers can be scaled and cropped during the Parallax Effect, the content of the layers can be cropped off if it is too close to the layer's edge:

계층화 된 이미지 만들기Creating Layered Images

tvOS는 계층화 된 이미지를 사용 하 여 다음 형식으로 작동합니다.tvOS works with Layered Images in the following formats:

  • 자동차 파일 -Apple에서 만든를 전용 자산 카탈로그 형식입니다.CAR Files - This is a proprietary Asset Catalog format created by Apple. 자동차 파일을 직접 만들지 않으면, 모든 LSR 파일에서 컴파일 타임에 생성 되 고 앱 번들에 포함 합니다.You do not create CAR files directly, they are created at compile time from any LSR files and included in your app bundle.
  • LSR 이미지 -이 Apple에서 만든 전용 이미지 형식입니다.LSR Images - This is a proprietary image format created by Apple. 사용 하 여는 Parallax 내보내기 Adobe Photoshop 플러그 인 또는 Parallax 미리 보기 만들고 LSR 형식으로 계층화 된 이미지를 미리 봅니다.Use the Parallax Exporter Adobe Photoshop Plugin or the Parallax Previewer to create and preview Layered Images in the LSR format.
  • Assets.xcassets -에서 두 개의 (2)에 5 개의 표준 .png 자동차 또는 LSR 컴파일되는 자산 카탈로그에 포함 된 형식이 지정 된 이미지 형식이 컴파일 타임에 계층화 된 이미지를 지정 합니다.Assets.xcassets - From two (2) to five (5) standard .png formatted images included in an Asset Catalog that will be compiled into a CAR or LSR formatted Layered Image at compile time.
  • LCR 파일 -Apple에서 만든는 독점 파일 형식입니다.LCR Files - This is a proprietary file format created by Apple. LCR 파일 콘텐츠 서버 중 하나에서 다운로드 하는 추가 콘텐츠로 사용할 수는 있습니다.LCR files are intended to be used as additional content downloaded from one of your content servers. LCR 파일 앱 번들에 포함 하지 않을 합니다.LCR file should never be included in your app bundle. LCR 파일이 사용 하 여 LSR 또는 Photoshop 파일에서 생성 됩니다는 layerutil Xcode 명령줄 도구입니다.LCR files are generated from LSR or Photoshop files using the layerutil command line tool included with Xcode.

시차 미리 보기The Parallax Previewer

생성 하는 Apple 합니다 시차 미리 보기 미리 보기를 앱 아이콘 및 포커스를 받을 수 있는 선택 항목에 대 한 필요한 만든된 계층화 된 이미지입니다.Apple created the Parallax Previewer to preview and created Layered Images required for App Icons and optional Focusable Items. 미리 보기에서는 완료 된 계층화 된 이미지를 구성 하는 모든 계층을 보여 줍니다.The previewer shows every layer that forms the completed Layered Image:

계층화 된 이미지를 미리 보면서, 이미지를 회전 하 고 시차 효과 미리 보기에 마우스를 사용할 수 있습니다.While previewing a Layered Image, you can use the mouse to rotate the image and preview the Parallax Effect. 사용 된 + (더하기) 및 - (빼기) 단추를 추가 하 고 계층을 제거 합니다.Use the + (plus) and - (minus) buttons to add and remove layers.

새 계층화 된 이미지를 만들 때 LSR 형식으로 내보내는 하 고 앱의 번들에 포함 될 수 있습니다.When creating a new Layered Image, it can be exported in the LSR format and included in your app's bundle.

만들고 계층화 된 이미지를 미리 보기에 대 한 자세한 내용은 Apple의를 참조 하세요 시차 아트 워크를 만드는 섹션을 tvOS 앱 프로그래밍 가이드합니다.For more information on creating and previewing Layered Images, please see Apple's Creating Parallax Artwork section of the App Programming Guide for tvOS.

앱 아이콘App Icons

Xamarin.tvOS 앱 Apple TV 홈 화면에서 뿐만 아니라 앱 스토어 아이콘에 대 한 앱 아이콘 뿐 아니라 해야 합니다.Your Xamarin.tvOS app will require not only an App Icon for the Apple TV Home screen, but also an icon for the App Store. 앱 아이콘은의 첫 번째 잠재적 사용자에서 매우 깊은 인상을 변경 및 한눈에 앱의 목적을 전달 해야 합니다.The App Icon is the your first change to make a great impression on your potential user and should communicate your app's purpose at a glance.

모든 앱에는 작은 해당 앱 아이콘의 큰 버전을 제공 해야 합니다.Every app must supply both a small and a large version of its App Icon. 작은 아이콘은 앱을 설치할 때 Apple TV 홈 화면에서 사용 됩니다.The small icon will be used on the Apple TV Home screen when the app is installed. 큰 버전을 앱 스토어에서 사용 됩니다.The large version is used by the App Store. 큰 앱 아이콘에는 작은 아이콘 버전의 모양과 느낌와 비슷해야 합니다.The large App Icon should mimic the look and feel of the small icon version.

작은 아이콘Small Icon 큰 아이콘Large Icon
실제 크기Actual Size 400x240px400x240px 크기Size 1280x768px1280x768px
안전 영역 크기Safe Zone Size 370x222px370x222px
포커스가 없는 크기Unfocused Size 300x180px300x180px
포커스가 있는 크기Focused Size 370x222px370x222px

중요

앱 아이콘으로 제공 되어야 합니다 계층화 된 이미지합니다.Your App Icons must be provided as Layered Images. 참조 하십시오 합니다 계층화 된 이미지 대 한 자세한 내용은 위의 섹션입니다.Please see the Layered Image section above for more details.

Apple에 앱 아이콘을 만들기 위한 다음 제안 사항을 제공 합니다.Apple provides the following suggestions for creating your App Icons:

  • 단일 포커스 지점을 제공 – 단일 포커스 지점과 아이콘 디자인 아이콘의 중심에 직접 배치 합니다.Provide a Single Focus Point – Design your icon with a single focus point placed directly in the center of the icon.
  • 간단한 배경 사용 – 상위 계층을 차별화 하 여 아이콘 배경을 단순하게 유지 합니다. 단순한 색 또는 미묘한 그라데이션을 사용 하는 것이 좋습니다.Use a Simple Background – Keep your icon background simple so that the upper layers stand out. Consider using a simple color or subtle gradient.
  • 텍스트의 양을 제한 – 앱의 이름을 사용자가 선택 하면 아이콘 아래에 표시 됩니다, 때문만 포함 해야 텍스트 때 아이콘을 디자인 하는 데 필수적입니다.Limit the Amount of Text – Since the app's name will appear below the icon when it is selected by the user, you should only include text when it is essential to the design of the icon.
  • 스크린샷을 사용 하지 않는 – 스크린 샷 아이콘에 대 한 너무 복잡 하 고 한눈에 앱의 용도 보려는 사용자를 허용 하지 않습니다.Don't use Screenshots – Screenshots are too complex for an icon and don't allow the user to see the purpose of your app at a glance.
  • 유지 아이콘 사각형 – tvOS 약간 아이콘이 둥글게 하는 마스크를 자동으로 적용 됩니다.Keep Icons Square – tvOS automatically applies a mask that subtly rounds the corners of your icons. 사용자가 직접이 반올림을 포함 하지 마십시오.Don't include this rounding yourself.
  • 사용자 계층을 주의 깊게 분리 – 대부분의 계층, 중간에 상위 계층 빛을 허용 하는 중립 백그라운드에 보조 항목 텍스트 위에 있어야 합니다.Separate Your Layers Carefully – Text should be on the upper most layer, secondary items in the middle and a neutral background that allows your upper layers to shine.
  • 그라데이션 및 신중 하 게 그림자를 사용 하 여 – 신중 하 게 사용 해야 하므로 그라데이션 및 그림자 시차 효과 사용 하 여 충돌 수입니다.Use Gradients and Shadows Carefully – Gradients and shadows can clash with the Parallax Effect so they should be used carefully. 간단한 위쪽-아래쪽을 밝게-어둡게 그라데이션 스타일 가장 효과적입니다.Simple top-to-bottom, light-to-dark gradient styles work best. 그림자는 일반적으로 날카로운, 선명한 색조로 가장 잘 작동 합니다.Shadows normally work best as sharp, hard-edged tints.
  • 계층 투명도 다 – 다양 한 3D 효과 높이기 위해 앱 아이콘의 상위 수준에서 투명도 수준을 사용 합니다.Vary Layer Transparency – Use varying levels of transparency on the upper levels of your App Icon to increase the 3D effect. 배경 계층 불투명 이거나 오류가 발생 합니다.The background layer must be opaque or it will result in an error.

앱 아이콘 설정Setting the App Icons

TvOS 프로젝트에 필요한 앱 아이콘을 설정 하려면 다음을 수행 하십시오.To set the App Icons required for your tvOS project, please do the following:

  1. 솔루션 탐색기를 두 번 클릭 Assets.xcassets 열어 편집 하려면:In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기를 확장 하 고는 App Icon & Top Shelf Image 자산:In the Asset Editor, expand the App Icon & Top Shelf Image asset:

  3. 다음으로, 확장 된 App Icon - Small 자산:Next, Expand the App Icon - Small asset:

  4. 다음를 확장 합니다 Back 자산 및 클릭을 Contents 항목:Then expand the Back asset and click on the Contents entry:

  5. 클릭 합니다 Apple TV 항목 x 1 이미지 파일을 선택 합니다.Click on the 1x Apple TV entry and select an image file.

  6. 에 대해 위의 단계를 반복 합니다 FrontMiddle 자산입니다.Repeat the above steps for the Front and Middle assets.

  7. 다음 정의 하려면 동일한 단계를 반복 합니다 App Icon - Large 자산입니다.Then repeat the same steps to define the App Icon - Large asset.

  8. 변경 내용을 저장합니다.Save your changes.

인기 코너 이미지Top Shelf Image

Apple TV 홈 화면의 위쪽 행에 Xamarin.tvOS 앱을 배치 하는 경우 사용자가 앱을 선택한 경우 큰 인기 코너 이미지 표시 됩니다.If the user has placed your Xamarin.tvOS app on the Top Row on the Apple TV Home screen, a large Top Shelf Image will be displayed when your app is selected by the user. 이 이미지는 앱의 기능을 강조 하거나 해당 내용에 대 한 직접 링크를 제공 해야 합니다.This image should highlight the features of your app or provide direct links to its content.

단일 정적으로 인기 코너 이미지 제공 .png 하거나 .lsr 파일 (참조 계층화 된 이미지 만들기)를 동적으로 만들기 런타임에 포커스 가능 항목의 단일 행으로 또는 (참조 위쪽 선반 동적 콘텐츠 아래).The Top Shelf Image can either be provided as a single static .png or .lsr file (see Creating Layered Images) or it can be dynamically created at runtime as a single row of Focusable Items (see Dynamic Top Shelf Content below).

위쪽 선반 이미지 크기Top Shelf Image Size 노트Notes
1920x720px1920x720px 정적.png 또는 계층화 된.lsr 파일Static .png or layered .lsr file

Apple에서는 위쪽 선반 이미지를 만들기 위한 다음 제안 사항을 제공 합니다.Apple provides the following suggestions for creating your Top Shelf Images:

  • 다양 한 정적 이미지를 사용 하 여 – 해당 인기 코너 이미지 포커스 될 앱 동적 콘텐츠를 제공 하지 않습니다.Use Rich Static Imagery – If your app does not provide a dynamic content, its Top Shelf Image will be non-focusable. 이 이미지를 사용 하 여 앱 또는 브랜드의 기능을 강조 합니다.Use this image to highlight the features of the app or your brand.
  • 앱 콘텐츠 링크 – 동적 위쪽 선반 레이아웃 빠른 링크를 사용자 앱에서 가장 중요 한 찾는 콘텐츠를 제공 합니다.Link to App Content – Dynamic Top Shelf Layouts provide a quick link to the content that your user finds most important in your app. 앱을 시작 하 고 지정 된 콘텐츠를 즉시 이동에 대 한 빠른 링크를 제공 하려면이 영역을 사용 합니다.Use this area to provide a quick link to start your app and immediately jump into the given content.
  • 최신 콘텐츠를 표시 – 다양 한 인기 코너 콘텐츠를 앱에 사용자를 그리는 자세한 하는 데 사용할 수 있도록 합니다.Showcase the Latest Content – Rich Top Shelf content can draw a user into your app and make them want to use it more. 최고 등급 또는 최신 콘텐츠를 소개 하는 영역으로 사용 합니다.Use this as an area to showcase the highest rated or newest content.
  • 콘텐츠를 개인 설정 된 –가 가장 자주 사용 하는 사용자 환경이 나 홈 화면의 위쪽 행의 즐겨 찾는 앱.Personalized Content – Users place their most frequently used or favorite apps in the Top Row of the Home screen. 가장 관심이 되는 콘텐츠를 표시할 인기 코너를 사용 합니다.Use the Top Shelf to display the content they would be most interested in.
  • 광고를 사용할 수 없습니다 – 광고 인기 코너에 표시 되지 않도록 금지 엄격 하 게 됩니다.Ads Not Allowed – Ads are strictly prohibited from being displayed in the Top Shelf. 최신 구입 가능한 콘텐츠를 표시 될 수 있습니다 하지만 없는 가격 책정 정보를 표시 합니다.You may show the latest purchasable content, but no pricing information should be displayed.

인기 코너 이미지 설정Setting the Top Shelf Image

TvOS 프로젝트에 필요한 인기 코너 이미지를 설정 하려면 다음을 수행 하십시오.To set the Top Shelf Image required for your tvOS project, please do the following:

  1. 솔루션 탐색기를 두 번 클릭 Assets.xcassets 열어 편집 하려면:In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기를 확장 하 고는 App Icon & Top Shelf Image 자산:In the Asset Editor, expand the App Icon & Top Shelf Image asset:

  3. 클릭 된 Top Shelf Image 자산:Click on the Top Shelf Image asset:

  4. 클릭 합니다 Apple TV 항목 x 1 이미지 파일을 선택 합니다.Click on the 1x Apple TV entry and select an image file.

  5. 변경 내용을 저장합니다.Save your changes.

위쪽 선반 동적 콘텐츠Dynamic Top Shelf Content

위쪽 선반 정적 인기 코너 이미지를 표시 하는 대신 동적 행을 포함할 수 있습니다 포커스 항목 또는 배너를 스크롤의 동적 집합입니다.Instead of displaying a static Top Shelf Image, the Top Shelf can contain a dynamic row of Focusable Items or a dynamic set of scrolling banners. 둘 다 이러한 동적 스타일의 앱 또는 자주 사용 하는 기능에 대 한 점프 하 여 제공 된 콘텐츠를 강조 표시할 수 있습니다.Both of these dynamic style allow you to highlight the content provided by your app or jump into its most used features.

구역이 구분 되어 있으며 콘텐츠 행Sectioned Content Row

이 동적 인기 코너 콘텐츠 형식 스크롤, 필요에 따라 섹션으로 세분화 포커스 가능 항목의 단일 행을 표시 합니다.This dynamic Top Shelf content type presents a single row of scrolling, Focusable Items optionally broken down into sections. 즐겨 찾는 새 강조 하려면 일반적으로 사용 됩니다 또는 최근에 앱 콘텐츠를 표시 합니다.It's typically used to highlight new, favorite or recently viewed app content.

콘텐츠는 콘텐츠의 현재 선택한 콘텐츠 부분 아래에 나타나는 레이블 사용 하 여 (현재 포커스를가지고) 단일, 가로 스크롤 목록으로 표시 됩니다.Content is presented as a single, horizontal scrolling list of content with a label appearing under the current piece of content selected (that currently has focus). 사용자가 지정 된 부분 콘텐츠를 선택 하는 경우 앱 시작 및 해당 콘텐츠를 직접 수행 해야 합니다.If the user selects a given piece of content, your app will be launched and they should be taken directly into that content.

다음 콘텐츠 크기를 지정 해야 합니다.The following content sizes will be required:

포스터 (2:3)Poster (2:3) Square (1:1)Square (1:1) HDTV (16:9)HDTV (16:9)
실제 크기Actual Size 404x608px404x608px 608x608px608x608px 908x512px908x512px
안전 영역 크기Safe Zone Size 380x570px380x570px 570x570px570x570px 852x479px852x479px
포커스가 없는 크기Unfocused Size 333x500px333x500px 500x500px500x500px 782x440px782x440px
포커스가 있는 크기Focused Size 380x570px380x570px 570x570px570x570px 852x479px852x479px

Apple에서는 콘텐츠 단면화 행에 대해 다음 제안 사항을 제공합니다.Apple provides the following suggestions for the Sectioned Content Row:

  • 행을 완료 – 화면의 너비 전체에 걸쳐 충분 한 콘텐츠를 제공 해야 합니다.Complete the Row – You should provide enough content to span the full width of the screen.
  • 혼합 이미지 크기를 조정 – The 콘텐츠 단면화 행 설계 된 다양 한 이미지 크기 (에서 위에 제공 된 목록)을 보관 합니다.Scaling Mixed Images – The Sectioned Content Row was designed to hold a mix of image sizes (from the list provided above). 하지만 이미지 크기를 혼합 수행 하는 경우는 추가 확장에 적용할 정규화 콘텐츠 표시를 알아야 합니다.If you do mix image sizes however, be aware that additional scaling will be applied to normalize the content display.

스크롤 Inset 배너Scrolling Inset Banners

필요에 따라 Xamarin.tvOS 앱을 자동으로 스크롤 및 거의 화면을 채우는 배너의 컬렉션을 반복으로 위쪽 선반에 해당 콘텐츠를 제공할 수 있습니다.Optionally, your Xamarin.tvOS app can present its content in the Top Shelf as an automatically scrolling and looping collection of banners that nearly fill the screen. 이 스타일은 일반적으로 새 tv와 같은 다양 한, 새 콘텐츠를 보여 주기 위해 사용 됩니다.This style is typically used to showcase rich, new content like new TV shows.

자동 스크롤 하는 것 외에도 사용자는 배너를 제어 하 고 Siri 원격을 사용 하 여 어느 방향으로 스크롤할 수 있습니다.In addition to the automatic scrolling, the user can take control of the banners and scroll in either direction using the Siri Remote. 배너에 포커스가 있을 때 Siri 원격 순환 제스처는 작은 하는 경우의 시차 효과 배너를 정품 인증 됩니다.Making a small, circular gesture on the Siri Remote when a banner is in focus will activate the Parallax Effect for that banner.

배너 이미지 (추가 Wide)Banner Image (Extra Wide)

실제 크기Actual Size 1940x624px1940x624px
안전 영역 크기Safe Zone Size 1740x620px1740x620px
포커스가 없는 크기Unfocused Size 1740x560px1740x560px
포커스가 있는 크기Focused Size 1740x620px1740x620px

Inset 배너 스크롤 하거나 지정할 수 있습니다 정적 .png 계층화 또는 .lsr 파일입니다.Scrolling Inset Banners can either be provided as a static .png or layered .lsr file.

Apple에서는 스크롤 Inset 배너에 대 한 다음 제안 사항을 제공합니다.Apple provides the following suggestions for the Scrolling Inset Banners:

  • 콘텐츠 크기 -자연 스러운 느낌으로 스크롤 하는 것에 대 한 최소 3 개의 배너를 제공 해야 합니다.Content Amount - You should provide a minimum of three (3) banners for the scrolling to feel natural. 개 이하의 8 (8) 배너를 포함 해야 하거나 해당 탐색 하드 최종 사용자에 대 한 합니다.You should include no more than eight (8) banners or it make navigation hard for the end user.
  • 텍스트 콘텐츠 -배너의 텍스트는 배너 이미지에 포함할지를 요구 하는 경우.Content Text - If your banner requires text in should be included in the banner image. 계층화 된 이미지를 사용 하는 경우 텍스트는 최상위 계층에 있어야 합니다.If you are using Layered Images, your text should be in the topmost layer.

Apple의를 참조 하세요 TVServices 프레임 워크 참조 동적 인기 코너 콘텐츠를 제공 하기 위해 앱으로 위쪽 선반 확장명을 추가 하는 방법은 합니다.Please see Apple's TVServices Framework Reference for more information on adding a Top Shelf Extension to your app to provide dynamic Top Shelf content.

게임 센터 이미지Game Center Images

Game Center 지원을 포함 한 Xamarin.tvOS 앱은 게임을 하는 경우에 몇 가지 자세한 이미지 자산 필요한 됩니다.If your Xamarin.tvOS app is a game and you've included Game Center support, several more image assets will be required:

  • 도전 과제 아이콘 -불투명 이미지 원에 자동으로 잘립니다는 각 도전 과제에 필요 합니다.Achievement Icons - An opaque image is required for each achievement that will be automatically cropped into a circle. 성과 포커스를 받을 수 없는 항목입니다.Achievements are non-focusable items.
  • 대시보드 아트 워크 -Game Center 앱의 대시보드 위쪽에 표시할 선택적 이미지로 사용할 수 있습니다.Dashboard Artwork - An optional image can be provided that will appear at the top of your app's dashboard within Game Center. 이러한 이미지는 비-포커스를 받을 수 있습니다.These images are non-focusable.
  • 순위표 아트 워크 -제공 해야 간에 1 개를 3 개 16:9 가로 세로 비율 이미지 앱을 지 원하는 각 순위표에 대 한 합니다.Leaderboard Artwork - You must provide between one (1) to three (3) 16:9 aspect ratio images for each leaderboard that your app supports. 이러한 정적 될 .png 계층화 또는 .lsr 파일입니다.These may be either static .png or layered .lsr files. 순위표 아트 워크는 포커스를 받을 수 있습니다.The Leaderboard artwork is focusable.
도전 과제 아이콘Achievement Icons 대시보드 아트 워크Dashboard Artwork 순위표 아트 워크Leaderboard Artwork
표시 크기Visible Size 200x200px200x200px 923x150px923x150px N/An/a
실제 크기Actual Size 320x320px320x320px N/An/a 659x371px659x371px
안전 영역 크기Safe Zone Size N/An/a N/An/a 618x348px618x348px
포커스가 없는 크기Unfocused Size N/An/a N/An/a 548x309px548x309px
포커스가 있는 크기Focused Size N/An/a N/An/a 618x348px618x348px

Game Center 사용에 대 한 자세한 내용은 Apple의를 참조 하세요 Game Center 프로그래밍 가이드합니다.For more information about working with Game Center, please see Apple's Game Center Programming Guide.

이미지 작업Working with Images

TvOS 9 iOS 9 포함 하 고 Xamarin.iOS 응용 프로그램에서 이미지를 표시 하는 데 동일한 기술의 하위 집합 이므로 Xamarin.tvOS 앱 에서도 작동 합니다.Since tvOS 9 is a subset of iOS 9, the same techniques used to include and display images in a Xamarin.iOS app, also work for a Xamarin.tvOS app. 참조 하세요 우리의 이미지로 표시 자세한 정보에 대 한 설명서입니다.Please see our Displaying an Image documentation for more information.

Xamarin.tvOS 프로젝트 이미지 설정Setting Xamarin.tvOS Project Images

위에서 설명한 대로 모든 tvOS 앱 필요는 시작 이미지, 및 앱 아이콘합니다.As stated above, all tvOS apps require a Launch Image, and App Icon. 이 섹션에서는 자산 카탈로그에서 설정한 후 Xamarin.tvOS 앱 프로젝트에 대 한 시작 이미지 및 앱 아이콘을 선택에 대해 설명 합니다.This section covers selecting the Launch Image and App Icon for your Xamarin.tvOS app project after they have been set in an Asset Catalog.

다음을 수행합니다.Do the following:

  1. 솔루션 탐색기, 두 번 클릭는 Info.plist 열어 편집 하려면:In the Solution Explorer, double-click the Info.plist to open it for editing:

  2. Info.Plist 편집기, 자산 카탈로그를 선택 (에서 위의 구성는 앱 아이콘 설정 섹션)에 대 한를 앱 아이콘:In the Info.Plist Editor, select the Assets Catalog (configured above in the Setting the App Icons section) for the App Icons:

  3. 자산 카탈로그를 선택 하는 다음으로, (에서 위의 구성 합니다 시작 이미지 설정 섹션)에 대 한는 시작 이미지.Next, select the Assets Catalog (configured above in the Setting the Launch Image section) for the Launch Images.

  4. 변경 내용을 저장합니다.Save your changes.

요약Summary

이 문서에서는 이미지 형식 및 Xamarin.tvOS 앱에서 사용 된 크기의 모든 설명 했습니다.This article has covered all of the image types and sizes used in a Xamarin.tvOS app. 첫째, 시작 이미지, 계층화 된 이미지를 앱 아이콘, 위쪽 선반 이미지 및 게임 센터 이미지 설명합니다.First, it covered Launch Images, Layered Images, App Icons, Top Shelf Images and Game Center Images. 그런 다음 Xamarin.tvOS 앱에서 이미지 작업에 대해서 설명합니다.Then it covered working with images in your Xamarin.tvOS app.