iOS Tutorials: Show colors with PickerView

With this tutorials, the users will have the capability of choosing the color that they want scrolling through PickerView and the image will change its color.

 On your Xcode, go to File > New > Project to create a new blank project.

Go ahead and give your project any name. For mine, I put PickerView. You could go ahead and put in the required information as your own information.

Go to Main.storyboard and look for Picker View and Image View. We will store the colors in Picker View and use Image View to project the color when a color is selected in Picker View.

Make sure you connect the Image View and Picker View to ViewController.swift to create outlets. If you don’t, it could simply be done by Control + Drag onto the ViewController.

Now the best part of the tutorials is to start coding. Since we are using Picker View here, we will have to declare UIPickerViewDelegate and UIPickerViewDataSource protocol as part of the requirement to use Picker View.

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

Now let’s create an array to store the value of colors that we want. For me, I’ll be using red, yellow, blue and green. Also create a variable named selected. You will find out why we need it.

let colors = ["Red","Yellow","Blue","Green"]
var selected = 0

Scroll down to viewDidLoad() and change it to the following. Since we are using those protocols, we have to set it to the pickerview by the following code.

override func viewDidLoad() {
        pickerView.delegate = self
        pickerView.dataSource = self

Since we have implement the UIViewDataSource protocol, the required methods are to define the number of components and rows of a picker. We need to implement these methods. By returning colors.count, we are telling the Picker View that the length of colors is 4.

func numberOfComponents(in pickerView: UIPickerView) -> Int {
     return 1

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
     return colors.count

The last part of the code would be assigning the data from the colors array into the Picker View. Now, the variable selected was used to store the rows and was used to perform an IF statement to determine what row is being selected and project the selected colors.

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return colors[row]
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selected = row
        if (selected == 0) {
            imageView.backgroundColor =
        } else if (selected == 1){
            imageView.backgroundColor = UIColor.yellow
        } else if (selected == 2){
            imageView.backgroundColor =
        } else if (selected == 3 ){
            imageView.backgroundColor =

Your end result should look like this.

The following code can be found on GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *