Xamarin での tvOS コレクションビューの操作

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

コレクションビューを使用すると、任意のレイアウトを使用してコンテンツのグループを表示できます。組み込みのサポートを使用すると、グリッド状または線形のレイアウトを簡単に作成でき、カスタムレイアウトもサポートされます。

コレクションビューでは、デリゲートとデータソースの両方を使用して項目のコレクションを保持して、ユーザー操作とコレクションのコンテンツを提供します。コレクションビューは、ビュー自体から独立したレイアウトサブシステムに基づいているため、別のレイアウトを指定すると、コレクションビューのデータの表示をその場で簡単に変更できます。

コレクションビューについて

前述のとおり、コレクションビュー (UICollectionView) は、項目の順序付けられたコレクションを管理し、それらの項目をカスタマイズ可能なレイアウトで表示します。コレクションビューは、レイアウトを使用して項目を 1 つ以上の列に表示できる点を除いて、テーブルビュー (UITableView) と同様に機能します。

tvOS でコレクションビューを使用する場合、アプリは、データソース (UICollectionViewDataSource) を使用して、コレクションに関連付けられているデータを提供する役割を担います。コレクションビューのデータは、必要に応じて、別のグループ (セクション) に編成して表示できます。

コレクションビューでは、セル (UICollectionViewCell) を使用して個々の項目を画面上に表示します。セルには、コレクションから得た特定の情報 (画像やそのタイトルなど) が表示されます。

必要に応じて、セクションとセルのヘッダーおよびフッターとして機能する補助ビューをコレクションビューの表示に追加できます。コレクションビューのレイアウトは、個々のセルに加えて補助ビューの配置も定義する役割を担います。

コレクションビューでは、デリゲート (UICollectionViewDelegate) を使用してユーザー操作に応答できます。このデリゲートは、セルが強調表示されている場合、またはセルが選択されている場合に、そのセルがフォーカスを取得できるかどうかを決定する役割も担います。場合によっては、デリゲートによって個々のセルのサイズが決まることもあります。

コレクションビューレイアウト

コレクションビューの主な機能は、表示するデータとそのレイアウトの分離です。コレクションビューレイアウト (UICollectionViewLayout) は、コレクションビューの画面上の表示でセル (および補助ビュー) の編成と場所を指定する役割を担います。

個々のセルは、コレクションビューによって、それに関連付けられているデータソースから作成され、指定されたコレクションビューレイアウトによって配置され、表示されます。

コレクションビューレイアウトは、通常、コレクションビューの作成時に提供されます。ただし、コレクションビューレイアウトはいつでも変更でき、コレクションビューのデータの画面上の表示は、提供された新しいレイアウトを使用して自動的に更新されます。

コレクションビューレイアウトには、2 つの異なるレイアウト間の切り替えをアニメーション化するために使用できるいくつかの方法が用意されています (既定では、アニメーション化は行われません)。さらに、コレクションビューレイアウトは、ジェスチャー認識エンジンと連携して、レイアウトの変更が発生するユーザー操作をアニメーション化することもできます。

セルと補助ビューの作成

コレクションビューのデータソースは、コレクション項目を裏付けるデータを提供するだけでなく、コンテンツの表示に使用されるセルを提供する役割も担います。

コレクションビューは、項目の大規模なコレクションを処理するように設計されているため、メモリ制限の超過を防ぐために、個々のセルをデキューして再利用することができます。ビューをデキューするには、2 つの異なるメソッドがあります。

DequeueReusableCell - 指定された種類 (アプリのストーリーボードで指定) のセルを作成するか、返します。
DequeueReusableSupplementaryView - 指定された種類 (アプリのストーリーボードで指定) の補助ビューを作成するか、返します。

これらのメソッドのいずれかを呼び出す前に、セルのビューを作成するために使用するクラス、ストーリーボード、または .xib ファイルをコレクションビューに登録する必要があります。次に例を示します。

public CityCollectionView (IntPtr handle) : base (handle)
{
    // Initialize
    RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
    ...
}

ここで、typeof(CityCollectionViewCell) は、ビューをサポートするクラスを提供し、CityViewDatasource.CardCellId は、セル (またはビュー) がデキューされるときに使用する ID を提供します。

セルがデキューされた後、そのセルに表示されている項目のデータを使用してセルを構成し、コレクションビューに戻って表示します。

コレクションビューコントローラーについて

コレクションビューコントローラー (UICollectionViewController) は、次の動作を提供する特殊なビューコントローラー (UIViewController) です。

ストーリーボードまたは .xib ファイルからコレクションビューを読み込み、ビューのインスタンスを作成する責任を担います。コード内で作成されると、構成されていない新しいコレクションビューを自動的に作成します。
コレクションビューが読み込まれると、コントローラーは、コレクションビューのデータソースとデリゲートをストーリーボードまたは .xib ファイルから読み込もうとします。使用できるものがない場合、コントローラーは、それ自体を両方のソースとして設定します。
最初の表示で、コレクションビューが設定される前にデータが確実に読み込まれるようにし、後続の各表示で、選択を再度読み込んでクリアします。

さらに、コレクションビューコントローラーには、AwakeFromNib や ViewWillDisplay など、コレクションビューのライフサイクルを管理するために使用できるオーバーライド可能なメソッドも用意されています。

コレクションビューとストーリーボード

Xamarin.tvOS アプリでコレクションビューを操作する最も簡単な方法は、アプリのストーリーボードにコレクションビューを追加することです。簡単な例として、画像、タイトル、選択ボタンを表示するサンプルアプリを作成します。ユーザーが選択ボタンをクリックすると、コレクションビューが表示され、ユーザーは新しい画像を選択できます。画像が選択されると、コレクションビューは閉じられ、新しい画像とタイトルが表示されます。

次の操作を行います。

Visual Studio for Mac
Visual Studio

Visual Studio for Mac で、新しいシングルビュー tvOS アプリを起動します。
ソリューションエクスプローラーで、Main.storyboard ファイルをダブルクリックし、それを iOS Designer で開きます。
画像ビュー、ラベル、ボタンを既存のビューに追加し、それらを次のように構成します。
プロパティエクスプローラーの [ウィジェット] タブで、画像ビューとラベルに [名前] を割り当てます。次に例を示します。
次に、コレクションビューコントローラーをストーリーボードにドラッグします。
ボタンからコレクションビューコントローラーに、コントロールキーを押しながらドラッグし、ポップアップから [プッシュ] を選択します。
このアプリを実行すると、ユーザーがボタンをクリックするたびにコレクションビューが表示されます。
コレクションビューを選択し、プロパティエクスプローラーの [レイアウト] タブに次の値を入力します。
これにより、個々のセルのサイズと、セルとコレクションビューの外側の端との間の境界線が制御されます。
コレクションビューコントローラーを選択し、[ウィジェット] タブで、そのクラスを CityCollectionViewController に設定します。
コレクションビューを選択し、[ウィジェット] タブで、そのクラスを CityCollectionView に設定します。
コレクションビューのセルを選択し、[ウィジェット] タブで、そのクラスを CityCollectionViewCell に設定します。
[ウィジェット] タブで、コントロールビューの [レイアウト] が Flow で、[スクロール方向] が Vertical であることを確認します。
コレクションビューのセルを選択し、[ウィジェット] タブで、その[ID] を CityCell に設定します。
変更を保存。

Visual Studio で、新しいシングルビュー tvOS アプリを起動します。
ソリューションエクスプローラーで、Main.storyboard ファイルをダブルクリックし、それを iOS Designer で開きます。
画像ビュー、ラベル、ボタンを既存のビューに追加し、それらを次のように構成します。
プロパティエクスプローラーの [ウィジェット] タブで、画像ビューとラベルに [名前] を割り当てます。次に例を示します。
次に、コレクションビューコントローラーをストーリーボードにドラッグします。
ボタンからコレクションビューコントローラーに、コントロールキーを押しながらドラッグし、ポップアップから [プッシュ] を選択します。
このアプリを実行すると、ユーザーがボタンをクリックするたびにコレクションビューが表示されます。
コレクションビューを選択し、プロパティエクスプローラーの [レイアウト] タブで、[幅] を 361、[高さ] を 256と入力します
これにより、個々のセルのサイズと、セルとコレクションビューの外側の端との間の境界線が制御されます。
コレクションビューコントローラーを選択し、[ウィジェット] タブで、そのクラスを CityCollectionViewController に設定します。
コレクションビューを選択し、[ウィジェット] タブで、そのクラスを CityCollectionView に設定します。
コレクションビューのセルを選択し、[ウィジェット] タブで、そのクラスを CityCollectionViewCell に設定します。
[ウィジェット] タブで、コントロールビューの [レイアウト] が Flow で、[スクロール方向] が Vertical であることを確認します。
コレクションビューのセルを選択し、[ウィジェット] タブで、その[ID] を CityCell に設定します。
変更を保存。

コレクションビューの [レイアウト] として Custom を選択した場合、カスタムレイアウトを指定できます。 Apple は、データをグリッドベースのレイアウトで簡単に表示できる組み込みの UICollectionViewFlowLayout と UICollectionViewDelegateFlowLayout を提供しています (これらは、flow レイアウトスタイルで使用されます)。

ストーリーボードの使用の詳細については、「はじめての tvOS クイックスタートガイド」を参照してください。

コレクションビューのデータの提供

コレクションビュー (およびコレクションビューコントローラー) をストーリーボードに追加したので、コレクションのデータを提供する必要があります。

データモデル

まず、データのモデルを作成します。このモデルには、表示する画像のファイル名、タイトル、都市を選択できるようにするためのフラグを保持します。

CityInfo クラスを作成し、次のような内容にします。

using System;

namespace tvCollection
{
    public class CityInfo
    {
        #region Computed Properties
        public string ImageFilename { get; set; }
        public string Title { get; set; }
        public bool CanSelect{ get; set; }
        #endregion

        #region Constructors
        public CityInfo (string filename, string title, bool canSelect)
        {
            // Initialize
            this.ImageFilename = filename;
            this.Title = title;
            this.CanSelect = canSelect;
        }
        #endregion
    }
}

コレクションビューのセル

次に、各セルのデータの表示方法を定義する必要があります。 CityCollectionViewCell.cs ファイル (ストーリーボードファイルから自動的に作成されます) を編集し、次のような内容にします。

using System;
using Foundation;
using UIKit;
using CoreGraphics;

namespace tvCollection
{
    public partial class CityCollectionViewCell : UICollectionViewCell
    {
        #region Private Variables
        private CityInfo _city;
        #endregion

        #region Computed Properties
        public UIImageView CityView { get ; set; }
        public UILabel CityTitle { get; set; }

        public CityInfo City {
            get { return _city; }
            set {
                _city = value;
                CityView.Image = UIImage.FromFile (City.ImageFilename);
                CityView.Alpha = (City.CanSelect) ? 1.0f : 0.5f;
                CityTitle.Text = City.Title;
            }
        }
        #endregion

        #region Constructors
        public CityCollectionViewCell (IntPtr handle) : base (handle)
        {
            // Initialize
            CityView = new UIImageView(new CGRect(22, 19, 320, 171));
            CityView.AdjustsImageWhenAncestorFocused = true;
            AddSubview (CityView);

            CityTitle = new UILabel (new CGRect (22, 209, 320, 21)) {
                TextAlignment = UITextAlignment.Center,
                TextColor = UIColor.White,
                Alpha = 0.0f
            };
            AddSubview (CityTitle);
        }
        #endregion


    }
}

この tvOS アプリでは、画像とオプションのタイトルを表示します。特定の都市を選択できない場合は、次のコードを使用して画像ビューを淡色表示します。

CityView.Alpha = (City.CanSelect) ? 1.0f : 0.5f;

ユーザーによって画像を含むセルにフォーカスが設定された場合、次のプロパティを設定して、そのセルに対して組み込みの視差効果を使用します。

CityView.AdjustsImageWhenAncestorFocused = true;

ナビゲーションとフォーカスの詳細については、ナビゲーションとフォーカスの操作およびSiri リモートコントローラーと Bluetooth コントローラーに関するドキュメントを参照してください。

コレクションビューのデータプロバイダー

データモデルを作成し、セルレイアウトを定義したら、コレクションビューのデータソースを作成しましょう。データソースは、裏付けデータを提供するだけでなく、セルをデキューして個々のセルを画面上に表示する役割も担います。

CityViewDatasource クラスを作成し、次のような内容にします。

using System;
using System.Collections.Generic;
using UIKit;
using Foundation;
using CoreGraphics;
using ObjCRuntime;

namespace tvCollection
{
    public class CityViewDatasource : UICollectionViewDataSource
    {
        #region Application Access
        public static AppDelegate App {
            get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
        }
        #endregion

        #region Static Constants
        public static NSString CardCellId = new NSString ("CityCell");
        #endregion

        #region Computed Properties
        public List<CityInfo> Cities { get; set; } = new List<CityInfo>();
        public CityCollectionView ViewController { get; set; }
        #endregion

        #region Constructors
        public CityViewDatasource (CityCollectionView controller)
        {
            // Initialize
            this.ViewController = controller;
            PopulateCities ();
        }
        #endregion

        #region Public Methods
        public void PopulateCities() {

            // Clear existing cities
            Cities.Clear();

            // Add new cities
            Cities.Add(new CityInfo("City01.jpg", "Houses by Water", false));
            Cities.Add(new CityInfo("City02.jpg", "Turning Circle", true));
            Cities.Add(new CityInfo("City03.jpg", "Skyline at Night", true));
            Cities.Add(new CityInfo("City04.jpg", "Golden Gate Bridge", true));
            Cities.Add(new CityInfo("City05.jpg", "Roads by Night", true));
            Cities.Add(new CityInfo("City06.jpg", "Church Domes", true));
            Cities.Add(new CityInfo("City07.jpg", "Mountain Lights", true));
            Cities.Add(new CityInfo("City08.jpg", "City Scene", false));
            Cities.Add(new CityInfo("City09.jpg", "House in Winter", true));
            Cities.Add(new CityInfo("City10.jpg", "By the Lake", true));
            Cities.Add(new CityInfo("City11.jpg", "At the Dome", true));
            Cities.Add(new CityInfo("City12.jpg", "Cityscape", true));
            Cities.Add(new CityInfo("City13.jpg", "Model City", true));
            Cities.Add(new CityInfo("City14.jpg", "Taxi, Taxi!", true));
            Cities.Add(new CityInfo("City15.jpg", "On the Sidewalk", true));
            Cities.Add(new CityInfo("City16.jpg", "Midnight Walk", true));
            Cities.Add(new CityInfo("City17.jpg", "Lunchtime Cafe", true));
            Cities.Add(new CityInfo("City18.jpg", "Coffee Shop", true));
            Cities.Add(new CityInfo("City19.jpg", "Rustic Tavern", true));
        }
        #endregion

        #region Override Methods
        public override nint NumberOfSections (UICollectionView collectionView)
        {
            return 1;
        }

        public override nint GetItemsCount (UICollectionView collectionView, nint section)
        {
            return Cities.Count;
        }

        public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cityCell = (CityCollectionViewCell)collectionView.DequeueReusableCell (CardCellId, indexPath);
            var city = Cities [indexPath.Row];

            // Initialize city
            cityCell.City = city;

            return cityCell;
        }
        #endregion
    }
}

このクラスを詳しく見てみましょう。まず、UICollectionViewDataSource から継承し、(iOS Designer で割り当てた) セル ID へのショートカットを提供します。

public static NSString CardCellId = new NSString ("CityCell");

次に、コレクションデータのストレージを提供し、データを設定するクラスを提供します。

public List<CityInfo> Cities { get; set; } = new List<CityInfo>();
...

public void PopulateCities() {

    // Clear existing cities
    Cities.Clear();

    // Add new cities
    Cities.Add(new CityInfo("City01.jpg", "Houses by Water", false));
    Cities.Add(new CityInfo("City02.jpg", "Turning Circle", true));
    ...
}

その後、NumberOfSections メソッドをオーバーライドし、コレクションビューに含まれるセクション (項目のグループ) の数を返します。この場合は、1 つしかありません。

public override nint NumberOfSections (UICollectionView collectionView)
{
    return 1;
}

次に、次のコードを使用して、コレクション内の項目数を返します。

public override nint GetItemsCount (UICollectionView collectionView, nint section)
{
    return Cities.Count;
}

最後に、次のコードを使用して、コレクションビューが要求したときに再利用可能なセルをデキューします。

public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
{
    var cityCell = (CityCollectionViewCell)collectionView.DequeueReusableCell (CardCellId, indexPath);
    var city = Cities [indexPath.Row];

    // Initialize city
    cityCell.City = city;

    return cityCell;
}

CityCollectionViewCell 型のコレクションビューのセルを取得したら、指定された項目をそのセルに設定します。

ユーザーイベントへの応答

ユーザーがコレクションから項目を選択できるようにする必要があるため、この操作を処理するコレクションビューのデリゲートを提供する必要があります。また、ユーザーが選択した項目を呼び出し元のビューに通知する方法を提供する必要もあります。

アプリデリゲート

現在選択されている項目をコレクションビューから呼び出し元のビューに関連付ける方法が必要です。 AppDelegate でカスタムプロパティを使用します。 AppDelegate.cs ファイルを編集し、次のコードを追加します。

public CityInfo SelectedCity { get; set;} = new CityInfo("City02.jpg", "Turning Circle", true);

これにより、プロパティが定義され、最初に表示される既定の都市が設定されます。後でこのプロパティを使用して、ユーザーの選択を表示し、選択を変更できるようにします。

コレクションビューのデリゲート

次に、新しい CityViewDelegate クラスをプロジェクトに追加し、次のような内容にします。

using System;
using System.Collections.Generic;
using UIKit;
using Foundation;
using CoreGraphics;

namespace tvCollection
{
    public class CityViewDelegate : UICollectionViewDelegateFlowLayout
    {
        #region Application Access
        public static AppDelegate App {
            get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
        }
        #endregion

        #region Constructors
        public CityViewDelegate ()
        {
        }
        #endregion

        #region Override Methods
        public override CGSize GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
        {
            return new CGSize (361, 256);
        }

        public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
        {
            if (indexPath == null) {
                return false;
            } else {
                var controller = collectionView as CityCollectionView;
                return controller.Source.Cities[indexPath.Row].CanSelect;
            }
        }

        public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var controller = collectionView as CityCollectionView;
            App.SelectedCity = controller.Source.Cities [indexPath.Row];

            // Close Collection
            controller.ParentController.DismissViewController(true,null);
        }
        #endregion
    }
}

このクラスを詳しく見てみましょう。まず、UICollectionViewDelegateFlowLayout から継承します。 UICollectionViewDelegate ではなくこのクラスを継承するのは、カスタムレイアウトの種類ではなく組み込みの UICollectionViewFlowLayout を使用して項目を表示するためです。

次に、次のコードを使用して、個々の項目のサイズを返します。

public override CGSize GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
{
    return new CGSize (361, 256);
}

その後、次のコードを使用して、特定のセルがフォーカスを取得できるかどうかを決定します。

public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
{
    if (indexPath == null) {
        return false;
    } else {
        var controller = collectionView as CityCollectionView;
        return controller.Source.Cities[indexPath.Row].CanSelect;
    }
}

裏付けデータの特定の部分の CanSelect フラグが true に設定されているかどうかを確認し、その値を返します。ナビゲーションとフォーカスの詳細については、ナビゲーションとフォーカスの操作およびSiri リモートコントローラーと Bluetooth コントローラーに関するドキュメントを参照してください。

最後に、次のコードを使用して、項目を選択したユーザーに応答します。

public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
{
    var controller = collectionView as CityCollectionView;
    App.SelectedCity = controller.Source.Cities [indexPath.Row];

    // Close Collection
    controller.ParentController.DismissViewController(true,null);
}

ここで、AppDelegate の SelectedCity プロパティを、ユーザーが選択した項目に設定し、コレクションビューコントローラーを閉じ、呼び出し元のビューに戻ります。コレクションビューの ParentController プロパティをまだ定義していないので、次に、それを定義します。

コレクションビューの構成

次に、コレクションビューを編集し、データソースとデリゲートを割り当てる必要があります。 CityCollectionView.cs ファイル (ストーリーボードから自動的に作成されます) を編集し、次のような内容にします。

using System;
using Foundation;
using UIKit;

namespace tvCollection
{
    public partial class CityCollectionView : UICollectionView
    {
        #region Application Access
        public static AppDelegate App {
            get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
        }
        #endregion

        #region Computed Properties
        public CityViewDatasource Source {
            get { return DataSource as CityViewDatasource;}
        }

        public CityCollectionViewController ParentController { get; set;}
        #endregion

        #region Constructors
        public CityCollectionView (IntPtr handle) : base (handle)
        {
            // Initialize
            RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
            DataSource = new CityViewDatasource (this);
            Delegate = new CityViewDelegate ();
        }
        #endregion

        #region Override Methods
        public override nint NumberOfSections ()
        {
            return 1;
        }

        public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
        {
            var previousItem = context.PreviouslyFocusedView as CityCollectionViewCell;
            if (previousItem != null) {
                Animate (0.2, () => {
                    previousItem.CityTitle.Alpha = 0.0f;
                });
            }

            var nextItem = context.NextFocusedView as CityCollectionViewCell;
            if (nextItem != null) {
                Animate (0.2, () => {
                    nextItem.CityTitle.Alpha = 1.0f;
                });
            }
        }
        #endregion
    }
}

まず、AppDelegate にアクセスするためのショートカットを提供します。

public static AppDelegate App {
    get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}

次に、コレクションビューのデータソースへのショートカットと、コレクションビューコントローラーにアクセスするためのプロパティを提供します (ユーザーが選択したときにコレクションを閉じるために上記のデリゲートによって使用されます)。

public CityViewDatasource Source {
    get { return DataSource as CityViewDatasource;}
}

public CityCollectionViewController ParentController { get; set;}

その後、次のコードを使用して、コレクションビューを初期化し、セルのクラス、データソース、デリゲートを割り当てます。

public CityCollectionView (IntPtr handle) : base (handle)
{
    // Initialize
    RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
    DataSource = new CityViewDatasource (this);
    Delegate = new CityViewDelegate ();
}

最後に、画像の下のタイトルは、ユーザーが画像を強調表示した (フォーカスを設定した) 場合にのみ表示されるようにします。これを行うには、次のコードを使用します。

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    var previousItem = context.PreviouslyFocusedView as CityCollectionViewCell;
    if (previousItem != null) {
        Animate (0.2, () => {
            previousItem.CityTitle.Alpha = 0.0f;
        });
    }

    var nextItem = context.NextFocusedView as CityCollectionViewCell;
    if (nextItem != null) {
        Animate (0.2, () => {
            nextItem.CityTitle.Alpha = 1.0f;
        });
    }
}

フォーカスを失った前の項目の透明度をゼロ (0) に設定し、フォーカスを取得した次の項目の透明度を 100% に設定します。これらの切り替えもアニメーション化されます。

コレクションビューコントローラーの構成

次に、コレクションビューで最後の構成を行い、ユーザーが選択した後にコレクションビューを閉じることができるように、定義したプロパティをコントローラーが設定できるようにする必要があります。

CityCollectionViewController.cs ファイル (ストーリーボードから自動的に作成されます) を編集し、次のような内容にします。

// This file has been autogenerated from a class added in the UI designer.

using System;

using Foundation;
using UIKit;

namespace tvCollection
{
    public partial class CityCollectionViewController : UICollectionViewController
    {
        #region Computed Properties
        public CityCollectionView Collection {
            get { return CollectionView as CityCollectionView; }
        }
        #endregion

        #region Constructors
        public CityCollectionViewController (IntPtr handle) : base (handle)
        {
        }
        #endregion

        #region Override Methods
        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();

            // Save link to controller
            Collection.ParentController = this;
        }
        #endregion
    }
}

まとめ

コレクションビューにデータを入力して制御するためのすべての部分を作成したので、最後にメインビューを編集して、すべてをまとめる必要があります。

ViewController.cs ファイル (ストーリーボードから自動的に作成されます) を編集し、次のような内容にします。

using System;
using Foundation;
using UIKit;
using tvCollection;

namespace MySingleView
{
    public partial class ViewController : UIViewController
    {
        #region Application Access
        public static AppDelegate App {
            get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
        }
        #endregion

        #region Constructors
        public ViewController (IntPtr handle) : base (handle)
        {
        }
        #endregion

        #region Override Methods
        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();
            // Perform any additional setup after loading the view, typically from a nib.
        }

        public override void ViewWillAppear (bool animated)
        {
            base.ViewWillAppear (animated);

            // Update image with the currently selected one
            CityView.Image = UIImage.FromFile(App.SelectedCity.ImageFilename);
            BackgroundView.Image = CityView.Image;
            CityTitle.Text = App.SelectedCity.Title;
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
        #endregion
    }
}

次のコードは、最初に AppDelegate の SelectedCity プロパティから選択された項目を表示し、ユーザーがコレクションビューから選択したときにそれを再表示します。

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Update image with the currently selected one
    CityView.Image = UIImage.FromFile(App.SelectedCity.ImageFilename);
    BackgroundView.Image = CityView.Image;
    CityTitle.Text = App.SelectedCity.Title;
}

アプリのテスト

すべての準備が整った状態で、アプリをビルドして実行すると、既定の都市を表示したメインビューが表示されます。

ユーザーが [ビューの選択] ボタンをクリックすると、コレクションビューが表示されます。

CanSelect プロパティが false に設定されている都市は淡色表示され、ユーザーは、その都市にフォーカスを設定できません。ユーザーが項目を強調表示する (フォーカスを設定する) と、タイトルが表示され、ユーザーは、視差効果を使用して、画像を 3D で微妙に傾けることができます。

ユーザーが選択した画像をクリックすると、コレクションビューが閉じられ、新しい画像を表示したメインビューが再表示されます。

カスタムレイアウトの作成と項目の並べ替え

コレクションビューを使用する主な機能の 1 つは、カスタムレイアウトを作成する機能です。 tvOS は iOS から継承されるため、カスタムレイアウトを作成するプロセスは同じです。詳細については、コレクションビューの概要のドキュメントを参照してください。

最近、iOS 9 のコレクションビューに、コレクション内の項目を簡単に並べ替える機能が追加されました。 tvOS 9 は iOS 9 のサブセットであるため、この並べ替えも同じ方法で行われます。詳細については、コレクションビューの変更に関するドキュメントを参照してください。

まとめ

この記事では、Xamarin.tvOS アプリ内でのコレクションビューの設計と操作について説明しました。最初に、コレクションビューを構成するすべての要素について説明しました。次に、ストーリーボードを使用して、コレクションビューを設計および実装する方法について説明しました。最後に、カスタムレイアウトの作成と項目の並べ替えに関する情報へのリンクを提供します。

次の方法で共有

Xamarin での tvOS コレクションビューの操作

コレクションビューについて

コレクションビューレイアウト

セルと補助ビューの作成

コレクションビューコントローラーについて

コレクションビューとストーリーボード

コレクションビューのデータの提供

データモデル

コレクションビューのセル

コレクションビューのデータプロバイダー

ユーザーイベントへの応答

アプリデリゲート

コレクションビューのデリゲート

コレクションビューの構成

コレクションビューコントローラーの構成

まとめ

アプリのテスト

カスタムレイアウトの作成と項目の並べ替え

まとめ

その他のリソース

次の方法で共有

Xamarin での tvOS コレクション ビューの操作

コレクション ビューについて

コレクション ビュー レイアウト

セルと補助ビューの作成

コレクション ビュー コントローラーについて

コレクション ビューとストーリーボード

コレクション ビューのデータの提供

データ モデル

コレクション ビューのセル

コレクション ビューのデータ プロバイダー

ユーザー イベントへの応答

アプリ デリゲート

コレクション ビューのデリゲート

コレクション ビューの構成

コレクション ビュー コントローラーの構成

まとめ

アプリのテスト

カスタム レイアウトの作成と項目の並べ替え

まとめ

関連リンク

その他のリソース

Xamarin での tvOS コレクションビューの操作

コレクションビューについて

コレクションビューレイアウト

コレクションビューコントローラーについて

コレクションビューとストーリーボード

コレクションビューのデータの提供

データモデル

コレクションビューのセル

コレクションビューのデータプロバイダー

ユーザーイベントへの応答

アプリデリゲート

コレクションビューのデリゲート

コレクションビューの構成

コレクションビューコントローラーの構成

カスタムレイアウトの作成と項目の並べ替え