今天我們把這個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
這樣他就會跑到畫面比較上方的位置了,因為我們是以Y軸去改變它的高低
接下來幾個元件也是依樣畫葫蘆~上下位置是Y軸,左右就是X軸,所以我們的Text Field 除了要改變Y軸也要改變X軸不然就跟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會改變顏色~
都沒問題,就是成功了,恭喜!