Xamarin での tvOS ボタンの操作

UIButton クラスのインスタンスを使用して、tvOS ウィンドウにフォーカス可能で選択可能なボタンを作成します。 ユーザーがボタンを選択すると、ターゲット オブジェクトにアクション メッセージが送信され、Xamarin.tvOS アプリがユーザーの入力に応答できるようになります。

フォーカスの操作と Siri Remote での移動の詳細については、「ナビゲーションとフォーカスの使用」と「Siri のリモート コントローラーと Bluetooth コントローラー」ドキュメントをご覧ください。

ボタンについて

tvOS では、ボタンはアプリ固有のアクションに使用され、タイトル、アイコン、またはその両方を含む場合があります。 ユーザーが Siri Remote を使用してアプリのユーザー インターフェイスに移動すると、フォーカスが指定されたボタンに移動し、テキストと背景色が変更されます。 また、ボタンに影が適用され、3D 効果が追加され、ユーザー インターフェイスの残りの部分から浮き上がるように見えます。

Apple では、ボタンの操作に関して次のように提案しています。

• タイトルまたはアイコンを使用する - アイコンとタイトルの両方をボタンに含めることができますが、スペースは限られているので、両方を組み合わせないようにします。
• 破壊的ボタンを明示する - ボタンが破壊的なアクション (ファイルの削除など) を実行する場合は、テキストやアイコンを使用して、そのボタンを明確にマークします。 破壊的アクションでは、ユーザーにアクションを制限するよう求めるアラートを常に提示する必要があります。
• 戻るボタンを使用しない - 前の画面に戻るには Siri Remote の [メニュー] ボタンを使用します。 このルールの 唯一の例外は、[キャンセル] ボタンを表示する必要があるアプリ内購入や破壊的アクションです。

フォーカスとナビゲーションの操作の詳細については、「ナビゲーションとフォーカスの使用」に関するドキュメントをご覧ください。

ボタン アイコン

Apple は、ボタン アイコンにシンプルで高い認識性を持つ画像を使用することを提案しています。 テレビ画面上のアイコンが複雑すぎると、部屋の向こうに置かれたソファからは見分けることが難しいため、できるだけシンプルな表現を使って、考えを伝えましょう。 アイコンには、できればよく知られた標準的な画像 (検索用の虫眼鏡など) を使用するようにします。

ボタン タイトル

Apple では、ボタンのタイトルを作成するときに次のような提案をしています。

• アイコン ボタンの下に説明テキストを表示する - 可能な場合は、アイコンのみのボタンの下に、明確で説明的なテキストを配置し、ボタンの目的をより明確に伝えます。
• タイトルに動詞または動詞句を使用する - ユーザーがボタンをクリックしたときに実行されるアクションを明確に示します。
• タイトルスタイルの大文字表記を使用する - 冠詞、接続詞、前置詞 (4 文字以内) を除き、ボタンのタイトルの単語はすべて大文字にする必要があります。
• 短い、簡潔なタイトルを使用する - ボタンのアクションを説明するには、できるだけ短い動詞を使用します。

ボタンとストーリーボード

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

using System;
using UIKit;

namespace tvRemote
{
    public partial class ViewController : UIViewController
    {
        ...

        partial void ButtonPressed (UIButton sender) {
            // Handle click here
            ...
        }
    }
}

ボタンの Enabled プロパティが true で他のコントロールまたはビューでカバーされていない限り、Siri Remote を使用してフォーカス内アイテムにできます。 ユーザーがボタンを選択して Touch Surface をクリックすると、上記で定義した ButtonPressed アクションが実行されます。

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

ボタンとコード

必要に応じて、UIButton は C# コードで作成し、tvOS アプリのビューに追加できます。 次に例を示します。

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

コードで新しい UIButton を作成する場合は、次のいずれかとして UIButtonType を指定します。

• System - これは、tvOS で提供されるボタンの標準的な種類であり、最も頻繁に使用する種類です。
• DetailDisclosure - 詳細情報を非表示または表示するために使用されるボタンの "ターン ダウン" の種類を示します。
• InfoDark - 濃い詳細情報ボタンは、丸の中に "i" が表示されます。
• InfoLight - 明るい詳細情報ボタンは、丸の中に "i" が表示されます。
• AddContact - [連絡先の追加] ボタンとして表示します。
• Custom - ボタンのいくつかの特性をカスタマイズできます。

次に、ボタンの画面上のサイズと配置場所を定義します。 例:

button.Frame = new CGRect (25, 25, 300, 150);

次に、ボタンのタイトルを設定します。 UIButtons は状態を持っているという点で、ほとんどの UIKit コントロールとは異なるため、単純にタイトルを変更できません。特定の UIControlState に対して変更する必要があります。 次に例を示します。

button.SetTitle ("Hello", UIControlState.Normal);

次に、AllEvents イベントを使用して、ユーザーがボタンをクリックしたタイミングを確認します。 例:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

最後に、ビューにボタンを追加して表示します。

View.AddSubview (button);

ボタンのスタイル設定

tvOS は UIButton のプロパティをいくつか用意しており、それを使ってタイトルを指定する、または背景色や画像などのスタイルを指定することができます。

ボタン タイトル

上記の通り、UIButtons は状態を持っているという点で、ほとんどの UIKit コントロールとは異なるため、単純にタイトルを変更できません。特定の UIControlState に対して変更する必要があります。 次に例を示します。

button.SetTitle ("Hello", UIControlState.Normal);

この SetTitleColor メソッドを使用して、ボタンのタイトルの色を設定できます。 次に例を示します。

button.SetTitleColor (UIColor.White, UIControlState.Normal);

そして、SetTitleShadowColor を使用してタイトルの影を調整できます。 次に例を示します。

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

次のコードを使用して、ボタンが強調表示されている場合にタイトルの影を [浮き彫り] から [エンボス] に変更するように設定できます。

button.ReverseTitleShadowWhenHighlighted = true;

さらに、ボタンのタイトルに属性付きテキストを使用できます。 次に例を示します。

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

ボタンの画像

UIButton は画像をアタッチし、背景としてその画像を使用できます。

特定の UIControlState のボタンの背景画像を設定するには、次のコードを使用します。

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

ボタンが強調表示されている場合に画像を明るく描画するよう、AdjustsImageWhenHiglighted プロパティを true に設定します (これが既定です)。 ボタンが無効な場合に画像を暗く描画するよう、AdjustsImageWhenDisabled プロパティを true に設定します (この場合も、これが既定です)。

ボタンに表示される画像を設定するには、次のコードを使用します。

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

この TintColor プロパティを使用して、タイトルとボタンの画像両方に適用される色の濃淡を設定します。 Custom 型のボタンの場合、このプロパティは無効です。TintColor の動作を自身で実装する必要があります。

まとめ

この記事では、Xamarin.tvOS アプリ内のボタンの設計と操作について説明しました。 iOS デザイナーでボタンを操作する方法と、C# コードでボタンを作成する方法を示しました。 最後に、ボタンのタイトルを変更し、そのスタイルと外観を変更する方法を示しました。

関連リンク

• tvOS
• tvOS ヒューマン インターフェイス ガイド
• tvOS 用アプリ プログラミング ガイド