在 Xamarin 中使用tvOS 瀏覽和焦點

本文涵蓋焦點的概念，以及其如何用來呈現及處理 Xamarin.tvOS 應用程式內的流覽。

本文涵蓋焦點的概念，以及如何在 Xamarin.tvOS 應用程式的使用者介面中處理導覽。 我們將檢查內建 tvOS 導覽控件如何使用焦點、醒目提示和選取來提供 Xamarin.tvOS 應用程式的使用者介面導覽。

接下來，我們將探討焦點如何與視差和分層影像搭配使用，為使用者提供目前瀏覽狀態的視覺線索。

最後，我們將探討使用焦點、焦點更新、焦點指南、集合中的焦點，以及在 Xamarin.tvOS 應用程式中啟用影像檢視的視差。

導覽

Xamarin.tvOS 應用程式的使用者不會直接與其介面互動，就像在裝置螢幕上點選影像的 iOS 一樣，而是間接地從會議室使用 Siri 遠端。 在設計應用程式的使用者介面時，您必須記住這一點，讓它自然流動，但仍讓使用者沉浸在 Apple TV 體驗中。

成功的tvOS應用程式會以順暢的方式實作導覽，以順暢地支援應用程式的目的及其呈現的數據結構，而不需注意流覽本身。 設計您的流覽，使其感覺自然而熟悉，而不需要主導使用者介面或將焦點從內容和應用程式用戶體驗中移開。

使用 Apple TV 時，使用者通常會流覽一組堆疊的螢幕，每個畫面都會呈現一組指定的內容。 接著，每個新畫面都可能導致使用標準 UI 控制件的一或多個子畫面，例如按鈕、Tab 列、數據表、集合檢視或分割檢視。

透過每個新的數據畫面，使用者會更深入地流覽到此畫面堆棧。 藉由使用 Siri 遠端上的 [功能表 ] 按鈕，他們可以向後瀏覽堆疊以返回上一個畫面或主功能表。

Apple 建議在設計 tvOS 應用程式的導覽時，請記住下列事項：

• 將瀏覽版面配置為讓尋找內容快速且簡單 - 使用者想要以最少次數的點選、點選和撥動存取應用程式內的內容。 簡化流覽，並將內容組織到最少的螢幕數目。
• 使用觸控建立流暢介面 - 確保使用者可以使用最少的手勢數目在可聚焦專案之間移動。
• 使用焦點 設計 - 由於使用者正在與會議室內的內容互動，因此他們必須先將焦點移至使用者介面專案，再使用 Siri 遠端與其互動。 如果使用者需要太多手勢才能達成目標，使用者將會對您的應用程式感到沮喪。
• 透過功能表按鈕 提供向後流覽 - 若要建立簡單且熟悉的體驗，允許使用者使用 Siri 遠端的 [功能表 ] 按鈕向後流覽。 按下 [ 功能表] 按鈕應該一律會返回上一個畫面，或返回應用程式的 [主功能表]。 在應用程式的最上層，按下 [功能表 ] 按鈕應該會返回Apple TV主畫面。
• 通常避免顯示 [上一頁] 按鈕 - 因為按下 Siri 遠端上的功能表 按鈕會向後瀏覽螢幕堆疊，因此請避免顯示重複此行為的額外控件。 此規則的例外狀況是購買具有破壞性動作的畫面或螢幕（例如刪除內容）， 其中也應該顯示 [取消 ] 按鈕。
• 在單一螢幕上顯示大型集合，而不是許多 - Siri 遠端的設計目的是要快速且輕鬆地使用手勢移動大型內容集合。 如果您的 app 可與大型焦點專案集合搭配使用，請考慮將它們保留在單一螢幕上，而不是將它們分成許多畫面，這需要使用者部分的更多流覽。
• 使用標準控件進行流覽 - 同樣地，若要建立簡單且熟悉的用戶體驗，請盡可能使用內建 UIKit 的控件，例如頁面控件、Tab 列、分段控件、數據表檢視、集合檢視和分割檢視，以供您應用程式的流覽。 由於用戶已經熟悉這些元素，因此他們可直覺地流覽您的應用程式。
• 偏向水平內容流覽 - 由於 Apple TV 的性質，在 Siri 遠端上從左到右撥動比上下更自然。 設計應用程式的內容配置時，請考慮此選項。

焦點和選取專案

在 Apple TV 上，當影像、按鈕或其他 UI 元素是目前瀏覽的目標時，會被視為 焦點 。

與使用者直接在裝置觸控螢幕上與元素互動的iOS裝置不同，使用者會使用Siri遠程從房間與tvOS元素互動。 為了呈現及處理此用戶互動，Apple TV 會使用 以焦點 為基礎的模型。

使用 Siri 遠端上的手勢和按鈕按下，使用者會將焦點從一個 UI 元素移至另一個 UI 元素。 一旦焦點移至所需的元素，用戶按下即可選取內容，或啟動該專案所代表的動作。

當焦點變更時，微妙的動畫和效果（例如影像上的視差效果）是用來清楚識別目前具有焦點的使用者介面專案。

Apple 有下列使用焦點和選取項目的建議：

• 針對動作效果 使用內建 UI 控制件 - 藉由在 UIKit 使用者介面中使用 和焦點 API，焦點模型會自動將預設動作和視覺效果套用至您的 UI 元素。 這可讓您的應用程式對 Apple TV 平台的使用者感到原生且熟悉，並允許焦點專案之間的流暢和直覺移動。
• 將焦點移至預期的方向 - 在 Apple TV 上，幾乎每個元素都會使用間接操作。 例如，使用者使用 Siri Remote 移動焦點，而系統會自動捲動介面，讓目前焦點的專案保持可見。 如果您的應用程式實作這種類型的互動，請確定焦點會向使用者手勢的方向移動。 因此，如果使用者向右撥動 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 屬性來查看它是否為目前的專案。 如果 true UI專案目前有焦點，則不會。 例如：

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

雖然您無法透過程式代碼直接將焦點移至另一個UI元素，但您可以將螢幕 PreferredFocusedView 的屬性設定為 true，以指定哪些UI元素會先取得焦點。 例如：

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

使用焦點更新

當使用者將焦點從某個UI元素轉移到另一個UI元素時（例如，回應Siri遠端上的手勢）， 焦點更新事件 將會同時傳送至失去焦點的專案和取得焦點的專案。

對於繼承自 UIView 或 UIViewController的自定義專案，您可以覆寫數種方法來處理 Focus Update 事件：

• DidUpdateFocus - 每當檢視取得或失去焦點時，就會呼叫此方法。
• ShouldUpdateFocus - 使用這個方法來定義允許移動焦點的位置。

若要要求焦點引擎將焦點移回 PreferredFocusedView UI元素，請呼叫 SetNeedsUpdateFocus 檢視控制器的方法。

重要

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;
}

首先，會使用 AddLayoutGuide 方法建立新的 UIFocusGuide ，並將其新增至檢視的版面配置指南集合。

接下來，焦點指南的頂端、左、寬度和高度錨點會相對於 [更多資訊 ] 和 [購買 ] 按鈕進行調整，以在它們之間放置。 請參閱：

也請務必注意，新的條件約束會在建立時啟動，方法是將其 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;
    }
}

首先，此程式代碼會從 UIFocusUpdateContext 傳入的 NextFocusedView 取得 。context 如果這個檢視是 null，則不需要處理，而且方法已結束。

接下來， nextFocusableItem 會評估 。 如果它符合 [更多資訊 ] 或 [購買 ] 按鈕，則會使用焦點指南的 屬性，將焦點傳送到相反的 PreferredFocusedView 按鈕。 例如：

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

如果兩個按鈕都不是焦點移位的來源，則會 PreferredFocusedView 清除 屬性：

// No valid move
FocusGuide.PreferredFocusedView = null;

在集合中使用焦點

決定個別專案是否可以在 或 中UICollectionView取得焦點時，您將分別覆寫 或 UITableViewUITableViewDelegate 的方法UICollectionViewDelegate。 例如：

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 或 UITableView 在失去焦點並重新取得焦點時，將 焦點還原至最後一個專案，請將 屬性設定 RemembersLastFocusedIndexPath 為 true。

焦點和視差

如上所述，當使用者介面元素在 導覽事件期間是目前專案時，會被視為焦點 。 一般而言，當專案進入焦點時，其大小會稍微增加，而且會使用陰影以視覺方式提升。

如果使用者在 Siri 遠端上發出緩慢的圓形手勢，焦點專案將會即時搖擺以回應此移動。 隨著搖擺的發生，一個照亮的希恩套用到其圖像，使表面似乎閃耀。 在指定數量的閑置之後，任何焦點不足的內容都會變暗，而焦點專案會變大。

這些效果一起運作，在電視螢幕上的內容與從沙發與AppleTV互動的用戶之間提供心理聯繫。

在 Apple TV 上，這個視差效果會在整個系統中使用，以傳達 3D 深度和動態感給焦點專案。 tvOS 使用一系列的透明分層影像，它會動態移動和縮放以建立此效果。

tvOS 應用程式的圖示需要分層影像，且支援動態 Top Shelf 內容。 雖然並非必要，但 Apple 強烈建議在應用程式 UI 的任何其他可焦點專案中實作分層影像。

啟用視差

UIImageView控制項（或任何繼承自 UIImageView的控制項）會自動支持視差效果。 根據預設，此支援已停用，若要加以啟用，請使用下列程式代碼：

myImageView.AdjustsImageWhenAncestorFocused = true;

將此屬性設定為 true時，影像檢視會在用戶選取視差效果並焦點時自動取得視差效果。

摘要

本文涵蓋焦點的概念，以及如何在 Xamarin.tvOS 應用程式的使用者介面中處理導覽。 它會檢查內建 tvOS 導覽控件如何使用焦點、醒目提示和選取專案來提供導覽。 接下來，它探討焦點如何與視差和分層影像搭配使用，為終端使用者提供目前瀏覽狀態的視覺線索。 最後，它檢查了使用焦點、焦點更新、集合中的焦點，以及啟用視差。

相關連結

• tvOS
• tvOS 人介面指南
• tvOS 的應用程式程序設計指南