How to add ToolBar with done button to UIPickerView?

Viewed 4158

I'd like to have a UIPickerView in a Xamarin.iOS project. The UIPicker that I need, must be like this (hide by default and with toolbar and done button): Sample Picker for Xamarin.forms

which is an example for Xamarin.forms !

I've seen already all questions on stack overflow and they are not in my case or they are not complete explanation for this purpose.

For demonstrating that I've tried already for create Done Toolbar, here is my code :

public class TestPickerViewController : UIViewController
    {
        PickerModel picker_model;
        UIPickerView picker;

        public TestPickerViewController()

        {
            Title = Texts.Home;
            View.BackgroundColor = UIColor.White;
            this.EdgesForExtendedLayout = UIRectEdge.None;

        }

        public override void DidReceiveMemoryWarning()
        {
            // Releases the view if it doesn't have a superview.
            base.DidReceiveMemoryWarning();

            // Release any cached data, images, etc that aren't in use.
        }

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

            List<Object> state_list = new List<Object>();
            state_list.Add("1");
            state_list.Add("2");
            state_list.Add("3");
            state_list.Add("4");
            picker_model = new PickerModel(state_list);

            picker = new UIPickerView();
            picker.Model = picker_model;
            picker.ShowSelectionIndicator = true;



            UIToolbar toolbar = new UIToolbar();
            toolbar.BarStyle = UIBarStyle.Black;
            toolbar.Translucent = true;
            toolbar.SizeToFit();

            UIBarButtonItem doneButton = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, (s, e) =>
            {
                foreach (UIView view in this.View.Subviews)
                {
                    if (view.IsFirstResponder)
                    {
                        UITextField textview = (UITextField)view;
                        textview.Text = picker_model.values[(int)picker.SelectedRowInComponent(0)].ToString();
                        textview.ResignFirstResponder();
                    }
                }

            });
            toolbar.SetItems(new UIBarButtonItem[] { doneButton }, true);


            View.AddSubviews(picker);

            //How to add toolbar, action for opening toolbar and hide by default the list 
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

            View.AddConstraints(

                picker.AtTopOf(View, 90),
                picker.AtLeftOf(View, 50),
                picker.WithSameWidth(View).Minus(100)
            );
        }


        private void SetPicker(object sender, EventArgs e)
        {
            UITextField field = (UITextField)sender;
            picker.Select(picker_model.values.IndexOf(field.Text), 0, true);
        }
    }

    public class PickerModel : UIPickerViewModel
    {
        public IList<Object> values;

        public event EventHandler<PickerChangedEventArgs> PickerChanged;

        public PickerModel(IList<Object> values)
        {
            this.values = values;
        }

        public override nint GetComponentCount(UIPickerView picker)
        {
            return 1;
        }

        public override nint GetRowsInComponent(UIPickerView picker, nint component)
        {
            return values.Count;
        }

        public override string GetTitle(UIPickerView picker, nint row, nint component)
        {
            return values[(int)row].ToString();
        }

        public override nfloat GetRowHeight(UIPickerView picker, nint component)
        {
            return 40f;
        }

        public override void Selected(UIPickerView picker, nint row, nint component)
        {
            if (this.PickerChanged != null)
            {
                this.PickerChanged(this, new PickerChangedEventArgs { SelectedValue = values[(int)row] });
            }
        }
    }

    public class PickerChangedEventArgs : EventArgs
    {
        public object SelectedValue { get; set; }
    }

I know that I have to add toolbar to somewhere which has done button. And I need also the action which hide the default Picker and show the list when we click on Select section and etc ...

1 Answers

Just assign the UIToolbar to the InputAccessoryView property of UITextField. Here's a code snippet for example:

UIToolbar toolBar = new UIToolbar(new CGRect(0, 0, 320, 44));
UIBarButtonItem flexibleSpaceLeft = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace,null,null);
UIBarButtonItem doneButton = new UIBarButtonItem("OK",UIBarButtonItemStyle.Done,this, new ObjCRuntime.Selector("DoneAction"));
UIBarButtonItem[] list = new UIBarButtonItem[] { flexibleSpaceLeft, doneButton };
toolBar.SetItems(list, false);

UIPickerView pickerView = new UIPickerView(new CGRect(0, 44, 320, 216));
pickerView.DataSource = new MyUIPickerViewDataSource();
pickerView.Delegate = new MyUIPickerViewDelegate();
pickerView.ShowSelectionIndicator = true;

//Assign the toolBar to InputAccessoryView 
textField.InputAccessoryView = toolBar;

textField.InputView = pickerView;

And implement the Action like this:

    [Export("DoneAction")]
    private void DoneAction()
    {
        Console.WriteLine("Your Action!");
    }

It works like this:

enter image description here

Related