Xamarin,iPhoneアプリでチェックボックスを実装する


Xamarin で iPhone アプリにチェックボックスを実装しようと思ったのですが、なんと標準のコントロールにないではないですか!?(何周遅れか)

それで調べてみたところ、BEMCheckBox という iPhone 向けチェックボックスライブラリが有名だと分かりました。その Xamarin 版 も出ていたので BEMCheckBox でチェックボックスを実装する方法をご紹介したいと思います。

なお、気になるライセンスですが MIT ライセンスなので安心して使用できるのもいいですね。

BEMCheckBox のインストールは、NuGet から行うことができます。

“checkbox ios” で NuGet を検索すると、”SaturdayMP.XPlugins.iOS.BEMCheckBox” というパッケージが見つかるので、これをインストールします。

インストールがすんだら実装ですね。

実装はソースコードのままなので、ViewController.cs のソースコードをすべて掲載します。詳細はコメントを読んだ方が分かりやすいでしょう。

using System;
using SaturdayMP.XPlugins.iOS;
using UIKit;

namespace iphone_checkbox
{
    public partial class ViewController : UIViewController
    {
        //チェックボックスの状態
        private bool isChecked = false;

        protected ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            //チェックボックスのラベルを座標込みで作成
            var checkboxLabel = new UILabel {
                Text = "チェックボックス",
                Frame = new CoreGraphics.CGRect(10, 40, 150, 25)
            };

            //チェックボックスの座標と大きさを渡し初期化
            var checkbox = new BEMCheckBox(new CoreGraphics.CGRect(160, 40, 25, 25));

            //チェックボックスをカスタマイズ(すべてオプション)
            checkbox.BoxType = BEMBoxType.Square;
            checkbox.OnAnimationType = BEMAnimationType.OneStroke;
            checkbox.OnAnimationType = BEMAnimationType.OneStroke;
            checkbox.OnTintColor = UIColor.Black;
            checkbox.OnCheckColor = UIColor.Black;
            checkbox.TintColor = UIColor.Black;
            checkbox.BackgroundColor = UIColor.White;
            checkbox.AnimationDuration = 0;//アニメーション無効
            

            //チェックボックスのイベントを定義
            checkbox.AnimationDidStopForCheckBox += CheckBoxClickedEvent;

            //ビューにチェックボックスとラベルを追加
            View.AddSubview(checkboxLabel);
            View.AddSubview(checkbox);
        }

        //チェックボックスのイベントを定義
        private void CheckBoxClickedEvent(object sender, EventArgs eventArgs)
        {
            var checkbox = sender as BEMCheckBox;
            if (checkbox == null)
                return;

            //チェックボックスの状態を格納
            if (checkbox.On == true)
            {
                isChecked = true;
            } else {
                isChecked = false;
            }
        }


        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
        }
    }
}

このコードをデバッグ実行すると、以下のように表示されます。

f:id:fnyablog:20180907225312p:plain

そしてチェックを入れると以下のようになります。

f:id:fnyablog:20180907225359p:plain

うまくいきましたね!

この BEMCheckBox というライブラリはかなりカスタマイズが可能なので、状況に合わせていろいろ試してみるとよいかと思います。