Xamarin에서 tvOS 탭 모음 컨트롤러 작업Working with tvOS Tab Bar Controllers in Xamarin

여러 유형의 tvOS apps의 경우 기본 탐색이 화면 위쪽에서 실행 되는 탭 막대로 표시 됩니다.For many types of tvOS apps, primary navigation is presented as a Tab Bar running across the top of the screen. 사용자는 사용 가능한 범주 목록에서 왼쪽과 오른쪽으로 swipes 사용자의 선택 항목을 반영 하도록 변경 내용 아래의 콘텐츠 영역을 표시 합니다.The user swipes left and right across the list of possible Categories and the content area below the changes to reflect the user's selection.

탭 모음은 기본적으로 반투명 이며 항상 화면 맨 위에 표시 됩니다.The Tab Bar is translucent by default and always appears at the top of the screen. 포커스가 있는 경우 탭 모음은 화면의 상위 140 픽셀을 포함 하지만 아래 콘텐츠 영역으로 포커스가 이동 하면 신속 하 게 밉니다.When in focus, a Tab Bar will cover the top 140 pixels of the screen but will quickly slide away when focus shifts to the content area below.

TvOS 탭 모음Tab Bars in tvOS

UITabViewController는 비슷한 방식으로 작동 하며 iOS에서와 같이 tvOS에서 비슷한 용도로 사용 되며 다음과 같은 주요 차이점이 있습니다.The UITabViewController works in a similar manner and serves a similar purpose on tvOS as it does in iOS, with the following key differences:

  • 화면 맨 아래에 표시 되는 iOS의 탭 표시줄과 달리 tvOS의 탭 모음은 화면의 상위 140 픽셀을 차지 하 고 기본적으로 투명 합니다.Unlike the Tab Bar on iOS which appears at the bottom of the screen, Tab Bars in tvOS occupy the top 140 pixels of the screen and are translucent by default.
  • 포커스가 아래 콘텐츠 영역에 대 한 탭 모음을 벗어나면 탭 모음이 화면 맨 위에 빠르게 슬라이드를 표시 하 고 숨깁니다.When focus leaves the Tab Bar for the content area below, the Tab Bar will quickly slide off the top of the screen and be hidden. 사용자는 메뉴 단추를 한 번 탭 하거나 Siri 원격 에서 위로 살짝 밀어 탭 막대를 다시 표시할 수 있습니다.The user can either tap the Menu button once or swipe up on the Siri Remote to show the Tab Bar again.
  • Siri 원격에서 아래로 살짝 밀기는 표시 되는 콘텐츠에서 첫 번째 포커스 가능 항목 으로 탭 표시줄 아래의 콘텐츠 영역으로 포커스를 이동 합니다.Swiping down on the Siri Remote will move focus to the content area below the Tab Bar to the first Focusable Item in the content being shown. 그러면 포커스가 이동 하는 동안 탭 모음이 숨겨집니다.Again, this will hide the Tab Bar once focus shifts.
  • 탭 표시줄에 표시 되는 범주를 클릭 하 여 선택 하면 해당 범주의 콘텐츠로 전환 되 고 포커스가 해당 보기에서 포커스를 받을 수 있는 첫 번째 항목으로 전환 됩니다.Clicking to select a Category displayed in the Tab Bar will switch to that category's content and focus will be switched to the first Focusable Item in that view.
  • 탭 표시줄에 표시 되는 범주 수는 고정 되어야 하며 모든 범주는 항상 액세스할 수 있어야 합니다. 지정 된 범주는 사용 하지 않도록 설정 하면 안 됩니다.The number of Categories displayed in the Tab Bar should be fixed and all Categories should be accessible at all times, a given Category should never be disabled.
  • 탭 모음은 tvOS에서 사용자 지정을 지원 하지 않습니다.Tab Bars do not support customization on tvOS. 또한 탭 표시줄에 포함할 수 있는 것 보다 더 많은 범주가 있는 경우 더 많은 범주 (예: iOS)를 표시 하지 않습니다.Additionally, they do not show the More Category (like iOS) if there are more Categories than can fit in the Tab Bar.

Apple에는 탭 모음 사용에 대 한 다음과 같은 제안이 있습니다.Apple has the following suggestions for working with Tab Bars:

  • 탭 막대를 사용 하 여 논리적으로 콘텐츠 구성 -탭 모음을 사용 하 여 tvOS 앱이 작동 하는 콘텐츠를 논리적으로 구성 합니다.Use Tab Bars to Logically Organize Content - Use the Tab Bar to logically organize the content that your tvOS app works with. 예를 들어 추천, 상위 차트, 구매 및 검색이 있습니다.For example, Featured, Top Charts, Purchased and Search.
  • 새 콘텐츠를 사용자에 게 알리기 위해 배지를 추가 합니다. 필요에 따라 배지 (흰색 숫자 또는 느낌표가 있는 빨간색 타원)를 표시 하 여 범주에서 새 콘텐츠를 사용자에 게 알릴 수 있습니다.Add Badges to Inform Users of New Content - You can optionally display a Badge (a red oval with a white number or exclamation point) to inform the user of new content in a Category.
  • 가급적 배지 사용 -배지를 사용 하 여 탭 표시줄을 사용 하지 않고 사용자에 게 중요 한 정보를 제공 하는 경우에만 표시 합니다.Use Badges Sparingly - Don't clutter the Tab Bar with Badges and only display them where they provide critical information to the user.
  • 범주 수 제한 -복잡성을 줄이고 앱을 쉽게 관리할 수 있도록 하려면 범주를 사용 하 여 탭 모음을 오버 로드 하지 않고 모든 범주가 표시 되 고 복잡 하지 않은지 확인 합니다.Limit the Number of Categories - To reduce complexity and keep you app manageable, don't overload your Tab Bar with Categories and ensure that all of the Categories are visible and not crowded. 간단 하 고 짧은 제목이 가장 효율적으로 작동 합니다.Simple, short titles work best.
  • 범주 사용 안 함-항상 모든 탭 (범주)을 표시 하 고 사용 하도록 설정 해야 합니다.Don't Disable a Category - All Tabs (Categories) should always be visible and enabled at all times. 지정 된 탭에 콘텐츠가 없는 경우 사용자에 대 한 설명을 제공 합니다.If a given Tab has no content, provide an explanation to the user why. 예를 들어 사용자가 구매 하지 않은 경우 구매 탭이 비어 있게 됩니다.For example, the Purchases Tab will be empty if the user has made no purchases.

탭 모음 항목Tab Bar Items

탭 표시줄의 각 범주 (탭)는 탭 모음 항목 (UITabBarItem)으로 표시 됩니다.Each Category (Tab) in the Tab Bar is represented by a Tab Bar Item (UITabBarItem). Apple에는 탭 모음 항목을 사용 하기 위한 다음과 같은 제안이 있습니다.Apple has the following suggestions for working with Tab Bar Items:

  • 텍스트 기반 탭 사용 -탭 모음 항목을 아이콘으로 표시할 수 있지만 Apple에서는 텍스트를 사용 하는 것이 좋습니다 .이는 간결한 제목을 아이콘 보다 쉽게 해석할 수 있기 때문입니다.Use Text Based Tabs - While the Tab Bar Item is able to be represented as an icon, Apple suggests using text only because a concise title is easier to interpret than an icon.
  • 짧고 의미 있는 명사 또는 동사 사용 -탭 모음 항목은 포함 된 콘텐츠를 명확 하 게 릴레이 하 고 사진, 영화 또는 음악과 같은 단순 명사 또는 동사 (예: 검색 또는 재생)와 가장 잘 작동 합니다.Use Short, Meaningful Nouns or Verbs - A Tab Bar Item should clearly relay the content that it contains and works best when it is a simple noun (such as Photos, Movies or Music) or verbs (such as Search or Play).

탭 모음 및 StoryboardTab Bars and Storyboards

TvOS 앱에서 탭 모음을 작업 하는 가장 쉬운 방법은 iOS Designer를 사용 하 여 앱의 UI에 추가 하는 것입니다.The easiest way to work with Tab Bars in a Xamarin.tvOS app is to add them to the app's UI using the iOS Designer.

  1. 새 tvOS 앱을 시작 하 고 tvOS > App > 탭 앱을 선택 합니다.Start a new Xamarin.tvOS app and select tvOS > App > Tabbed App:

  2. 모든 프롬프트를 따라 새 tvOS 솔루션을 만듭니다.Follow all of the prompts to create a new Xamarin.tvOS Solution.

  3. Solution Pad에서 Main.storyboard 파일을 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Pad, double-click the Main.storyboard file and open it for editing.

  4. 지정 된 범주의 아이콘이제목을 변경 하려면 문서 개요에서 보기 컨트롤러 에 대 한 탭 모음 항목 을 선택 합니다.To change the Icon or Title for a given Category, select the Tab Bar Item for the View Controller in the Document Outline:

  5. 그런 다음 속성 탐색기위젯 탭 에서 필요한 속성을 설정 합니다.Then set the required properties in the Widget Tab of the Properties Explorer:

  6. 새 범주 (탭)를 추가 하려면 뷰 컨트롤러 를 디자인 화면에 놓습니다.To add a new Category (Tab), drop a View Controller onto your design surface:

  7. Ctrl 키를 누른 다음 탭 뷰 컨트롤러 에서 새 뷰 컨트롤러로끕니다.Control-click and drag from the Tab View Controller to the new View Controller.

  8. 팝업에서 컨트롤러 보기 를 선택 하 여 새 보기를 탭 (범주)으로 추가 합니다.From the popup, select view controllers to add the new view as a Tab (Category):

  9. IOS 디자이너에서 UI 요소를 추가 하 여 각 Caterogies 콘텐츠 영역에 대 한 UI 레이아웃을 일반적인 방식으로 디자인 합니다.Design the layout of the UI for each Caterogies content area as normal, by adding UI elements in the iOS Designer.

  10. 코드에서 C# UI 컨트롤을 사용 하는 데 필요한 모든 이벤트를 노출 합니다.Expose any required events to work with your UI controls in C# code.

  11. 코드에 노출할 UI 컨트롤의 C# 이름을 지정할 수 있습니다.Name any UI controls that you want to expose in C# code.

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

중요

IOS 디자이너에서 UI 요소 (예: UIButton)에 TouchUpInside와 같은 이벤트를 할당할 수 있지만, Apple TV에 터치 스크린이 없거나 터치 이벤트가 지원 되기 때문에 호출 되지 않습니다.While it is possible to assign events such as TouchUpInside to a UI element (such as a UIButton) in the iOS Designer, it will never be called because Apple TV doesn't have a touch screen or support touch events. TvOS 사용자 인터페이스 요소에 대 한 이벤트 처리기를 만들 때는 항상 Primary Action 이벤트를 사용 해야 합니다.You should always use the Primary Action event when creating event handlers for tvOS user interface elements.

스토리 보드 사용에 대 한 자세한 내용은 Hello, tvOS 빠른 시작 가이드를 참조 하세요.For more information on working with Storyboards, please see our Hello, tvOS Quick Start Guide.

탭 모음 작업Working with Tab Bars

UITabBarItems 속성을 사용 하 여 포함 하는 UITabBarItems 컬렉션에 0으로 인덱싱된 배열로 액세스할 수 있습니다.Use the Items property of the UITabBar to access the collection of UITabBarItems it contains as a zero (0) indexed array. SelectedItem 속성은 현재 선택 된 탭 (범주)을 UITabBarItem반환 합니다.The SelectedItem property will return the currently selected Tab (Category) as a UITabBarItem.

탭 모음 항목 작업Working with Tab Bar Items

지정 된 탭 (흰색 텍스트가 있는 빨간색 타원)에 배지를 표시 하려면 다음 코드를 사용 합니다.To display a Badge on a given tab (a red oval with white text), use the following code:

// Display a badge
TabBar.Items [2].BadgeValue = "10";

실행 시 다음과 같은 결과가 생성 됩니다.Which would produce the following results when run:

UITabBarItemTitle 속성을 사용 하 여 제목을 변경 하 고 Image 속성을 사용 하 여 아이콘을 변경 합니다.Use the Title property of the UITabBarItem to change the title and the Image property to change the icon.

요약Summary

이 문서에서는 tvOS 앱 내에서 탭 모음 컨트롤러를 디자인 하 고 사용 하는 방법에 대해 설명 했습니다.This article has covered designing and working with Tab Bar Controller inside of a Xamarin.tvOS app.