Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#33 TableViewの使い方を解説

TableViewとは?

TableViewとはコントロールを行のような感じにして並べていけるものです。テキストやタイトルと詳細が一つになったレイアウトや,ラベルとEntryが一つになったもの,ラベルとスイッチが一つになったものなどを行として並べていくことができます。スイッチ付きのコントロールはスマホの設定画面とかでよく見かけるのではないかと思います。このスイッチのコントロールをならべて,マスターページに表示しておくと使いやすいページになるのではないかと思います。

準備

今回はTalbeViewPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,TalbeViewPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにTalbeViewPageの実装をして問題ありません。

TalbeViewPageの追加

Pagesフォルダーに新規追加でTalbeViewPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルとStackLayoutの部分を削除して,次のように記述します。

TableView.Root

TableView.Root,TableRoot,TableSectionの順で記述します。TableSectionにはTitleを設定でき,設定すると,ページの一番上に表示されます。TableSectionにはコントロールを行単位で順番に配置していきます。

TextCell

TextCellはタイトルと詳細の文字列を表示できるレイアウトになっています。IDと名称などの組み合わせの場合はこれを使うといいでしょう。2つのペアでなくても,タイトルだけの設定でも使用できます。

EntryCell

EntryCellはラベルとEntryがセットになっています。EntryにはPlaceholderを指定できるので,薄いグレーでガイドの文言を表示することもできます。ここでは「メモ」と設定しています。Entryと同様にKeyboardを指定できるので数値か文字などのキーボードを指定します。Entryの入力完了時のイベントを取得する場合はEntryCell_Completedを実装します。

SwitchCell

ラベルとスイッチが一つになっているコントロールです。見栄え的には一番利用価値があると思います。このコントロールを複数ならべて設定画面にするとスマホらしいレイアウトになります。Textにラベルの文言を設定し,チェック状態を「On」にboolで設定します。チェック状態の変更通知を受けるにはOnChangedイベントを実装します。

コードビハインド側の実装

コードビハインド側には特に何も実装していませんが,EntryとSwitchのイベントが通知されているかを,ブレークポイントを設置することで確認できます。

実行

実行するとこのようなレイアウトが表示されます。AAAはTableSectionのタイトル,「てきすと」はTextCellにテキストのみを設定した例です。「名前」と「詳細な文字」の組み合わせはTextCellにタイトルと詳細を設定した例。BBBはEntryCell,Wi-FiはSwitchCellです。

Xamarin.Formsでスマホアプリ開発

C#を正しい3層構造で造れてますか?

非売品コースを受け取る