在 Xamarin 中使用tvOS堆疊檢視

發行項
03/16/2017

警告

iOS 設計工具在 Visual Studio 2019 16.8 版和 Visual Studio 2019 for Mac 8.8 版中已被取代，並在 Visual Studio 2019 16.9 版和 Visual Studio for Mac 8.9 版中移除。建置 iOS 使用者介面的建議方式是直接在執行 Xcode 介面產生器的 Mac 上。如需詳細資訊，請參閱使用 Xcode 設計使用者介面。

堆疊檢視控件（UIStackView）利用自動配置和大小類別的功能，以水準或垂直方式管理子檢視堆疊，以動態回應 Apple TV 裝置的內容變更和螢幕大小。

附加至堆疊檢視的所有子檢視配置都是根據開發人員定義的屬性來管理，例如軸、分佈、對齊和間距：

在 Xamarin.tvOS 應用程式中使用 UIStackView 時，開發人員可以在 iOS 設計工具的 Storyboard 內定義子檢視，或在 C# 程式代碼中新增和移除子檢視。

關於堆疊檢視控件

UIStackView設計為非轉譯容器檢視，因此不會像的其他子類別UIView一樣繪製到畫布。設定或覆寫DrawRect之類的BackgroundColor屬性不會有任何視覺效果。

有數個屬性可控制堆疊檢視如何排列其子檢視集合：

軸 – 判斷堆棧檢視是否以水準或垂直方式排列子檢視。
對齊 – 控制子檢視在堆棧檢視內對齊的方式。
散發 – 控制子檢視在堆棧檢視中的大小。
間距 – 控制堆棧檢視中每個子檢視之間的最小空間。
比較基準相對 – 如果 true，則每個子檢視的垂直間距都會衍生自其基準。
版面配置邊界相對 – 將子檢視相對於標準版面配置邊界放置。

一般而言，您將使用堆棧檢視來排列少量子檢視。您可以藉由將一或多個堆疊檢視巢狀在彼此內建立更複雜的使用者介面。

您可以將其他條件約束新增至子檢視，以進一步微調UI外觀（例如控制Height或Width）。不過，請注意不要包含堆棧檢視本身所引進的衝突條件約束。

自動版面配置和大小類別

將子檢視新增至堆疊檢視時，其版面配置完全由該堆棧檢視使用自動版面配置和大小類別來控制，以定位及調整排列的檢視大小。

堆棧檢視會將 集合中的第一個和最後一個子檢視釘選 到 垂直堆疊檢視的上 邊緣和下邊緣，或 水準堆棧檢視的左 邊緣和右邊緣。如果您將 LayoutMarginsRelativeArrangement 屬性設定為 true，則檢視會將子檢視釘選到相關的邊界，而不是邊緣。

堆疊檢視會在計算所定義的 Axis 子檢視大小時使用子檢視IntrinsicContentSize的屬性（除了除外FillEqually Distribution）。會 FillEqually Distribution 調整所有子檢視的大小，使其大小相同，因此會沿著 Axis填滿堆棧檢視。

除了 Fill Alignment之外，Stack View 會使用子檢視的 IntrinsicContentSize 屬性來計算與指定 Axis垂直的檢視大小。 Fill Alignment針對，所有子檢視的大小都會調整，使其填滿與指定 Axis垂直的堆棧檢視。

定位和重設大小堆棧檢視

雖然堆疊檢視可以完全控制任何子檢視的配置（根據和等AxisDistribution屬性），您仍然需要使用自動版面配置和大小類別，將堆棧檢視（UIStackView）放在其父檢視內。

一般而言，這表示至少釘選堆棧檢視的兩個邊緣來展開和收縮，從而定義其位置。如果沒有任何其他條件約束，堆疊檢視會自動重設大小以符合其所有子檢視，如下所示：

其大小 Axis 會是所有子檢視大小的總和，以及每個子檢視之間已定義的任何空間。
LayoutMarginsRelativeArrangement如果屬性是 true，堆棧檢視大小也會包含邊界的空間。
與垂直 Axis 的大小將會設定為集合中最大的子檢視。

此外，您可以指定堆疊檢視的高度和寬度的條件約束。在此情況下，子檢視會配置（大小），以填滿堆棧檢視所指定的空間，如和 Alignment 屬性所Distribution決定。

BaselineRelativeArrangement如果屬性是 true，則會根據第一個或最後一個子檢視的基準來配置子檢視，而不是使用 Top、Bottom 或 Center - Y 位置。這些是計算在堆疊檢視的內容上，如下所示：

垂直堆棧檢視會傳回第一個基準的第一個子檢視，最後一個則傳回最後一個子檢視。如果其中一個子檢視本身是堆棧檢視，則會使用其第一個或最後一個基準。
水平堆棧檢視會針對第一個和最後一個基準使用其最高的子檢視。如果最高檢視也是堆棧檢視，則會使用其最高子檢視做為基準。

重要

基準對齊不適用於延展或壓縮的子檢視大小，因為基準會計算為錯誤的位置。針對 [基準對齊]，請確定子檢視的高度符合內建內容檢視的高度。

一般堆疊檢視使用

有數種配置類型適用於堆疊檢視控件。根據蘋果的說法，以下是一些較常見的用途：

定義沿著軸 的大小 – 藉由將堆棧檢視 Axis 的兩個邊緣和其中一個相鄰邊緣釘選來設定位置，堆棧檢視會沿著軸成長，以符合其子檢視所定義的空間。
定義子檢視的位置 – 將堆棧檢視的相鄰邊緣釘選到其父檢視，堆棧檢視會在兩個維度中成長，以符合其包含子檢視的大小。
定義堆疊 的大小和位置 – 藉由將堆棧檢視的所有四個邊緣釘選到父檢視，堆棧檢視會根據堆棧檢視內定義的空間來排列子檢視。
定義軸 垂直大小 – 將兩個邊緣固定在堆棧檢視的 Axis 垂直，沿著座標軸的其中一個邊緣來設定位置，堆棧檢視會垂直於座標軸，以符合其子檢視所定義的空間。

堆疊檢視和分鏡腳本

在 Xamarin.tvOS 應用程式中使用堆疊檢視最簡單的方式，就是使用 iOS 設計工具將它們新增至應用程式的 UI。

Visual Studio for Mac
Visual Studio

在 Solution Pad 中，按兩下Main.storyboard檔案，然後開啟檔案進行編輯。
設計您要新增至堆疊檢視的個別元素設定：
將任何必要的條件約束新增至元素，以確保它們能夠正確調整。一旦元素新增至堆棧檢視，此步驟就很重要。
製作所需的複本數目（在此案例中為四個）：
從 [工具箱] 拖曳堆棧檢視，並將它放在 [檢視] 上：
選取堆棧檢視，在 [屬性] 的 [小工具] 索引卷標中，選取 [對齊方式填滿]、[平均填滿分佈]，然後輸入 25 [間距]：
將堆棧檢視放置在您想要的畫面上，並新增 [條件約束] 以將它保留在所需的位置。
選取個別元素，並將其拖曳至堆疊檢視：
版面配置將會調整，而且元素會根據您上述設定的屬性，在堆棧檢視中排列。
在 [屬性總管] 的 [小工具] 索引標籤中指派名稱，以使用 C# 程式代碼中的 UI 控制件。
儲存您的變更。

在 方案總管 中，按兩下Main.storyboard檔案，然後開啟檔案進行編輯。
設計您要新增至堆疊檢視的個別元素設定：
將任何必要的條件約束新增至元素，以確保它們能夠正確調整。一旦元素新增至堆棧檢視，此步驟就很重要。
製作所需的複本數目（在此案例中為四個）：
從 [工具箱] 拖曳堆棧檢視，並將它放在 [檢視] 上：
選取 [堆棧檢視]，在 [屬性總管] 的 [小工具] 索引卷標中，選取 [對齊方式填滿]、[平均填滿分佈]，然後輸入 25 [間距]：
將堆棧檢視放置在您想要的畫面上，並新增 [條件約束] 以將它保留在所需的位置。
選取個別元素，並將其拖曳至堆疊檢視：
版面配置將會調整，而且元素會根據您上述設定的屬性，在堆棧檢視中排列。
在 [屬性總管] 的 [小工具] 索引標籤中指派名稱，以使用 C# 程式代碼中的 UI 控制件。
儲存您的變更。

重要

雖然在建立事件處理程式時，可以在 iOS 設計工具中將動作 TouchUpInside 指派給 UI 元素（例如，例如）， UIButton但永遠不會呼叫它，因為 Apple TV 沒有觸摸屏或支援觸控事件。建立tvOS使用者介面元素的動作時，您應該一律使用預設值 Action Type 。

如需使用分鏡腳本的詳細資訊，請參閱我們的 Hello， tvOS 快速入門指南。

在我們的範例中，我們已公開區段控件的輸出和動作，以及每個「玩家卡」的輸出。在程式代碼中，我們會根據目前的區段隱藏和顯示播放機。例如：

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take Action based on the segment
    switch(PlayerCount.SelectedSegment) {
    case 0:
        Player1.Hidden = false;
        Player2.Hidden = true;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 1:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 2:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = true;
        break;
    case 3:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = false;
        break;
    }
}

執行應用程式時，這四個元素會平均散發在我們的堆疊檢視中：

如果玩家數目減少，則會隱藏未使用的檢視，而堆疊檢視會調整版面配置以符合：

從程式代碼填入堆疊檢視

除了在 iOS 設計工具中完全定義堆疊檢視的內容和版面配置之外，您還可以從 C# 程式代碼動態建立和移除它。

使用堆棧檢視在檢閱中處理「星號」的下列範例（1 到 5）：

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

讓我們詳細查看此程式碼的幾個部分。首先，我們會使用語句來檢查沒有五顆 if 星或小於零。

若要新增「星號」，我們會載入其影像，並將其內容模式設定為 [調整外觀大小]：

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

這可讓「星形」圖示在新增至堆棧檢視時不會扭曲。

接下來，我們會將新的「星號」圖示新增至堆棧檢視的子檢視集合：

RatingView.AddArrangedSubview(icon);

您會發現我們已將新增 UIImageView 至 UIStackView的 ArrangedSubviews 屬性，而不是 SubView。您想要堆疊檢視控制其版面配置的任何檢視，都必須新增至 ArrangedSubviews 屬性。

若要從堆疊檢視移除子檢視，請先取得要移除的子檢視：

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

然後，我們需要從 ArrangedSubviews 集合和超級檢視中移除它：

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

從 ArrangedSubviews 集合中移除子檢視，會將其從堆棧檢視的控件中移除，但不會從畫面中移除。

動態變更內容

每當新增、移除或隱藏子檢視時，堆棧檢視會自動調整子檢視的配置。如果已調整堆疊檢視的任何屬性（例如其 Axis），則也會調整版面配置。

版面配置變更可以透過將變更放在動畫區塊內來產生動畫效果，例如：

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

您可以在分鏡文本中使用大小類別來指定許多堆疊檢視的屬性。這些屬性會自動產生動畫效果，以回應大小或方向變更。

摘要

本文涵蓋在 Xamarin.tvOS 應用程式內設計和使用堆棧檢視。

共用方式為

在 Xamarin 中使用tvOS堆疊檢視

關於堆疊檢視控件

自動版面配置和大小類別

定位和重設大小堆棧檢視

一般堆疊檢視使用

堆疊檢視和分鏡腳本

從程式代碼填入堆疊檢視

動態變更內容

摘要

其他資源

共用方式為

在 Xamarin 中使用tvOS堆疊檢視

關於堆疊檢視控件

自動版面配置和大小類別

定位和重設大小堆棧檢視

一般堆疊檢視使用

堆疊檢視和分鏡腳本

從程式代碼填入堆疊檢視

動態變更內容

摘要

相關連結

其他資源