iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Mobile Development

IOS Beginner's 30days 系列 第 6

Day6 @IBOutlet

在Day2我們做了一個很簡單的App,其中我跳過了一些東西沒有講,接下來會一一為各位補上,今天要介紹的東西就是

@IBOutlet

當我們想要畫面上的元件能與使用者有一些互動的時候,我們就需要使用 @IBOutlet。

使用 @IBOutlet 的方法有很多種
你可以手打下面這段程式碼

@IBOutlet var myButton: UIButton!

// @IBOutlet var 元件名稱: 元件類別!

此時你的行數就會變成一個空心的圓圈,這代表這個Outlet還沒有連接上任何元件。
https://ithelp.ithome.com.tw/upload/images/20200908/20129677lVhDSJqVdv.png

接著開啟第二個視窗切換成Storyboard,按照Day2的教學將一個Button拉進畫面,再來將空心的圓圈拖曳至你的元件。
https://ithelp.ithome.com.tw/upload/images/20200908/20129677QEY2RXP4P2.png

此時圓圈會變成實心,而Storyboard元件列表的元件名稱也會改變https://ithelp.ithome.com.tw/upload/images/20200908/20129677ablrIKglaQ.pnghttps://ithelp.ithome.com.tw/upload/images/20200908/20129677bgJaTEoHCy.png

也可以壓著control鍵,再將元件從Storyboard拖曳至ViewController的viewDidLoad上方。
在輸入完元件名稱後也會有一樣的東西出現。
https://ithelp.ithome.com.tw/upload/images/20200908/20129677iuw7gvfq05.pnghttps://ithelp.ithome.com.tw/upload/images/20200908/20129677q2jbty2GDM.png

接著就能對元件下指令了
https://ithelp.ithome.com.tw/upload/images/20200908/201296773ErVnbIEmH.png

這裡將Button的背景顏色換成藍色
https://ithelp.ithome.com.tw/upload/images/20200908/20129677LPz8EB2gts.png

再來看看成果
https://ithelp.ithome.com.tw/upload/images/20200908/20129677Qm558gq5oB.png


上一篇
Day5 函式
下一篇
Day7 @IBAction
系列文
IOS Beginner's 30days 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言