ぴよぴよエンジニアの日記

クラウドベンダーに勤める見習いSEの日記です。発言は私自身の見解であり、必ずしも所属組織の立場、戦略、意見を代表するものではありません。

Xamarin.Forms でも UISegmentedControl を使いたい!

複数の項目を選択するとき iOS では UISegmentedControl をよく使うと思います.

f:id:Santea:20170301164511p:plain

UISegmentedControl - UIKit | Apple Developer Documentation


しかしながら、Xamarin.Forms には UISegmentedControl に対応するコントロールは用意されていません.

Embedding Native Controls into Xamarin.Forms | Xamarin Blog

Embedding Native を使えばネイティブコントロールを配置できますが、Android をどうするか.


github.com

Android を自前のカスタムコントロールで実装しようか迷っていたとき、ちょうど良さげなコントロールを見つけました.

iOS(iOS 8.1+)/Android(API 18+) に対応しています.

NuGet Gallery | Segmented Control for Xamarin Forms 1.2.4

NuGet から使えます.

<abstractions:SegmentedControl TintColor="Red"
                               SelectedSegment="{Binding SelectedSegment.Value, Mode=TwoWay}">
    <abstractions:SegmentedControl.Children>
        <abstractions:SegmentedControlOption Text="かばん" />
        <abstractions:SegmentedControlOption Text="サーバル" />
    </abstractions:SegmentedControl.Children>
</abstractions:SegmentedControl>

こんな感じに XAML で書けます.
子要素も XAML で書けるのがいいですね.

f:id:Santea:20170301164756p:plain

TintColor="Red" にするとこのように赤い SegmentedControl も作れます.
ただ、この TintColor ですが Android ではバグがあります...

SegmentedControl/SegmentedControlImplementation.cs at master · alexrainman/SegmentedControl · GitHub

IsEnabled の変更通知をしなければ TintColor は変更されないようになっています.
IsEnabled = false → IsEnabled = true みたいに変更してあげれば iOS と同じように赤い SegmentControl を作れます.

いちいち IsEnabled を変更するのもめんどくさいのでそのままの色で使うか、Fork して使うなりしたほうがいいかもしれません.




以上です.