How to add Multiple column pickerview as input to textfield in Swift
Tell us how can we improve this post?
So in this video we are going to learn how to add multiple column picker view to the textfield. So if you want to download X code file for this project Then just fill out the form below and you will receive the file in your inbox. If you are looking to add multiple column picker view a toolbar with a default option and a done button.
Then I have totally separate blog post on it. Check out the first link in the description box. So let’s just dive right into it. I am going to create new X code project. iOS single view application next. I am going to call it multi column picker view. Then next. I am going to store this on the desktop. So first thing I am going to go to the main storyboard.
Then I am going to change the iPhone size to iPhone SE. Then I am going to add a textfield. Now this is multi column so you need to have plenty of space for both the options. So try to make as big as you can. Then I am going to open an assistant editor. And I am going to create outlet for it. Call it picker textfield.
And then I am going to close the assistant editor open the view controller swift file. And in view did load I am going to add a standard code that we have been using for adding picker view as input view. Then I am going to add the delegate and datasource. So UIPickerViewDataSource, UIPickerViewDelegate.
So then I am going to add the required method number of components. Now for number of components I am going to create array of array to store the multiple column options. That goes something like this. So I have created an array of array. So first column will have options from the first array. And the second column will have options from the second array.
And number of components I am going to return pick options dot count. So basically we are setting there are two number of columns. If you want three number of columns then you add another array to this array of arrays. And you will have three columns. Then I am going to add the second required method. Number of rows in component.
I am going to return pick options at index component. So we have array of arrays. So which array should we choose from. Component dot count. Now this component parameter came from this function component parameter. So number of rows for first component is two and number of rows for second component is five.
Now this will remove all the warnings. Now let’s just set title for row. I am going to return Similarly pick options at index component and at index row. So the title for each picker option is going to be pick option at index. So first column or second column. And the row is going to be the first row or the second row.
Now if I did select row then I am going to create so let model is equal to pick options. So at first index I am going to get picker view. Now this picker view came from this picker view parameter. Dot selected row in component zero. So in the first component. And then let color. So just like this I am going to create pick options at first index.
And picker view dot selected row in component one. And then I am going to set picker textfield dot text is equal to model plus some space and plus color. Now once you are done adding the values then you want to stop editing the textfield. And for that I am going to add touches began. here I am going to say view dot end editing true.
Now let’s just run this app in iPhone 5s. So now if I click on the textfield then I see two columns. And I pick one column say seven plus gold. And seven plus rose gold. So I have enough space for both the columns. And if I press anywhere in the white area. Then this pickerview disappears.
So if you want to download this X code project file then just fill out the form below and you will receive the X code file in your inbox. If you are looking for pickerview with multiple column and toolbar on top with for example let’s just say default value or a done button then I have totally separate blog post on it.
Check out the first link in the description box. So that’s it for this video Like this video, leave a comment and I will see you in the next one.