IMD 1_Xcode RGB Slider

In this class, we will learn a program named ‘Xcode’. We can make an application with this program. I’ve learned how to make a ‘RGB Slider’ in first class.

First, if you open the ‘Xcode’. You will see this.

스크린샷 2016-03-21 오후 9.21.34.png

We will create a new Xcode project, so choose second one.

스크린샷 2016-03-15 오전 10.44.39

Make sure do not have any space in your product name.

And save it to the Dropbox. (Do not check git)

We will going to make a RGB Slider. Search a slider and drag it to the Main storyboard.

스크린샷 2016-03-21 오후 11.03.22.png

스크린샷 2016-03-21 오후 11.09.01.png

Transform its length. And we need a Label for Red, Green, Blue.

스크린샷 2016-03-21 오후 11.11.42






Now we will going to make three of them.(R,G,B)

You can duplicate by ‘option key’.

스크린샷 2016-03-21 오후 11.49.45.png

And we will add some code.

스크린샷 2016-03-21 오후 11.55.45

Click the crossed circle, than you’ll have coding screen.


스크린샷 2016-03-21 오후 11.57.58.png

스크린샷 2016-03-22 오전 12.19.51.png


//  ViewController.swift

//  RGBslider1212200


//  Created by 서예정 on 2016. 3. 15..

//  Copyright © 2016 YeJung. All rights reserved.


//import the UIKit library

import UIKit

//create a class for the ViewController

class ViewController: UIViewController {

    //create variables to hold slider values

    @IBOutlet weak var redSlider: UISlider!


    //create variables for the text labels

    @IBOutlet weak var redLabel: UILabel!



    override func viewDidLoad() {


        // Do any additional setup after loading the view, typically from a nib.


    override func didReceiveMemoryWarning() {


        // Dispose of any resources that can be recreated.


    //create a function that update the color when the slider is moved

    @IBAction func updateColor(sender: AnyObject) {


        //create variables to hold the slide values

        let redColor = CGFloat(redSlider.value)



        //map the slider values from 0 -> 1 to 0 -> 255

        let redMapped = Int(redColor*255)


        //send the value to the text field

        redLabel.text = String(“\(redMapped)”)


        //set the background color




//end of class


This is our code. If you want to add an outlet, you can drag pushing control key.

And when you want to add an action, you should change outlet > Action.

When you finish, you can just click the play button, than you’ll have an simulator.

스크린샷 2016-03-22 오전 12.24.55.png

When I was in class, it worked well.

But now when I do it again by myself, I got an error… T.T   So sad.

I’ll fix this next class.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s