次の方法で共有

Xamarin での tvOS セグメント付きコントロールの使用

  • [アーティクル]

セグメント付きコントロールは、アイコンまたはテキストを含めることができる線形要素のセットを提供し、関連する一連の選択肢をユーザーに提供するために使用されます。

サンプル セグメント コントロール

Apple には、セグメント付きコントロールを使用するために次のように提案しています。

  • 十分なスペースを確保する - 他のフォーカス可能な項目とセグメント付きコントロールの間に十分なスペースを確保するように注意する必要があります。 個々のセグメントが選択されるのは、(クリックされたときではなく) フォーカスされているときのため、ユーザーが実際に現在のセグメントで別のフォーカス可能な項目を選択する場合に、誤ってセグメントを変更してしまう可能性があります。
  • コンテンツのフィルター処理に分割ビューを使用する - 分割ビューはコンテンツとフィルターの間を簡単に移動できるように設計されているため、セグメント付きコントロールはコンテンツのフィルター処理には適していません。
  • 最大 7 セグメントに制限 - ソファーに座ったままでも部屋全体を解析しやすくなり、移動も容易になるため、セグメントの最大数を 8 未満にしてください。
  • 一貫性のあるセグメントのコンテンツ サイズを使用する - すべてのセグメントは同じ幅であるため、可能であれば、各セグメントのコンテンツを同じサイズになるようにしてください。 これにより、セグメント コントロールが見やすくなるだけでなく、一目で読みやすくなります。
  • アイコンとテキストの混在を避ける - 個々のセグメントにはアイコンまたはテキストのどちらかを含めることができますが、両方を含めることはできません。 同じセグメント付きコントロールにアイコンとテキストの両方を混在させることが可能ですが、これは避ける必要があります。

セグメント アイコンについて

Apple は、検索用の虫眼鏡など、シンプルで認識しやすい画像をセグメント アイコンに使用することを提案しています。 複雑すぎるアイコンは、部屋の反対側にあるテレビ画面では認識しにくいので、アイコンをシンプルな表現に限定することをお勧めします。

1 つのセグメントにテキストとアイコンの両方を混在させることはできません。また、1 つのセグメント付きコントロールにアイコンとテキストを混在させないようにする必要があります。 すべてアイコンが、すべてテキストにする必要があります。

セグメント テキスト

Apple では、セグメント テキストを使用するために次のように提案しています。

  • 短く、意味のある名詞を使用する - セグメント タイトルは、指定されたセグメントを選択するときにユーザーが期待するコンテンツの種類を明確に示す必要があります。 たとえば、音楽やビデオなどです。
  • タイトルに大文字と小文字を使用する - 冠詞、接続詞、4 文字未満の前置詞を除き、セグメント タイトルの単語はすべて大文字にする必要があります。
  • 短く、焦点を絞ったタイトルを使用する - タイトルは短く、セグメントを選択したときに期待されるコンテンツの種類に焦点を当たるようにします。

繰り返しとなりますが、1 つのセグメント上にテキストとアイコンの両方を混在させることはできません。また、1 つのセグメント付きコントロールの中にアイコンとテキストを混在させることは避ける必要があります。

セグメント コントロールとストーリーボード

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

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

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

    セグメント コントロール

  3. プロパティ パッドの [ウィジェット] タブでは、スタイルや状態など、一部のセグメント コントロールのプロパティを調整できます。

    ウィジェット タブ

  4. [セグメント] フィールドを使用して、コントローラー内のセグメントの数を制御します。

  5. [セグメント] ドロップダウンから指定したセグメントを選択して、タイトルやイメージなどの個々のプロパティを調整したり、コントロールが表示されたときに指定したセグメントが有効または選択されているかどうかを制御します。

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

    名前の割り当て

  7. 変更を保存。

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

セグメント付きコントロールの使用

前述のように、セグメント付きコントロールは、アイコンまたはテキストを含めることができる線形要素のセットを提供し、関連する一連の選択肢をユーザーに提供するために使用されます。

Xamarin.tvOS アプリでセグメント付きコントロールを使用する方法はいくつかあります。

名前とイベントとして公開

インターフェイス デザイナーでセグメント コントロールを作成し、名前付きコントロールとイベントとして公開した場合は、次のコードを使用してセグメントの変更に応答できます。

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take action based on the number of players selected
    switch(PlayerCount.SelectedSegment) {
    case 0:
        // Do something if the segment is selected
        ...
        break;
    case 1:
        // Do something if the segment is selected
        ...
        break;
    case 2:
        // Do something if the segment is selected
        ...
        break;
    }
}

上記の例の場合、セグメント コントロールは PlayerCount 名と PlayerCountChanged イベント アクションとして公開されています。 アクションとアウトレットの操作の詳細については、「はじめての tvOS クイック スタート ガイド」の「アウトレットとアクションを使用したコードの記述」セクションを参照してください。

この SelectedSegment プロパティは、現在選択されているセグメントをゼロ (0) ベースのインデックスとして取得または設定します。 したがって、5 つのセグメントがある場合、最初のセグメントのインデックスはゼロ (0) になり、最後のセグメントは 4 になります。

セグメントの変更

セグメント付きコントロールの数と内容は、両方ともいつでも変更できます。 新しいアイコン セグメントを挿入するには、次のコードを使用します。

// Icon Segment
SegmentedControl.InsertSegment(UIImage.FromFile("icon.png"), 0, true);

// Text Segment
SegmentedControl.InsertSegment("New Segment", 0, true);

2 番目のパラメーターは、セグメントを挿入する場所をゼロ (0) ベースのインデックスを使用して定義します。 最後のパラメーターが true の場合、セグメントの挿入はアニメーション化されます。

指定したセグメントを削除するには、次のコマンドを使用します。

SegmentedControl.RemoveSegmentAtIndex(0, true);

また、すべてのセグメントを削除するには、次のようにします。

SegmentedControl.RemoveAllSegments();

この場合も、最後のパラメーターが true の場合、セグメントの削除がアニメーション化されます。 現在のセグメント数を取得するには、この NumberOfSegments プロパティを使用します。

指定したセグメントのタイトルまたはアイコンを取得するには、次のコマンドを使用します。

// Get title
var title = SegmentedControl.TitleAt(0);

// Get icon
var icon = SegmentedControl.ImageAt(0);

また、タイトルまたは アイコンを変更するには、次のコマンドを使用します。

// Set title
SegmentedControl.SetTitle("New Title", 0);

// Set icon
SegmentedControl.SetImage(UIImage.FromFile("icon.png"), 0);

指定したセグメントが有効かどうかを確認するには、次のコマンドを使用します。

if (SegmentedControl.IsEnabled(0)) {
    // Do something
    ...
}

また、指定したセグメントを 有効または無効にするには、次のコマンドを使用します。

SegmentedControl.SetEnabled(false, 0);

セグメント付きコントロールの外観の変更

指定したセグメントの背景をイメージに変更するには、次のコードを使用します。

SegmentedControl.SetBackgroundImage (UIImage.FromFile("background.png"), UIControlState.Normal, UIBarMetrics.Default);

ここで UIControlState は、イメージを設定するコントロールの状態を次のように指定します。

  • 正常
  • 強調表示
  • 無効
  • 選択済み
  • フォーカスがある

そして UIBarMetrics は、使用するメトリックを次のように指定します。

  • 既定値
  • コンパクト
  • DefaultPrompt
  • CompactPrompt

さらに、次を使用してセグメント間の分割線を設定することもできます。

SegmentedControl.SetDividerImage (UIImage.FromFile("divider.png"), UIControlState.Normal, UIControlState.Normal, UIBarMetrics.Default);

ここで、最初の UIControlState は分割線の左側にあるセグメントの状態を指定し、2番目の UIControlState は右側にあるセグメントの状態を指定します。

まとめ

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