Xamarin での tvOS ページ コントロールの使用

Xamarin.tvOS アプリで一連のページまたは画像を表示することが必要な場合があります。 ページ コントロールは、ユーザーが最大ページ数のうちどのページを表示しているかを明確に示すために設計されました。 ページ コントロールでは、暗い楕円の形をした背景に対して一連のドットを表示します。 現在のページには塗りつぶされたドットが表示され、他のすべてのページは空のドットとして表示されます。 ページ コントロールでは、多すぎて背景領域に収まらない場合に、最も外側のドットをクリップします。

サンプル ページ コントロール

ユーザーのみにフィードバックを提供するように設計された非対話型要素のページ コントロール。 現在のページ番号 (ジェスチャやボタンなど) を変更するには、他のコントロールを追加する必要があります。

ページ コントロールを使用する場合、Apple には次の推奨事項があります。

  • フル コレクションでのみ使用する - ページ コントロールは、1 つのコレクションに存在する複数のページを表示するために、全画面表示環境で最適に機能します。
  • ページ数を制限する - ページ コントロールは 10 ページ以下、最大 20 ページに最適です。 20 ページを超える場合は、コレクション ビューを使用し、グリッドにページを表示することを検討してください。

ページ コントロールとストーリーボード

Xamarin.tvOS アプリでページ コントロールを操作する最も簡単な方法は、iOS Designer を使用してアプリの UI に追加することです。

  1. Solution PadMain.storyboard ファイルをダブルクリックして、編集用に開きます。

  2. ツールボックスからページ コントロールをドラッグし、ビューにドロップします。

    ページ コントロール

  3. Properties Pad[ウィジェット] タブでは、[現在のページ][ページ数] など、ページ コントロールのいくつかのプロパティを調整できます。

    [ウィジェット] タブ

  4. 次に、コントロールまたはジェスチャをビューに追加して、ページのコレクションを前後に移動します。

  5. 最後に、C# コードで応答できるように、コントロールに名前を割り当てます。 次に例を示します。

    コントロールに名前を付けます

  6. 変更を保存。

重要

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

ビュー コントローラー (例: ViewController.cs) ファイルを編集し、変更するページを処理するコードを追加します。 次に例を示します。

using System;
using Foundation;
using UIKit;

namespace MySingleView
{
    public partial class ViewController : UIViewController
    {
        #region Computed Properties
        public nint PageNumber { get; set; } = 0;
        #endregion

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

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

            // Initialize
            PageView.Pages = 6;
            ShowCat ();
        }

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

        #region Custom Actions
        partial void NextCat (UIBarButtonItem sender) {

            // Display next Cat
            if (++PageNumber > 5) {
                PageNumber = 5;
            }
            ShowCat();

        }

        partial void PreviousCat (UIBarButtonItem sender) {
            // Display previous cat
            if (--PageNumber < 0) {
                PageNumber = 0;
            }
            ShowCat();
        }
        #endregion

        #region Private Methods
        private void ShowCat() {

            // Adjust UI
            PreviousButton.Enabled = (PageNumber > 0);
            NextButton.Enabled = (PageNumber < 5);
            PageView.CurrentPage = PageNumber;

            // Display new cat
            CatView.Image = UIImage.FromFile(string.Format("Cat{0:00}.jpg",PageNumber+1));
        }
        #endregion
    }
}

ページ コントロールの 2 つのプロパティを詳しく見てみましょう。 最初に、ページの最大数を指定するには、次を使用します。

PageView.Pages = 6;

現在のページ番号を変更するには、次のコードを使用します。

PageView.CurrentPage = PageNumber;

CurrentPage プロパティは 0 から始まるため、最初のページは 0 になり、最後は 1 から最大ページ数を引いたものになります。

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

まとめ

この記事では、Xamarin.tvOS アプリ内でのページ コントロールの設計と使用について説明しました。