Forum Xamarin.iOS
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to have in xamarin.ios the pickers look-a-like xamarin forms?

fmaster_icfmaster_ic Member ✭✭
edited November 2019 in Xamarin.iOS

I have a project that is running natively with xamarin.ios, but the problem is that I need the selector to work as if it were a widget that uses xamarin forms(see the image below), I mean a text box that autofills with the selection, and below At the bottom of the page are the items that can be selected.

Does anyone have a shape that is similar to the sea? The native picker doesn't fit me at all.

see a example => https://i.stack.imgur.com/BS1Ry.jpg

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Forms customize the native UITextField control. Replace its InputView with a UIPickerView for selection. We can also make this modification for UITextField. Create our own input view like:

    public class CustomTextField : UITextField
    {
        public CustomTextField(List<string> itemsSource)
        {
            if (itemsSource != null && itemsSource.Count > 0)
            {
                var pickerView = new UIPickerView();
                pickerView.DataSource = new CustomPickerDataSource(itemsSource);
                pickerView.Delegate = new CustomPickerDelegate(itemsSource);
                InputView = pickerView;
    
                var toolbar = new UIToolbar(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 44));
                UIBarButtonItem doneBtn = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, (sender, e) =>
                {
                    int selectedIndex = (int)pickerView.SelectedRowInComponent(0);                    
                    Text = itemsSource[selectedIndex];
                    ResignFirstResponder();
                });
                UIBarButtonItem flexibleBtn = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace);
                toolbar.Items = new UIBarButtonItem[] { flexibleBtn, doneBtn };
                InputAccessoryView = toolbar;
            }           
        }
    }
    
    public class CustomPickerDataSource : UIPickerViewDataSource
    {
        List<string> items;
        public CustomPickerDataSource(List<string> items)
        {
            this.items = items;
        }
        public override nint GetComponentCount(UIPickerView pickerView)
        {
            return 1;
        }
    
        public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
        {
            return items.Count;
        }
    }
    public class CustomPickerDelegate : UIPickerViewDelegate
    {
        List<string> items;
        public CustomPickerDelegate(List<string> items)
        {
            this.items = items;
        }
        public override string GetTitle(UIPickerView pickerView, nint row, nint component)
        {
            return items[(int)row];
        }
    }
    

    Consume it like:

    List<string> list = new List<string> { "1", "2", "3" };
    var inputView = new CustomTextField(list);
    inputView.TranslatesAutoresizingMaskIntoConstraints = false;
    inputView.Placeholder = "Please select";
    View.AddSubview(inputView);
    
    inputView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor).Active = true;
    inputView.TopAnchor.ConstraintEqualTo(View.TopAnchor, 100).Active = true;
    inputView.WidthAnchor.ConstraintEqualTo(200).Active = true;
    inputView.HeightAnchor.ConstraintEqualTo(44).Active = true;
    
Sign In or Register to comment.