Xamarin.Forms Pickerのテキストの位置の調整

今回はXamarin.Forms Pickerのテキストの位置を好きなように調整する方法についてです。

Rendererを使います。

Androidの場合

public class CustomPickerRenderer : PickerRenderer {
    public CustomPickerRenderer(Context context) : base(context) { }

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) {
        base.OnElementChanged(e);
        if (Control != null) {
            Control.SetPadding(30, 0, 0, 0);
            // textを左、縦中央揃え
            Control.Gravity = GravityFlags.Left | GravityFlags.CenterVertical;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
        base.OnElementPropertyChanged(sender, e);
        Control.SetPadding(30, 0, 0, 0);
        Control.Gravity = GravityFlags.Left | GravityFlags.CenterVertical;
    }
}

このような感じでGravityを使って文字の位置を指定し、SetPaddingでPaddingを入れることでさらに位置の微調整が可能です。
ここでの注意点はOnElementPropertyChangedでも指定をすることです。
私が試した際は、OnElementPropertyChangedにも記述しないとPickerの値を選び直した際に位置が中央に戻ってしまう現象が起きていました。

次にiOSです。

public class CustomPicker: PickerRenderer {
    public CustomPicker() { }

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) {
        base.OnElementChanged(e);
        if (Control != null) {
            // textを左へ移動
            Control.TextAlignment = UITextAlignment.Left;
            // textの左に30スペースを空ける
            Control.LeftView = new UIView(new CGRect(0, 0, 30, 5));
            Control.LeftViewMode = UITextFieldViewMode.Always;
        }
    }
}

iOSでの注意点はLeftView(RightViewもある)というのを使うところです。
Control.Text.PadLeft(int)、Control.Text.PadRight(int)といういかにもテキストの横にパディングをセットできそうな関数があるのですが、これを指定してもテキスト横に余白は取られません。
ですのでLeftView(右にスペース欲しい時はRightView)を使い、空白のViewをセットすることでパディングをセットします。

タイトルとURLをコピーしました