TableViewとは?
TableViewとはコントロールを行のような感じにして並べていけるものです。テキストやタイトルと詳細が一つになったレイアウトや,ラベルとEntryが一つになったもの,ラベルとスイッチが一つになったものなどを行として並べていくことができます。スイッチ付きのコントロールはスマホの設定画面とかでよく見かけるのではないかと思います。このスイッチのコントロールをならべて,マスターページに表示しておくと使いやすいページになるのではないかと思います。
準備
今回はTalbeViewPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,TalbeViewPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにTalbeViewPageの実装をして問題ありません。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XSample.Objects; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class ControlsPage : ContentPage { public ControlsPage() { InitializeComponent(); var items = new List<MenuDto>(); items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png")); items.Add(new MenuDto("TalbeViewPage", "TalbeViewの使い方", "mail.png")); MyListView.ItemsSource = items; } private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e) { var item = e.Item as MenuDto; if (item.Title == "SwitchPage") { Navigation.PushAsync(new SwitchPage()); } else if (item.Title == "TalbeViewPage") { Navigation.PushAsync(new TalbeViewPage()); } } } }
TalbeViewPageの追加
Pagesフォルダーに新規追加でTalbeViewPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルとStackLayoutの部分を削除して,次のように記述します。
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XSample.Pages.TalbeViewPage"> <ContentPage.Content> <TableView> <TableView.Root> <TableRoot> <TableSection Title="AAA"> <TextCell Text="てきすと"/> <TextCell Text="名前" Detail="詳細な文字"/> <EntryCell Label="BBB" Placeholder="メモ" Keyboard="Text" Completed="EntryCell_Completed"/> <SwitchCell Text="Wi-Fi" On="True" OnChanged="SwitchCell_OnChanged"/> </TableSection> </TableRoot> </TableView.Root> </TableView> </ContentPage.Content> </ContentPage>
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イベントを実装します。
コードビハインド側の実装
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class TalbeViewPage : ContentPage { public TalbeViewPage () { InitializeComponent (); } private void EntryCell_Completed(object sender, EventArgs e) { } private void SwitchCell_OnChanged(object sender, ToggledEventArgs e) { } } }
コードビハインド側には特に何も実装していませんが,EntryとSwitchのイベントが通知されているかを,ブレークポイントを設置することで確認できます。
実行
実行するとこのようなレイアウトが表示されます。AAAはTableSectionのタイトル,「てきすと」はTextCellにテキストのみを設定した例です。「名前」と「詳細な文字」の組み合わせはTextCellにタイトルと詳細を設定した例。BBBはEntryCell,Wi-FiはSwitchCellです。
- C#Xamarin.Formsでスマホ開発#01プロジェクト作成の方法
- C#Xamarin.Formsでスマホ開発#02プロジェクトの実行【Android実機編】
- C#Xamarin.Formsでスマホ開発#03エミュレーターでのAndroid接続
- C#Xamarin.Formsでスマホ開発#04 UWPの実行
- C#Xamarin.Formsでスマホ開発#05マルチスタートアッププロジェクトの設定
- C#Xamarin.Formsでスマホ開発#06 StackLayoutの使い方を解説
- C#Xamarin.Formsでスマホ開発#07 VerticalOptionsとHorizontalOptionsの使い方
- C#Xamarin.Formsでスマホ開発#08文字色&背景色とFontsizeの使い方
- C#Xamarin.Formsでスマホ開発#09 Gridの使い方
- C#Xamarin.Formsでスマホ開発#10画面遷移のやり方
- C#Xamarin.Formsでスマホ開発#11 TabbedPageの作り方
- C#Xamarin.Formsでスマホ開発#12 TabbedPageの中身の作り方
- C#Xamarin.Formsでスマホ開発#13 MasterDetailPageの作り方
- C#Xamarin.Formsでスマホ開発#14 ListViewの作り方
- C#Xamarin.Formsでスマホ開発#15 CarouselPageの作り方
- C#Xamarin.Formsでスマホ開発#16 DisplayAlertの使い方
- C#Xamarin.Formsでスマホ開発#17 DisplayActionSheetの使い方
- C#Xamarin.Formsでスマホ開発#18 Deviceごとの処理切り替え方法
- C#Xamarin.Formsでスマホ開発#19 LoadとCloseに代わるもの
- C#Xamarin.Formsでスマホ開発#20 戻るボタンを非表示にする
- C#Xamarin.Formsでスマホ開発#21 ViewCellの共通化のやり方
- C#Xamarin.Formsでスマホ開発##22 Switchの使い方を解説
- C#Xamarin.Formsでスマホ開発#23 コントロールをデータバインドする方法
- C#Xamarin.Formsでスマホ開発#24 Sliderの使い方を解説
- C#Xamarin.Formsでスマホ開発#25 Stepperの使い方を解説
- C#Xamarin.Formsでスマホ開発#26 Entryの使い方を解説
- C#Xamarin.Formsでスマホ開発#27 Editorの使い方を解説
- C#Xamarin.Formsでスマホ開発#28 Pickerの使い方を解説
- C#Xamarin.Formsでスマホ開発#29 Pickerでデータバインディングする方法
- C#Xamarin.Formsでスマホ開発#30 DatePickerとTimePickerの使い方
- C#Xamarin.Formsでスマホ開発#31 SearchBarの使い方を解説
- C#Xamarin.Formsでスマホ開発#32 ToolbarItemの使い方を解説
- C#Xamarin.Formsでスマホ開発#33 TableViewの使い方を解説
- C#Xamarin.Formsでスマホ開発#34 ActivityIndicatorの使い方を解説
- C#Xamarin.Formsでスマホ開発#35 ListViewを下に引っ張て更新する方法