Day 13 实作调色盘App(1/3)

我们可以藉由小小的调色盘App专案来加强我们对一些元件的认识

1.先新增一个专案 -> Create a new Xcode project
(往後的专案都是按照这个方法去新增)

2.选IOS，然後选App

3.Product Name 命名自己喜欢的名称，Interface选Storyboard

4.创建成功後我们会看到两个档案，分别是我们的ViewController.swift跟我们的Main.storyboard

ViewController是编写程序的地方Main.storyboard是我们设计版面的地方

6.撰写程序码:
我们需要三个滑杆(Slider)，三个输入框(TextField)，跟一个显示颜色的View

这边先把@IBOutlet都拉出来

@IBOutlet  var view: UIView!
@IBOutlet  var redslider: UISlider!
@IBOutlet  var greenslider: UISlider!
@IBOutlet  var blueslider: UISlider!
@IBOutlet  var redtextfield: UITextField!
@IBOutlet  var greentextfield:UITextField!
@IBOutlet  var bluetextfield: UITextField!

这时候会报错，不用紧张，因为我们还没有在Main.storyboard那边把元件跟这些做连接～

顺便解释一下什麽是@IBOutlet～这边可以简单想成是一个桥梁，让他在程序档案里建立一个存在去对应storyboard的某个元件，让我们可以对他的属性做修改，action就是去事件发生执行的动作

接下来我们建立我们点击元件後，会发生的事情，也就是action

红色滑杆：

 @IBAction func redslider(_ sender: UISlider) {
        redtextfield.text = "\(Int(sender.value))"
                sender.minimumTrackTintColor = UIColor(red: CGFloat(redslider.value/255), green: 0, blue: 0, alpha: 1)
                sender.thumbTintColor = UIColor(red: CGFloat(redslider.value/255), green: 0, blue: 0, alpha: 1)
                VIEW.backgroundColor = UIColor(red: CGFloat(redslider.value/255), green: CGFloat(greenslider.value/255), blue: CGFloat(blueslider.value/255),alpha: 1)
    }

绿色滑杆：

 @IBAction func greenslider(_ sender: UISlider) {
        greentextfield.text = "\(Int(sender.value))"
                sender.minimumTrackTintColor = UIColor(red: 0, green: CGFloat(greenslider.value/255), blue: 0, alpha: 1)
                sender.thumbTintColor = UIColor(red: 0, green: CGFloat(greenslider.value/255), blue: 0, alpha: 1)
                VIEW.backgroundColor = UIColor(red: CGFloat(redslider.value/255), green: CGFloat(greenslider.value/255), blue: CGFloat(blueslider.value/255),alpha: 1)
    }

蓝色滑杆：

 @IBAction func blueslider(_ sender: UISlider) {
        bluetextfield.text = "\(Int(sender.value))"
               sender.minimumTrackTintColor = UIColor(red: 0, green: 0, blue: CGFloat(blueslider.value/255), alpha: 1) // 边拉边改变 Slider 颜色，由左至右
               sender.thumbTintColor = UIColor(red: 0, green: 0, blue: CGFloat(blueslider.value/255), alpha: 1) // 边拉边改变 Slider 圆圈的颜色
               VIEW.backgroundColor = UIColor(red: CGFloat(redslider.value/255), green: CGFloat(greenslider.value/255), blue: CGFloat(blueslider.value/255),alpha: 1)
    }

我们透过滑杆调整RGB的值，才能改变颜色，这边因为滑杆的最小值是0最大值是1，所以程序码要将"值/255"，如下

red: CGFloat(redslider.value/255)

否则你一拉，就直接爆炸了~

再来可以留意一下我们这两段程序吗：

sender.minimumTrackTintColor 
sender.thumbTintColor 

minimumTrackTintColor，是当滑杆在滑动时，可以让那条线产生颜色的变化(如下图红色的线），会用minimumTrackTintColor而非使用用maximumTrackTintColor是因为我们的slider是从"左边滑到右边"

再来讲讲thumbTintColor也是跟上面一样，不过变化的是滑杆上圆，一样是在我们边拉动时他就可以边改边圆的颜色～

刚刚那些程序码，有出现一些关於"textfield.text"的东西
我们下一篇讲到关於输入框的使用方式～