iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

今天我們把這個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會改變顏色~

都沒問題,就是成功了,恭喜!


上一篇
Day 14 實作調色盤App(2/3)
下一篇
Day 16 生命週期
系列文
IOS菜逼八連續30天挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言