Xamarin での tvOS ナビゲーション バーの操作

  • [アーティクル]

ナビゲーション バーをビューの上部に追加して、タイトルとオプションのナビゲーション バー ボタンを表示できます。 これらは通常、ユーザーがテーブル ビュー、コレクション、メニューなどのメイン ページから、選択した項目の詳細を示すサブビューに移動したときに使用されます。

サンプル ナビゲーション バー

ナビゲーション バーには、タイトル (中央に表示されます) に加えて、バーの左側と右側に 1 つ以上のナビゲーション バー ボタン (UIBarButtonItem) を含めることができます。

重要

ナビゲーション バーは、既定では完全に透明です。 ナビゲーション バーのコンテンツが、その下のコンテンツの上で読み取り可能な状態を維持するように注意する必要があります。 たとえば、テーブル ビューやコレクション内のコンテンツがその下でスクロールされる場合などです。

Xamarin.tvOS アプリでナビゲーション バーを操作する最も簡単な方法は、iOS Designer を使用してアプリの UI にそれらを追加することです。

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

  2. [ツールボックス] から [ナビゲーション バー] をドラッグして、画面上部のビューにドロップします。

    ナビゲーション バー

  3. [ナビゲーション バー] をダブルクリックし、[Navigation Item] (ナビゲーション項目) を選択します。. Properties Pad の [ウィジェット] タブで、[タイトル] を設定できます。:

    タイトルを設定する

  4. 次に、バーのどちらかの端に 1 つ以上のバー ボタン項目を追加できます。

    バー ボタンの項目

  5. 最後に、プロパティ エクスプローラーの [イベント] タブでバー ボタン項目をアクションに接続します。

    バー ボタン項目のアクション

  6. 変更を保存。

重要

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

次のコードは、3 つの異なる BarButtonItem (ShowFirstHotel、ShowSecondHotel、ShowThirdHotel) のイベント ハンドラーの例を示しています。 各項目をクリックすると、背景画像 HotelImage が変更されます。 これは、ビュー コントローラー (例: ViewController.cs) ファイルで編集します。

using System;
using Foundation;
using UIKit;

namespace MySingleView
{
    public partial class ViewController : UIViewController
    {
        #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 DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
        #endregion

        #region Custom Actions
        partial void ShowFirstHotel (UIBarButtonItem sender) {
            // Change background image
            HotelImage.Image = UIImage.FromFile("Motel01.jpg");
        }

        partial void ShowSecondHotel (UIBarButtonItem sender) {
            // Change background image
            HotelImage.Image = UIImage.FromFile("Motel02.jpg");
        }

        partial void ShowThirdHotel (UIBarButtonItem sender) {
            // Change background image
            HotelImage.Image = UIImage.FromFile("Motel03.jpg");
        }
        #endregion
    }
}

ボタンの Enabled プロパティが true で他のコントロールまたはビューでカバーされていない限り、Siri Remote を使用してフォーカス内アイテムにできます。

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

まとめ

この記事では、Xamarin.tvOS アプリ内のナビゲーション バーの設計と操作方法について説明しました。