In this tutorial we will make an app that allows the user to move the Red, Green, Blue, and Alpha sliders to create a unique color, and get back the values. The point of this app is to create an RGBA calculator which can be used to find the right RGBA color values you want to create a custom color. The images above show you how our app will look like when it is complete. First create a Xcode IOS project using storyboards, and open up the Main.storyboard file on the left hand side of your Xcode window. Bellow is a picture of how you should set up your storyboard.

Once you make your storyboard look like the image above, than add.constraints by going to the menu bar and pressing Editer >> Resolve Auto Layout Issues >> Add missing constraints. Once you do that we can link up your view items to code by opening up the assistant editor as shown in the image bellow.

To link up view items to code right click and drag to the view controller code, and create a name for the item. To create the methods on the bottom of the ViewController make sure to drag to the bottom of the ViewController class in order to create an action method. These action methods allow for us to do something when the sliders change in value. Now let’s create the behavior of our app.

This ColorViewStyle function above handles changing the color of the round moving portion of the slider which is called a thumb on lines 31-34. Lines 28-30 make your RGBView’s corners round, we did this to make it look a more fun, and not just a boring square that changes colors.

In the in the function above we create the values for our R, G, B, A sliders such as default position, and min, and max distances for your sliders. Lines 37-40 we set the thumb position to 0.0, note these values are Floats and not doubles. These means that our thumb should be set to the beginning of our range. Lines 41-48 we set our minimum, and maximum values, These values have to match the UIColor RGBA values which are 0.0 through 1.0. That means we set our slider minimum value to 0.0, and maximum value to 1.0. You have to do this for all four sliders as indicated above.

Now in our ViewDIdLoad we have to call our two previous functions we just went over which set the values for our sliders, and set our UI style for our sliders and RGBVIew.

The function colorUpdater() listed above will be called whenever we move our sliders, since we have to call this on all four slider functions it is best to declare it as a function, and then call the method on each slider changed Action method. Lines 51-54 create variables that converts our current slider value from Float to CGFloat since our slider values are Float, and our UIColor RGBA requires CGFloat. Line 55 sets our RGBView background color to the RGBA values we change with our sliders at runtime. This line uses UIColors method of setting RGBA values, we call our converted value from lines 51-54 in our UIColor RGBA part after the equals sign. Note this line sets the background color of our RGBView. Lines 56-59 display our values to their designated labels. Each slider has its own label which displays its value, and here we assign the label the value of our sliders. Note this is here so that as you move our slider you can see the value change in real time when you move the thumb.

These functions are called when the slider values are changed, inside of these functions we call our colorUpdater() functions that we just went over a brief second ago. Now you can run your app to see it in action. If things look a bit funky try going back to our storyboard and setting our constraints again.

Open Project on Github