Xamarin.iOS ピッカービュー - SIN@SAPPOROWORKSの覚書

1 単一カラムの選択

f:id:furuya02:20140618045602p:plain:w150:left

複数の値から１個を選択させるUIとしてPickerViewが利用できます。
PickerViewでは、プロパティModelにUIPickerViewModel型のインスタンスを設定し、表示の制御やイベント処理を行います。

※UIPickerViewは、Objective-Cのサンプルでは、UIPickerViewDataSource及びUIPickerViewDelegateで設定されていますが、Xamarinでは、UIPickerViewModelが推奨されているようです。

public override void ViewDidLoad() {
    base.ViewDidLoad();
    
    var pickerView = new UIPickerView(new RectangleF(0, 0, 200, 200)){
        //画面中央に配置
        Center = new PointF(View.Bounds.Width/2, View.Bounds.Height/2),
        //背景色
        BackgroundColor = UIColor.Gray,
        //Modelの設定
        Model = new MyModel()
    };
    //ビューに追加
    Add(pickerView);
}

設定したUIPickerViewModel型のクラスは次のとおりです。
いくつかのメソッドのオーバーライドが必須になります。

class MyModel : UIPickerViewModel {
    readonly List<string> _ar = new List<string> { "aaa", "bbb", "ccc" ,"ddd","eee","fff"};
    //カラム数（必須）
    public override int GetComponentCount(UIPickerView picker) {
        return 1;
    }
    //行数（必須）
    public override int GetRowsInComponent(UIPickerView picker, int component) {
        return _ar.Count;
    }
    //文字列取得（必須）
    public override string GetTitle(UIPickerView picker, int row, int component) {
        return _ar[row];
    }
    //高さの指定
    public override float GetRowHeight(UIPickerView picker, int component) {
        return 20f;
    }
    //幅の指定
    public override float GetComponentWidth(UIPickerView picker, int component){
        return 60f;
    }
    //選択が変化した際のイベント
    public override void Selected(UIPickerView picker, int row, int component){
        ;
    }
}

2 複数カラムの選択

f:id:furuya02:20140618045603p:plain:w150:left

カラムの数やサイズなどの設定は、すべてModelで行います。
また、フォントを変更したり、画像を追加したい場合は、GetView()をオーバーライドすることになります。

class MyModel : UIPickerViewModel {

    private readonly List<IList> _ar = new List<IList>();
    public MyModel() {
        //１カラム目
        _ar.Add(new List<string>() { "AAAAA", "BBBBB" });
        //２カラム目
        _ar.Add(new List<string>() { "aaa", "bbb", "ccc", "ddd", "eee", "fff" });
        //3カラム目
　       _ar.Add(new List<string>() { "1", "2", "3", "4" });
    }

    //カラム数（必須）
    public override int GetComponentCount(UIPickerView picker) {
        return _ar.Count; //３カラムを返す
    }
    //行数（必須）
    public override int GetRowsInComponent(UIPickerView picker, int component) {
        return _ar[component].Count; //各カラムの行数を返す
    }
    //文字列取得（必須）
    public override string GetTitle(UIPickerView picker, int row, int component) {
        return (string) _ar[component][row];//各カラムの文字列を取得する
    }
    //幅の指定
    public override float GetComponentWidth(UIPickerView picker, int component){
        switch (component) {
            case 0: //１カラム目の幅
　              return 100f;
            case 1://２カラム目の幅
                return 50f;
            default://３カラム目の幅
                return 30f;
        }
    }
    //描画用のビュー
    public override UIView GetView(UIPickerView pickerView, int row, int component, UIView view) {
        //ラベルの生成
        var label = new UILabel(new RectangleF(0, 0, 60f, 20f)){
            Text = (string) _ar[component][row],//当該文字列を設定する
            Font = UIFont.BoldSystemFontOfSize(12f),//フォントサイズの指定
            TextAlignment = UITextAlignment.Center //センタリング
        };
        return label;//ビューとして生成したラベルを返す
    }
}