SettingsView for Xamarin.Forms

SettingViewはXamarin.Formsで使用できる設定に特化した柔軟なTableViewです。
AndroidとiOSに対応しています。

SettingsViewでできること（標準のTableViewとの違い）

全般

Separatorの色の設定
選択された時の色の指定
リストの先頭・最後へのスクロール

セクション

セクションごとの表示・非表示の設定
セクションのフッターの設定
ヘッダーとフッターの様々な設定
セクション内にDataTemplateおよびDataTemplateSelectorを適用
セクション内でドラッグドラッグによる並べ替え

Cells

すべてのセルの外観などをSettingsViewで一括で指定
個別のセルの設定（個別の設定は全体の設定より優先されます）
Cell右上にヒントテキストの設定
全てのセルでのアイコン設定、それらすべてにメモリキャッシュを適用
アイコンの角丸設定
様々な定義済みCellの使用
Xamarin.FormsのViewCell、それ以外の定義済みCellの使用

デモ動画

https://youtu.be/FTMOqNILxBE

最小デバイス・バージョン等

iOS:iPhone5s,iPod touch6,iOS9.3
Android:version 5.1.1 (only FormsAppcompatActivity) / API22

Nugetでのインストール

https://www.nuget.org/packages/AiForms.SettingsView/

Install-Package AiForms.SettingsView

PCLプロジェクトと各プラットフォームにインストールが必要です。

iOSの場合

iOSで使用する場合はAppDelegate.csに以下のようなコードを書く必要があります。

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Renderers.iOS.SettingsViewInit.Init(); //ここに書く

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}

Xamlでの使用方法

<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
	x:Class="Sample.Views.SettingsViewPage">
    
<sv:SettingsView HasUnevenRows="true">
    
    <sv:Section Title="Header1" FooterText="Footer1">
        <sv:CommandCell IconSource="icon.png" IconSize="60,60" IconRadius="30"
            Title="Xam Xamarin" Description="hoge@fuga.com"
            Command="{Binding ToProfileCommand}" CommandParameter="{Binding Parameter}"
            KeepSelectedUntilBack="true"            
        />
        <sv:ButtonCell Title="Toggle Section" TitleColor="{StaticResource TitleTextColor}"
             TitleAlignment="Center" Command="{Binding SectionToggleCommand}" />
        <sv:LabelCell Title="Label" ValueText="value" />
        <sv:SwitchCell Title="Switch" On="true" 
            Description="This is description." />
        <sv:CheckboxCell Title="Checkbox" Checked="true" />
    </sv:Section>

    <sv:Section Title="Header2" FooterText="Footer2" IsVisible="{Binding SctionIsVisible}">
        <sv:PickerCell Title="Favorites" ItemsSource="{Binding ItemsSource}" DisplayMember="Name" MaxSelectedNumber="3" 
        SelectedItems="{Binding SelectedItems}" KeepSelectedUntilBack="true" PageTitle="select 3 items" />
        <sv:NumberPickerCell Title="NumberPicker" Min="0" Max="99" Number="15" PickerTitle="Select number" />
        <sv:TimePickerCell Title="TimePicker" Format="HH:mm" Time="15:30" PickerTitle="Select time" />
        <sv:DatePickerCell Title="DatePicker" Format="yyyy/MM/dd (ddd)" Date="2017/11/11" MinimumDate="2015/1/1" MaximumDate="2018/12/15" TodayText="Today's date"/>
        <sv:EntryCell Title="EntryCell" ValueText="{Binding InputText.Value}" Placeholder="Input text" Keyboard="Email" TextAlignment="End" HintText="{Binding InputError.Value}" />
    </sv:Section>
    
</sv:SettingsView>
</ContentPage>

SettingsViewのプロパティ設定はApp.xamlに記述した方が良いかもしれません。

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
             x:Class="Sample.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="AccentColor">#FFBF00</Color>
            <Color x:Key="DisabledColor">#E6DAB9</Color>
            <Color x:Key="TitleTextColor">#CC9900</Color>
            <Color x:Key="PaleBackColorPrimary">#F2EFE6</Color>
            <Color x:Key="PaleBackColorSecondary">#F2EDDA</Color>
            <Color x:Key="DeepTextColor">#555555</Color>
            <Color x:Key="NormalTextColor">#666666</Color>
            <Color x:Key="PaleTextColor">#999999</Color>
            <x:Double x:Key="BaseFontSize">12</x:Double>
            <x:Double x:Key="BaseFontSize+">14</x:Double>
            <x:Double x:Key="BaseFontSize++">17</x:Double>
            <x:Double x:Key="BaseFontSize-">11</x:Double>

            <Style TargetType="sv:SettingsView">
                <Setter Property="SeparatorColor" Value="{StaticResource DisabledColor}" />
                <Setter Property="BackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="HeaderBackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="CellBackgroundColor" Value="{StaticResource AppBackground}" />
                <Setter Property="CellTitleColor" Value="{StaticResource DeepTextColor}" />
                <Setter Property="CellValueTextColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellTitleFontSize" Value="{StaticResource BaseFontSize++}" />
                <Setter Property="CellValueTextFontSize" Value="{StaticResource BaseFontSize}" />
                <Setter Property="CellDescriptionColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellDescriptionFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="CellAccentColor" Value="{StaticResource AccentColor}" />
                <Setter Property="SelectedColor" Value="#50FFBF00" />
                <Setter Property="HeaderTextColor" Value="{StaticResource TitleTextColor}" />
                <Setter Property="FooterFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="FooterTextColor" Value="{StaticResource PaleTextColor}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

こんな感じに書くことでアプリ内の全てのSettingsViewを同じ設定にすることができます。

SettingsViewのプロパティ

BackgroundColor
- View全体と領域外の背景色。ヘッダーやフッターの背景色も含みます。（Androidの場合はCellの背景色も）
SeparatorColor
- セパレータの線の色
SelectedColor
- 行（セル）を選択した時の背景色（AndroidはRipple色も含む）
HeaderPadding
HeaderTextColor
HeaderFontSize
HeaderTextVerticalAlign
HeaderBackgroundColor
HeaderHeight
- ヘッダーに関する設定
FooterTextColor
FooterFontSize
FooterBackgroundColor
FooterPadding
- フッターに関する設定
RowHeight
- HasUnevenRowがfalseの時は、全行の高さ
- それ以外は最小の行の高さ
HasUnevenRows
- 行の高さを固定にするかどうか。デフォルトはfalse。true推奨。
CellTitleColor
CellTitleFontSize
CellValueTextColor
CellValueTextFontSize
CellDescriptionColor
CellDescriptionFontSize
CellBackgroundColor
CellIconSize
CellIconRadius
CellAccentColor
CellHintTextColor
CellHintFontSize
- 一括セル設定。どこがどのパーツかは後述のLayoutを参照。
UseDescriptionAsValue (Androidのみ有効)
- Description項目をValue項目として使用するかどうか。
- （一般的なAndroidアプリにありがちな設定値を下に書くレイアウトにするかどうか）
- デフォルトはfalse（DescriptionとValueは個別に使う）
ShowSectionTopBottomBorder (Androidのみ有効)
- 行の境界線をセクションの上と下にも表示するかどうか
- （一般的なAndroidアプリでありがちな上と下は表示しないようにしないかどうか）
- デフォルトはtrue（表示する）
ScrollToTop
ScrollToBottom
- このプロパティにtrueをセットすると先頭または末尾までスクロールします。
- スクロール完了後は自動でfalseがセットされます。

SettingsViewのメソッド

ClearCache (static)
- 全ての画像メモリキャッシュをクリアする

Section プロパティ

Title
- セクションのヘッダー文字列。Xamarin.FormsのTableSectionと同じです。
FooterText
- セクションのフッター文字列。
IsVisible
- セクションを表示するかどうか。
HeaderHeight
- セクションのヘッダーの個別の高さを指定します。
- SettingsViewのHeaderHeightよりも優先されます。
ItemsSource
- DataTemplateのソースを指定します。
ItemTemplate
- DataTemplateを指定します。
UseDragSort
- セクション内のセルをDragDropで並べ替え可能にします。
- iOS11以降とそれ以外で外観が異なります。
- iOS10以下は三本線のアイコンを掴むと移動でき、iOS11はセル全体を長押しすると移動できるようになります。

Cells

CellBase
LabelCell
CommandCell
ButtonCell
SwitchCell
CheckboxCell
NumberPickerCell
TimePickerCell
DatePickerCell
TextPickerCell
PickerCell
EntryCell

CellBase

基本セルのレイアウト

Icon
- アイコンを使わない場合はこの領域は非表示になります。
Description
- Descriptionを使わない場合はこの領域は非表示になります。
Accessory
- CheckboxCellやSwitchCellで使用されます。それ以外は非表示です。

プロパティ (全セル共通)

Title
- Title部分の文字列
TitleColor
- Title部分の文字色
TitleFontSize
- Title部分のフォントサイズ
Description
- Description部分の文字列
DescriptionColor
- Description部分の文字色
DescriptionFontSize
- Description部分のフォントサイズ
HintText
- Hint部分の文字列（何らかの情報やバリデーションのエラーなど、右上に表示）
HintTextColor
- Hint部分の文字色
HintFontSize
- Hint部分のフォントサイズ
BackgroundColor
- セルの背景色
IconSource
- アイコンのImageSource
IconSize
- アイコンサイズ（幅,高さ指定）
IconRadius
- アイコンの角丸半径。
IsEnabled
- セルを有効にするかどうか。無効にした場合はセル全体の色が薄くなり操作を受け付けなくなります。

SVGイメージを使用するには

SvgImageSourceのnugetパッケージをインストールすればSVG画像を使用できるようになります。

https://github.com/muak/SvgImageSource
https://www.nuget.org/packages/Xamarin.Forms.Svg/

Install-Package Xamain.Forms.Svg -pre

LabelCell

テキスト表示専用のセルです。

Properties

ValueText
- 何らかの値を示す文字列（何に使っても問題ありません）
ValueTextColor
- ValueText部分の文字色
ValueTextFontSize
- ValueText部分のフォントサイズ
IgnoreUseDescriptionAsValue
- UseDescriptionAsValueの値がtrueだった場合、その設定を無視するかどうか。
- 例えば全体としてはValueは下に置きたいが、あるセルだけは通常のレイアウトで使用したい時などに使います。

CommandCell

タップした時のコマンドを指定できるLabelCellです。例えばページ遷移の時などに使用します。

Properties

Command
CommandParameter
KeepSelectedUntilBack
- タップして次のページに遷移した時、遷移先ページから戻ってくるまで選択状態をそのままにしておくかの設定
- trueの場合は選択状態をキープして、falseの場合は選択はすぐに解除されます。

他はLabelCellと同じです。

ButtonCell

ボタンのようにタップするとコマンドを実行するだけのシンプルなセルです。 CommandCellとの違いは以下のとおりです。

右端にインジケーターが表示されない(iOS)
ValueやDescriptioが使用不可
ButtonCellは文字の水平位置を指定可能

Properties

TitleAlignment
- ボタンタイトルの水平位置属性
Command
CommandParameter

SwitchCell

Switchを備えたLabelCellです。

Properties

On
- Switchのオンオフ。OnがtrueでOffがfalse。
AccentColor
- Switchのアクセントカラー。背景色やつまみ部分の色などプラットフォームによって異なる。

CheckboxCell

Checkboxを備えたLabelCellです。

Properties

Checked
- Checkのオンオフ。OnがtrueでOffがfalse。
AccentColor
- Checkboxのアクセントカラー。（枠や背景色）

NumberPickerCell

セルタップ時にNumberPickerを呼び出すことができるLabelCellです。

Properties

Number
- 現在の数値（default two way binding)
Min
- 最小値
Max
- 最大値
PickerTitle
- Pikerのタイトル文字列
SelectedCommand
- 数値を選択した時に発火させるCommand。

ValueTextは使用できません。

TimePickerCell

セルタップ時にTimePickerを呼び出すことができるLabelCellです。

Properties

Time
- 現在選択中の時刻 (default two way binding)
Format
- 時刻の書式 ("hh時mm分"など)
PickerTitle
- Pikerのタイトル文字列

ValueTextは使用できません。

DatePickerCell

セルタップ時にDatePickerを呼び出すことができるLabelCellです。

Properties

Date
- 現在選択中の日付 (default two way binding)
MinimumDate
MaximumDate
Format
- 日付の書式 ("yyyy年MM月dd日 ddd曜日"など)
TodayText
- 今日の日付を選択するためのボタンのタイトル文字列（iOSのみ）
- 空の場合はボタン自体が非表示になります。

ValueTextは使用できません。

TextPickerCell

セルタップ時にテキストを選択できるピッカーを呼び出すことができるLabelCellです。 NumberPickerCellをNumber以外に対応させたもので、データソースにListを設定できます。

Properties

Items
- IListを実装したデータソース。
- このプロパティには組み込みの型のList<T>等が設定できます。（List<string>, List<int>,List<double> など）
- ピッカーの表示テキストにはToString()の結果が使用されます。
SelectedItem
- 選択したアイテム。 (two-way binding)
SelectedCommand
- アイテム選択時に発火するコマンド。

ValueTextは使用できません。

PickerCell

セルタップ時に複数選択可能なピッカーを呼び出すことができるLabelCellです。 iOSではタップ時にページ遷移し遷移先ページでピッカーが表示されます。 Androidではタップ時にダイアログでピッカーが表示されます。

Properties

PageTitle
- ピッカーのタイトル文字列
ItemsSource
- IEnumerableを実装したPickerのDataSource（ListやObservableCollectionなど）
- nullを指定することはできません。
DisplayMember
- Pickerに選択肢として表示させるメンバー名（プロパティ名）。省略時はToStringの値が使用されます。
SubDisplayMember
- Pickerに表示させる二番目のメンバー名（プロパティ名）。指定するとセルは2行表示となり、1行目にDisplayMemberが、2行目にSubDisplayMemberが表示されるようになります。
SelectedItems
- 選択したItemを保存するためのIList。ItemsSourceと同じ型のものを指定。
- 選択済み要素をあらかじめ設定する場合は、ItemsSourceの要素と同一インスタンスの要素にする必要があります。
- 指定する場合は必ずnullではなくインスタンス設定済みのものを指定する。
SelectedItemsOrderKey
- 選択済みItemを文字列として表示する時のソートのキーとなるメンバー（プロパティ）名
SelectedCommand
- 選択が完了した時に発火するコマンド
- iOSの場合はピッカーページから戻る時、Androidの場合はダイアログのOKをタップした時に発火します。
MaxSelectedNumber
- 選択可能な最大数。
- 0指定で無制限、1指定で単一選択モード（ラジオボタン的なやつ）、2以上は制限付きの複数選択となります。
KeepSelectedUntilBack
- タップして次のページに遷移した時またはダイアログ表示時、戻ってくるまで選択状態をそのままにしておくかの設定
- trueの場合は選択状態をキープして、falseの場合は選択はすぐに解除されます。
AccentColor
- Pickerのチェックマークの色
UseNaturalSort
- 並べ替え方法にNaturalSortを使うかどうか。デフォルト false。
- trueの場合、例えば通常 1,10,2,3,4 と並ぶところが 1,2,3,4,10 という並びになります。
- 日本語以外の言語で使用する場合、誤動作する可能性があります。
UsePickToClose
- 選択がMaxSelectedNumberに達したら自動的にPickerを閉じるかどうかを指定します。
UseAutoValueText
- 通常は選択アイテムが自動でValueTextに表示されますが、このプロパティにfalseを指定すると自動表示が解除され、ValueTextを普通に使うことができるようになります。

EntryCell

文字入力用のCellです。 Xamarin.Forms.EntryCellとは別物です。

Properties

ValueText
- 入力文字列 (default two way binding)
ValueTextColor
- 入力文字色
ValueTextFontSize
- 入力文字列のフォントサイズ
MaxLength
- 最大文字列長
Keyboard
- キーボードの種類
Placeholder
- Placeholderの文字列
TextAlignment
- 入力文字列の水平位置属性
AccentColor
- 入力欄の下線の色（Androidのみ）

Contributors

codegrue

謝辞

NaturalSortの実装に以下のソースを利用させていただきました。ありがとうございました。

NaturalComparer
- https://qiita.com/tomochan154/items/1a3048f2cd9755233b4f
- https://github.com/tomochan154/toy-box/blob/master/NaturalComparer.cs

License

MIT Licensed.

Files

README-ja.md

Latest commit

History

README-ja.md

File metadata and controls

SettingsView for Xamarin.Forms

SettingsViewでできること（標準のTableViewとの違い）

全般

セクション

Cells

デモ動画

最小デバイス・バージョン等

Nugetでのインストール

iOSの場合

Xamlでの使用方法

SettingsViewのプロパティ

SettingsViewのメソッド

Section プロパティ

Cells

CellBase

基本セルのレイアウト

プロパティ (全セル共通)

SVGイメージを使用するには

LabelCell

Properties

CommandCell

Properties

ButtonCell

Properties

SwitchCell

Properties

CheckboxCell

Properties

NumberPickerCell

Properties

TimePickerCell

Properties

DatePickerCell

Properties

TextPickerCell

Properties

PickerCell

Properties

EntryCell

Properties

Contributors

謝辞

License