One of the most used components when we are developing iOS application is UIPickerView component and is used for selecting predefined options ( similar to HTML dropdown menus ). For example, we can load this component with different textual data which can be presented as one section or we can load this component with different textural data for each section. One of the most used cases where this component is implemented is for selecting currencies in financial applications as countries selector etc.
In this tutorial we will develop one basic example so we can see how this component can be used.
We are starting with creating the Single View Application in our Xcode IDE.
Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.
Your project should look like this after finishing previous step:
Next we are setting the size of the view and we are choosing compact, portrait for all iPhones.
We are dropping from the Object Library one UIPickerView and one UILabel components.
This is one of the components that depends on datasource and delegate ( more about datasource and delegate in some of the next tutorials. ) where, datasource is used for loading data into component and delegate is used for executing some event on the UIViewController where this component is implemented. The easiest way to connect datasource and delegate from the UIPickerView is directly in InterfaceBuilder/Utilities/Connection Inspector.
First we are pressing at the circle button at the end of the datasource and we are dragging on View Controller as an then we are releasing so we can make connection.
The same procedure we are making for components delegate.
If we have done correctly both datasource and delegate should be connected with the View Controller where the component is implemented.
Our view controller must conform with protocols of components datasource and delegate so in class declaration we are putting also UIPickerViewDelegate and UIPickerViewDataSource.
Next from the InterfaceBuilder in Assistant Editor we are creating IBOutlet for label which will be used for displaying selected value in our example.
We are creating one constant array with strings which will be loaded as textual data in picker component.
We must implement the following methods:
- numberOfComponentsInPickerView – is used for displaying different textual data in the same component for example, displaying cities and countries and each of this components can be separately controlled.
- numberOfRowsInComponent – is used for displaying number of rows in each component. The UIPickerView component must know how many rows have each of the components so can be displayed correctly.
- rowHeightForComponent – is used for setting the height for the rows.
- titleForRow – is used for displaying textual data for each row also if we have multiple components in our UIPickerView for each row for each component.
- didSelectRow – is executed when we select some value from the component itself. If we have multiple components withing our UIPickerView for each component when we select the desired value this method is executed.
There are also methods which give us possibility to display different views for each row but for customization of the components we will see in some of the next tutorials.
So for this example we are using array of string for row titles and we have only one components so in the first method we are returning 1 for one component. In the next method where is required number of rows to be given we are returning the number of elements in our array with strings. For row height we are returning 50 but we can return more or less. Because we have single source of data in the method, titleForRow, we are returning the string object for each rows which is equal with the index of our array. In case we have multiple components in our UIPickerView we can return title for each component separately. And in the last method we are taking the selected value from our UIPickerView by selected row which is the index of string object in out array of strings and we are setting this value as text on the label where we will display selected value.
When we compile and run the application in the simulator we can try selecting different values in our component so we can see if everything we have implemented correctly how its working.
Complete source code can be found on my GitHub ready for testing.