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

TableViewとは？
準備
TalbeViewPageの追加
コードビハインド側の実装
実行

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());
            }
        }
    }
}

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>

<?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.Root>

<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と名称などの組み合わせの場合はこれを使うといいでしょう。２つのペアでなくても，タイトルだけの設定でも使用できます。

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)
        {

        }
    }
}

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です。

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

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

非売品コースを受け取る