Xamarin에서 tvOS 탐색 및 포커스 작업

이 문서에서는 포커스의 개념과 이 개념이 Xamarin.tvOS 앱 내에서 탐색을 표시하고 처리하는 데 사용되는 방법을 설명합니다.

이 문서에서는 포커스의 개념과 Xamarin.tvOS 앱의 사용자 인터페이스에서 탐색을 처리하는 방법을 설명합니다. 기본 제공 tvOS 탐색 컨트롤에서 포커스, 강조 표시 및 선택을 사용하여 Xamarin.tvOS 앱의 사용자 인터페이스 탐색을 제공하는 방법을 살펴보겠습니다.

다음으로, 시차 및 계층화된 이미지와 함께 포커스를 사용하여 최종 사용자에게 현재 탐색 상태에 대한 시각적 단서를 제공하는 방법을 살펴보겠습니다.

마지막으로, 포커스, 포커스 업데이트, 포커스 가이드, 컬렉션의 포커스 및 Xamarin.tvOS 앱의 이미지 뷰에서 시차를 사용하도록 설정하는 작업을 살펴보겠습니다.

탐색

Xamarin.tvOS 앱의 사용자는 장치의 화면에서 이미지를 탭하는 iOS와 마찬가지로 인터페이스와 직접 상호 작용하지 않고 Siri 원격을 사용하여 방 전체에서 간접적으로 상호 작용합니다. 자연스럽게 흐르도록 앱의 사용자 인터페이스를 디자인할 때 이 점을 염두에 두어야 하지만 사용자가 Apple TV 환경에 몰입할 수 있도록 해야 합니다.

성공적인 tvOS 앱은 탐색 자체에 주의를 기울이지 않고 앱의 목적과 앱이 제공하는 데이터의 구조를 원활하게 지원하는 방식으로 탐색을 구현합니다. 사용자 인터페이스를 지배하거나 콘텐츠 및 앱 사용자 환경에서 포커스를 끌어들이지 않고 자연스럽고 친숙해지도록 탐색을 디자인합니다.

Apple TV를 사용하는 동안 사용자는 일반적으로 누적된 화면 집합을 탐색하며 각각 지정된 콘텐츠 집합을 표시합니다. 따라서 모든 새 화면은 단추, 탭 막대, 테이블, 컬렉션 뷰 또는 분할 보기와 같은 표준 UI 컨트롤을 사용하여 하나 이상의 콘텐츠 하위 화면으로 이어질 수 있습니다.

데이터의 각 새 화면을 사용하여 사용자는 이 화면 스택을 더 자세히 탐색합니다. Siri 원격의 메뉴 단추를 사용하여 스택을 뒤로 탐색하여 이전 화면 또는 주 메뉴로 돌아갈 수 있습니다.

Apple은 tvOS 앱에 대한 탐색을 디자인할 때 다음 사항을 염두에 두는 것이 좋습니다.

• 탐색을 레이아웃하여 콘텐츠 찾기를 빠르고 쉽게 만들기 - 사용자는 가능한 한 적은 수의 탭, 클릭 및 살짝 밀기에서 앱 내의 콘텐츠에 액세스하려고 합니다. 탐색을 간소화하고 최소한의 화면 수로 콘텐츠를 구성합니다.
• 터치를 사용하여 유동 인터페이스 만들기 - 사용자가 가능한 가장 적은 수의 제스처를 사용하여 마찰을 최소화하면서 포커스 가능한 항목 간에 이동할 수 있는지 확인합니다.
• 포커스를 염두에 두고 디자인 - 사용자가 채팅방에서 콘텐츠와 상호 작용하므로 Siri 원격을 사용하여 상호 작용하기 전에 포커스를 사용자 인터페이스 항목으로 이동해야 합니다. 사용자가 목표를 달성하기 위해 너무 많은 제스처가 필요한 경우 앱에 불만을 품게 됩니다.
• 메뉴 단추를 통해 뒤로 탐색 제공 - 쉽고 친숙한 환경을 만들려면 사용자가 Siri 원격의 메뉴 단추를 사용하여 뒤로 탐색할 수 있습니다. 메뉴 단추를 누르면 항상 이전 화면으로 돌아가거나 앱의 기본 메뉴로 돌아가야 합니다. 앱의 최상위 수준에서 메뉴 단추를 누르면 Apple TV 홈 화면으로 돌아갑니다.
• 일반적으로 뒤로 단추 표시 방지 - Siri 원격에서 메뉴 단추를 누르면 화면 스택을 뒤로 이동하므로 이 동작을 복제하는 추가 컨트롤을 표시하지 않습니다. 이 규칙의 예외는 취소 단추도 표시되어야 하는 파괴적인 작업(예: 콘텐츠 삭제)이 있는 화면 또는 화면을 구매하는 것입니다.
• 많은 컬렉션 대신 단일 화면에 큰 컬렉션 표시 - Siri 원격은 제스처를 사용하여 빠르고 쉽게 콘텐츠의 큰 컬렉션을 통해 이동할 수 있도록 설계되었습니다. 앱이 포커스 가능한 항목의 큰 컬렉션과 함께 작동하는 경우 사용자의 부분에 더 많은 탐색이 필요한 여러 화면으로 분할하는 대신 단일 화면에 유지하는 것이 좋습니다.
• 탐색 에 표준 컨트롤 사용 - 가능하면 쉽고 친숙한 사용자 환경을 만들려면 페이지 컨트롤, 탭 막대, 분할된 컨트롤, 테이블 뷰, 컬렉션 뷰 및 앱 탐색에 대한 분할 보기와 같은 기본 제공 UIKit 컨트롤을 사용합니다. 사용자는 이러한 요소에 이미 익숙하기 때문에 직관적으로 앱을 탐색할 수 있습니다.
• 가로 콘텐츠 탐색 선호 - Apple TV의 특성으로 인해 Siri 리모컨에서 왼쪽으로 오른쪽으로 살짝 밀는 것이 위아래로보다 더 자연스러워집니다. 앱의 콘텐츠 레이아웃을 디자인할 때 이 옵션을 고려합니다.

포커스 및 선택

Apple TV에서 이미지, 단추 또는 기타 UI 요소는 현재 탐색의 대상이 될 때 포커스 가 있는 것으로 간주됩니다.

사용자가 디바이스의 터치 스크린에 있는 요소와 직접 상호 작용하는 iOS 디바이스와 달리 사용자는 Siri 원격을 사용하여 방 전체의 tvOS 요소와 상호 작용합니다. 이 사용자 상호 작용을 제시하고 처리하기 위해 Apple TV는 포커스 기반 모델을 사용합니다.

Siri 원격에서 제스처 및 단추 누름을 사용하여 사용자는 한 UI 요소에서 다른 UI 요소로 포커스를 이동합니다. 포커스가 원하는 요소로 이동되면 사용자가 클릭하여 콘텐츠를 선택하거나 해당 요소가 나타내는 작업을 활성화합니다.

포커스가 변경됨에 따라 미묘한 애니메이션 및 효과(예: 이미지의 시차 효과)는 현재 포커스가 있는 사용자 인터페이스 항목을 명확하게 식별하는 데 사용됩니다.

Apple에는 포커스 및 선택 작업을 위한 다음과 같은 제안이 있습니다.

• 동작 효과 에 기본 제공 UI 컨트롤 사용 - 사용자 인터페이스에서 포커스 API를 사용하여 UIKit 포커스 모델은 UI 요소에 기본 동작 및 시각 효과를 자동으로 적용합니다. 이렇게 하면 앱이 Apple TV 플랫폼의 사용자에게 기본적이고 친숙한 느낌을 주며 포커스 가능한 항목 간에 유동적이고 직관적으로 이동할 수 있습니다.
• 예상 방향으로 포커스 이동 - Apple TV에서는 거의 모든 요소가 간접 조작을 사용합니다. 예를 들어 사용자는 Siri 원격을 사용하여 포커스를 이동하고 시스템은 인터페이스를 자동으로 스크롤하여 현재 포커스가 있는 항목을 계속 표시합니다. 앱이 이러한 유형의 상호 작용을 구현하는 경우 포커스가 사용자의 제스처 방향으로 이동해야 합니다. 따라서 사용자가 Siri 원격 포커스에서 오른쪽으로 살짝 밀면 화면이 왼쪽으로 스크롤될 수 있습니다. 이 규칙의 한 가지 예외는 직접 조작을 사용하는 전체 화면 항목입니다(위로 살짝 밀어 요소를 위로 이동).
• 중요 항목이 명확한 지 확인합니다. 사용자가 멀리서 UI 요소와 상호 작용하기 때문에 현재 포커스가 있는 항목이 눈에 띄는 것이 중요합니다. 일반적으로 기본 제공 UIKit 요소에서 자동으로 처리됩니다. 사용자 지정 컨트롤의 경우 항목 크기 또는 그림자와 같은 기능을 사용하여 포커스를 표시합니다.
• 시차를 사용하여 포커스가 있는 항목을 반응형으로 만들기 - Siri 원격에서 작고 원형 제스처를 사용하면 포커스가 있는 항목이 온화하고 실시간으로 이동됩니다. 이 시차 효과는 계층화된 이미지에 UIKit 기본 제공되어 사용자에게 포커스가 있는 항목에 대한 연결감을 제공합니다.
• 적절한 크기의 포커스 가능한 항목 만들기 - 간격이 충분한 큰 항목은 작은 항목보다 더 쉽게 선택하고 탐색할 수 있습니다.
• 포커스가 있거나 포커스 가 없는 것처럼 보이도록 UI 요소를 디자인합니다. 일반적으로 Apple TV는 크기를 늘려 포커스가 있는 항목을 나타냅니다. 앱의 UI 요소가 프레젠테이션 크기에 맞게 잘 표시되고 필요한 경우 더 큰 크기의 요소에 대한 자산을 제공해야 합니다.
• 포커스 변경 내용을 유동적으로 표현 - 애니메이션을 사용하여 포커스가 있는 항목과 포커스가 없는 상태 간에 원활하게 페이드하여 전환이 흐려지지 않도록 합니다.
• 커서 표시 안 함 - 사용자는 화면 주위에 커서를 이동하지 않고 포커스를 사용하여 앱의 UI를 탐색해야 합니다. 사용자 인터페이스는 항상 포커스 모델을 사용하여 일관된 사용자 환경을 제공해야 합니다.

포커스 작업

포커스 가능한 항목이 될 수 있는 사용자 지정 컨트롤을 만들려는 경우가 있을 수 있습니다. 이렇게 하면 속성을 재정의 CanBecomeFocused 하고 반환true합니다. 그렇지 않으면 .false 예시:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

언제든지 컨트롤의 Focused UIKit 속성을 사용하여 현재 항목인지 확인할 수 있습니다. UI 항목에 현재 포커스가 있는 경우 true 그렇지 않습니다. 예시:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

코드를 통해 포커스를 다른 UI 요소로 직접 이동할 수는 없지만, 해당 속성을 true로 설정 PreferredFocusedView 하여 화면을 로드할 때 포커스를 가장 먼저 받는 UI 요소를 지정할 수 있습니다. 예시:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

포커스 업데이트 작업

사용자가 한 UI 요소에서 다른 UI 요소로 포커스를 이동하도록 하면(예: Siri 원격의 제스처에 대한 응답으로) 포커스 업데이트 이벤트가 포커스가 손실된 항목과 포커스를 얻는 항목 모두에 전송됩니다.

상속되거나 UIViewController상속 UIView 되는 사용자 지정 요소의 경우 포커스 업데이트 이벤트를 사용하도록 여러 메서드를 재정의할 수 있습니다.

• DidUpdateFocus - 이 메서드는 뷰가 포커스를 얻거나 잃을 때마다 호출됩니다.
• ShouldUpdateFocus - 이 메서드를 사용하여 포커스를 이동할 수 있는 위치를 정의합니다.

포커스 엔진이 포커스를 UI 요소로 다시 이동하도록 PreferredFocusedView 요청하려면 뷰 컨트롤러의 메서드를 호출 SetNeedsUpdateFocus 합니다.

포커스 가이드 작업

tvOS에 기본 제공되는 포커스 엔진은 가로 및 세로 눈금에 속하는 항목 간의 이동을 처리하는 데 매우 중요합니다. 일반적으로 인터페이스 디자인에 UI 요소를 추가하는 것 이상의 작업을 수행해야 하며, 포커스 엔진은 개발자 개입 없이 해당 요소 간의 이동을 자동으로 처리합니다.

그러나 UI 디자인이 필요하기 때문에 UI 요소가 가로 및 세로 눈금에 떨어지지 않고 서로 대각선이기 때문에 액세스할 수 없는 경우가 있을 수 있습니다. 이는 포커스 엔진이 UI 항목 간의 간단한 위쪽, 아래쪽, 왼쪽 및 오른쪽 이동을 처리하도록 설계되었기 때문에 발생합니다.

예제를 보려면 다음 UI 레이아웃을 사용합니다.

자세히 정보 단추는 구매 단추가 있는 가로 및 세로 눈금에 속하지 않으므로 사용자에게 액세스할 수 없습니다. 그러나 포커스 가이드를 사용하여 포커스 엔진에 이동 힌트를 제공하여 쉽게 수정할 수 있습니다.

포커스 가이드(UIFocusGuide)는 보기의 보이지 않는 영역을 포커스 엔진에 포커스 가능으로 노출하므로 포커스를 다른 보기로 리디렉션할 수 있습니다.

따라서 위에 제공된 예제를 해결하기 위해 보기 컨트롤러에 다음 코드를 추가하여 추가 정보 및 구매 단추 간에 포커스 가이드를 만들 수 있습니다.

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

먼저 메서드를 사용하여 새 UIFocusGuide 개체가 만들어지고 View의 레이아웃 가이드 컬렉션에 AddLayoutGuide 추가됩니다.

다음으로, 포커스 가이드의 위쪽, 왼쪽, 너비 및 높이 앵커는 추가 정보 및 구매 단추를 기준으로 조정되어 위치가 조정됩니다. 참조

또한 속성을 다음으로 설정 Active 하여 새 제약 조건이 만들어질 때 활성화된다는 점에 유의해야 합니다 true.

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

새 포커스 가이드가 설정되어 보기에 추가되면 보기 컨트롤러의 메서드를 재정의 DidUpdateFocus 할 수 있으며 추가 정보 및 구매 단추 간에 이동하기 위해 다음 코드를 추가할 수 있습니다.

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

먼저 이 코드는 (context)에 전달된 코드에서 UIFocusUpdateContext 가져옵니다NextFocusedView. 이 뷰인 null경우 처리가 필요하지 않으며 메서드가 종료됩니다.

다음으로 평가 nextFocusableItem 됩니다. 추가 정보 또는 구매 단추와 일치하는 경우 포커스는 포커스 가이드의 PreferredFocusedView 속성을 사용하여 반대쪽 단추로 전송됩니다. 예시:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

두 단추가 모두 포커스 시프트 PreferredFocusedView 의 원본이 아니면 속성이 지워집니다.

// No valid move
FocusGuide.PreferredFocusedView = null;

컬렉션에서 포커스 작업

개별 항목에 포커스 UICollectionView UITableView를 지정할 수 있는지 여부를 결정할 때는 각각 메서드를 재정의 UICollectionViewDelegate UITableViewDelegate 합니다. 예시:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

CanFocusItem 현재 항목이 포커스에 있을 수 있으면 메서드가 반환 true 되고, 그렇지 않으면 반환됩니다false.

포커스가 UICollectionView 손실되고 포커스가 다시 회복될 때 포커스를 기억하고 마지막 항목으로 복원하려면 속성을 trueUITableView/>로 설정합니다RemembersLastFocusedIndexPath.

포커스 및 시차

위에서 설명한 것처럼 사용자 인터페이스 요소는 탐색 이벤트 중에 현재 항목인 경우 포커스가 있는 것으로 간주됩니다. 일반적으로 항목이 포커스에 들어오면 크기가 약간 증가하며 그림자를 사용하여 시각적으로 상승됩니다.

사용자가 Siri 원격에서 느리고 원형 제스처를 수행하면 이 움직임에 대한 응답으로 포커스가 있는 항목이 실시간으로 흔들립니다. 흔들림이 발생하면 조명이 켜진 광택이 이미지에 적용되어 표면이 빛나는 것처럼 보입니다. 지정된 양의 비활성 후에는 포커스가 없는 콘텐츠가 희미해지고 포커스가 있는 항목이 더욱 커집니다.

이러한 효과는 TV 화면의 콘텐츠와 소파에서 Apple TV와 상호 작용하는 사용자 사이의 정신적 연결을 제공하기 위해 함께 작동합니다.

Apple TV에서 이 시차 효과는 시스템 전체에서 3D 깊이와 역학의 감각을 포커스 내 항목에 전달하는 데 사용됩니다. tvOS는 일련의 투명한 계층화된 이미지를 사용하여 동적으로 이동하고 크기를 조정하여 이 효과를 만듭니다.

계층화된 이미지는 tvOS 앱의 아이콘에 필요하며 동적 Top Shelf 콘텐츠에 대해 지원됩니다. 필수는 아니지만 Apple은 앱의 UI에 있는 다른 포커스 가능한 항목에 계층화된 이미지를 구현하는 것이 좋습니다.

시차 사용

컨트롤(또는 상속UIImageView된 컨트롤)은 UIImageView 시차 효과를 자동으로 지원합니다. 기본적으로 이 지원은 사용하지 않도록 설정되며 사용하도록 설정하려면 다음 코드를 사용합니다.

myImageView.AdjustsImageWhenAncestorFocused = true;

이 속성을 <a0/>로 설정하면 이미지 보기는 사용자가 선택한 시차 효과를 자동으로 가져옵니다.

요약

이 문서에서는 포커스의 개념과 Xamarin.tvOS 앱의 사용자 인터페이스에서 탐색을 처리하는 방법을 설명했습니다. 기본 제공 tvOS 탐색 컨트롤에서 포커스, 강조 표시 및 선택을 사용하여 탐색을 제공하는 방법을 살펴봅니다. 다음으로, 시차 및 계층화된 이미지와 함께 포커스를 사용하여 최종 사용자에게 현재 탐색 상태에 대한 시각적 단서를 제공하는 방법을 살펴보았습니다. 마지막으로 포커스, 포커스 업데이트, 컬렉션의 포커스 및 시차를 사용하도록 설정하는 작업을 검토했습니다.

관련 링크

• tvOS
• tvOS 휴먼 인터페이스 가이드
• tvOS용 앱 프로그래밍 가이드