Day 15 实作调色盘App(3/3)

今天我们把这个App完成～
首先，先到我们的Main.storyboard

点击右上角 + -> 选择VIEW -> 拖曳到画面里
(VIEW可以调整自己喜欢的大小，我这边是调整正方形)
之後一样方法拉出 3个Slider，3个Text Field

注意一点，slider的maximum要改成255~~

拉完长这样
(因为VIEW是白色的所以看不出来)

接下来我们要把元件都固定好，以免产生跑版，譬如Iphone12跟Iphone 12 pro Max，手机大小不一样，你没有把元件固定好，出来的时候版面会跑掉，有可能发生3个Slider都在不同的位置等等之类～

首先对这View元件按着滑鼠右键，会出现一条蓝色的线，把他拉到Super View(背景)

之後点选:
Center Horizontally in Safe Area:将元件的x轴对齐画面x轴的正中间
Center Vertically in Safe Srea:将元件的y轴对齐画面y轴的正中间
Equal Width:将元件对其另外一个元件(这边我们是以背後的Sper View为准）并令其等宽(等比例)
Equal Width:将元件对其另外一个元件并令其等高(等比例)

点击元件 -> 右上角三角形符号 -> Vertical(垂直) ->Align Center Y to: Safe Area -> Multiplier 设定为0.6

这样他就会跑到画面比较上方的位置了，因为我们是以Ｙ轴去改变它的高低

接下来几个元件也是依样画葫芦～上下位置是Ｙ轴，左右就是Ｘ轴，所以我们的Text Field 除了要改变Ｙ轴也要改变Ｘ轴不然就跟Slider重叠啦～拉好後长这样～(我把view改成蓝色这样你才看得到～)

所以基本上你的元件会有四条约束他的线，分别固定元件大小以及元件的高低～像这样～

最後我们建立Outlet跟Action对元件的连结就好了～

右键点击白色正方形後会出现做边的选单，上面有写着我们刚刚建立的Outlet，左键按住後会有一条蓝色的线，把他拉到我们的元件上，一个萝卜一个坑，这样你的Outlet就拉好了

再来选单往下滑，可以看到Actions，一样做法，拉好後右边的空心圆就会变成实心圆～

都搞定之後我们按下command+R ，画面就会跑出来了～
功能会有：
1.VIEW的颜色会改变(一定要的)
2.拉动slider，slider本身的线跟slider的圆会改变颜色
3.当slider拉动时，Text Field会有数值出现
4.在Text Field输入数值(0~255)，slider会移动，且VIEW会改变颜色～

都没问题，就是成功了，恭喜！