Xamarin での tvOS スタックビューの操作

[アーティクル]
03/16/2017

警告

iOS Designer は、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 の Interface Builder が実行されている Mac で直接ビルドすることをお勧めします。詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

スタックビューコントロール (UIStackView) は、自動レイアウトクラスとサイズクラスの機能を利用して、Apple TV デバイスのコンテンツ変更と画面サイズに動的に対応するサブビューのスタック (水平方向または垂直方向) を管理します。

スタックビューにアタッチされているすべてのサブビューのレイアウトは、軸、分布、配置、間隔などの開発者が定義したプロパティに基づいてスタックビューによって管理されます。

Xamarin.tvOS アプリで UIStackView を使用する場合、開発者は、iOS Designer のストーリーボード内で、または C# コードでサブビューを追加および削除することで、サブビューを定義できます。

スタックビューコントロールについて

UIStackView は、非レンダリングコンテナービューとして設計されているため、UIView のその他のサブクラスのようにはキャンバスに描画されません。 BackgroundColor などのプロパティを設定しても、DrawRect をオーバーライドしても、視覚的な効果はありません。

スタックビューでサブビューのコレクションを配置する方法を制御するプロパティがいくつかあります。

軸 – スタックビューによってサブビューが水平方向または垂直方向に配置されるかどうかを決定します。
配置 – スタックビュー内でのサブビューの配置方法を制御します。
分布 – スタックビュー内でサブビューのサイズを設定する方法を制御します。
間隔 – スタックビュー内の各サブビュー間の最小スペースを制御します。
ベースライン基準 – true である場合、各サブビューの垂直方向の間隔は、そのベースラインから派生します。
レイアウト余白基準 – 標準レイアウトの余白を基準にサブビューを配置します。

通常、スタックビューを使用して、少数のサブビューを配置します。 1 つ以上のスタックビューを相互に入れ子にすることで、より複雑なユーザーインターフェイスを作成できます。

サブビューに制約を追加することで、UI の外観をさらに微調整できます (たとえば、高さや幅を制御できます)。ただし、スタックビュー自体によって導入されたサブビューに競合する制約を含めないように注意する必要があります。

自動レイアウトクラスとサイズクラス

サブビューをスタックビューに追加すると、配置されたビューを配置およびサイズ変更するために、そのレイアウトが自動レイアウトクラスとサイズクラスを使用してスタックビューによって完全に制御されます。

スタックビューでは、コレクション内の最初と最後のサブビューが、垂直スタックビューの場合は上端と下端、水平スタックビューの場合は左端と右端にピン留めされます。 LayoutMarginsRelativeArrangement プロパティを true に設定すると、サブビューは端ではなく、関連する余白にピン留めされます。

スタックビューでは、定義された Axis に沿ったサブビューのサイズを計算するときにサブビューの IntrinsicContentSize プロパティが使用されます (FillEqually Distribution は除きます)。 FillEqually Distribution の場合、すべてのサブビューのサイズが同じになるようにサイズが変更され、これにより、Axis に沿ってスタックビューが塗りつぶされます。

Fill Alignment を除き、スタックビューでは、指定された Axis ビューに対して垂直なビューのサイズを計算するためにサブビューの IntrinsicContentSize プロパティが使用されます。 Fill Alignment の場合、すべてのサブビューによって指定されたAxis に対して垂直なスタックビューが塗りつぶされるように、これらのサブビューのサイズが設定されます。

スタックビューの配置とサイズ設定

サブビューのレイアウトは (Axis や Distribution などのプロパティに基づいて) スタックビューによって完全に制御されますが、ユーザーは依然として、自動レイアウトクラスとサイズクラスを使用して親ビュー内にスタックビュー (UIStackView) を配置する必要があります。

一般に、これは、スタックビューの少なくとも 2 つの端をピン留めして拡大および縮小し、その位置を定義することを意味します。追加の制約がない場合、スタックビューは次のように、すべてのサブビューをサイズに合わせて調整するために自動的にサイズ変更されます。

Axis に沿ったサイズは、すべてのサブビューのサイズの合計に、各サブビュー間で定義されたスペースを足した値になります。
LayoutMarginsRelativeArrangement プロパティが true である場合、スタックビューのサイズには余白のスペースも含まれます。
Axis に対して垂直なサイズは、コレクション内の最大サブビューに設定されます。

また、スタックビューの高さと幅の制約を指定することもできます。この場合、サブビューは、Distribution および Alignment プロパティによって決定されたとおりにスタックビューによって指定されたスペースを塗りつぶすようにレイアウト (サイズ設定) されます。

BaselineRelativeArrangement プロパティが true である場合、サブビューは、上、下、または中心 - Y の位置ではなく、最初または最後のサブビューのベースラインに基づいてレイアウトされます。これらは、次のようにスタックビューのコンテンツで計算されます。

垂直スタックビューにより、最初のベースラインに対して最初のサブビュー、および最後のベースラインに対して最後のサブビューが返されます。これらのいずれかのサブビュー自体がスタックビューである場合は、最初または最後のベースラインが使用されます。
水平スタックビューにより、最初のベースラインと最後のベースラインの両方に対して最も高いサブビューが使用されます。最も高いビューがスタックビューでもある場合は、最も高いサブビューがベースラインとして使用されます。

重要

ベースラインの配置は、拡大または圧縮されたサブビューのサイズに対しては機能しません。なぜなら、ベースラインの計算結果が間違った位置になるからです。ベースライン配置の場合、サブビューの高さが組み込みコンテンツビューの高さと一致していることを確認します。

一般的なスタックビューの用途

スタックビューコントロールで適切に動作するレイアウトの種類がいくつかあります。 Apple によると、いくつかの一般的な用途には次のものがあります。

軸に沿ったサイズの定義 – スタックビューの Axis に沿って両方の端をピン留めし、隣接する端の 1 つを固定して位置を設定することで、サブビューで定義されたスペースに合うようにスタックビューが軸に沿って拡大されます。
サブビューの位置の定義 – スタックビューの隣接する端を親ビューにピン留めすることで、スタックビューは、含まれるサブビューに合うように両方向に拡大されます。
スタックビューのサイズと位置の定義 – スタックビューの4つの端をすべて親ビューにピン留めすることで、スタックビューによってスタックビュー内で定義されたスペースに基づいてサブビューが配置されます。
軸に垂直なサイズの定義 – スタックビューの Axis に垂直な両方の端と、軸に沿った端の 1 つエッジをピン留めして位置を設定することで、スタックビューはサブビューで定義されたスペースに合わせて軸に垂直に拡大されます。

スタックビューとストーリーボード

Xamarin.tvOS アプリでスタックビューを操作する最も簡単な方法は、iOS Designer を使用してアプリの UI に追加することです。

Visual Studio for Mac
Visual Studio

Solution Pad で Main.storyboard ファイルをダブルクリックして、編集用に開きます。
スタックビューに追加する個々の要素のレイアウトを設計します。
要素が正しくスケーリングされるように、要素に必要な制約を追加します。この手順は、要素がスタックビューに追加された後に重要になります。
必要な数のコピーを作成します (この場合は 4 つ)。
ツールボックスからスタックビューをドラッグし、ビューにドロップします。
スタックビューを選択し、Properties Pad の [ウィジェット] タブで、[配置] に [塗りつぶし] を選択し、[分布] に [均等に塗りつぶし] を選択し、[間隔] に「25」と入力します。
スタックビューを画面の目的の場所に配置し、必要な場所に保持するために制約を追加します。
個々の要素を選択し、スタックビューにドラッグします。
レイアウトが調整され、上記で設定した属性に基づいてスタックビューに要素が配置されます。
C# コードで UI コントロールを操作するために、Properties Explorer の [ウィジェット] タブに [名前] を割り当てます。
変更を保存します。

ソリューションエクスプローラーで Main.storyboard ファイルをダブルクリックして、編集用に開きます。
スタックビューに追加する個々の要素のレイアウトを設計します。
要素が正しくスケーリングされるように、要素に必要な制約を追加します。この手順は、要素がスタックビューに追加された後に重要になります。
必要な数のコピーを作成します (この場合は 4 つ)。
ツールボックスからスタックビューをドラッグし、ビューにドロップします。
スタックビューを選択し、Properties Explorer の [ウィジェット] タブで、[配置] に [塗りつぶし] を選択し、[分布] に [均等に塗りつぶし] を選択し、[間隔] に「25」と入力します。
スタックビューを画面の目的の場所に配置し、必要な場所に保持するために制約を追加します。
個々の要素を選択し、スタックビューにドラッグします。
レイアウトが調整され、上記で設定した属性に基づいてスタックビューに要素が配置されます。
C# コードで UI コントロールを操作するために、Properties Explorer の [ウィジェット] タブに [名前] を割り当てます。
変更を保存します。

重要

イベントハンドラーの作成時に iOS Designer で TouchUpInside などのアクションを UI 要素 (UIButton など) に割り当てることは可能ですが、Apple TV にはタッチスクリーンがないか、タッチイベントをサポートしていないため、このアクションが呼び出されることはありません。 tvOS ユーザーインターフェイス要素のアクションを作成する場合は、常に既定の Action Type を使用する必要があります。

ストーリーボードの使用の詳細については、「はじめての 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;
    }
}

アプリを実行すると、スタックビューで4 つの要素が均等に分散されます。

プレイヤーの数が減ると、未使用のビューは非表示になり、スタックビューによってレイアウトがサイズに合わせて調整されます。

コードからのスタックビューの設定

iOS Designer でスタックビューのコンテンツとレイアウトを完全に定義するだけでなく、C# コードから動的に作成および削除することもできます。

次の例では、スタックビューを使用してレビューの "星" (stars) を処理します (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 ステートメントを使用して、"星" の数が 5 より大きくないか、または 0 より小さくないかを確認します。

新しい "星" を追加するには、そのイメージを読み込み、Content Mode を Scale Aspect Fit に設定します。

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

これにより、"星" アイコンがスタックビューに追加されたときに歪むことを防止できます。

次に、新しい "星" アイコンをスタックビューのサブビューのコレクションに追加します。

RatingView.AddArrangedSubview(icon);

UIImageView を UIStackView の SubView ではなく ArrangedSubviews プロパティに追加したことに注意してください。スタックビューでレイアウトを制御するビューは、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 スタック ビューの操作

スタック ビュー コントロールについて

自動レイアウト クラスとサイズ クラス

スタック ビューの配置とサイズ設定

一般的なスタック ビューの用途

スタック ビューとストーリーボード

コードからのスタック ビューの設定

コンテンツの動的変更

まとめ

関連リンク

その他のリソース

Xamarin での tvOS スタックビューの操作

スタックビューコントロールについて

自動レイアウトクラスとサイズクラス

スタックビューの配置とサイズ設定

一般的なスタックビューの用途

スタックビューとストーリーボード

コードからのスタックビューの設定