使用 IBOutlet,IBAction & 亂數創作有趣的 App-梗圖製造機
參考教學
其他同學案例學習
App Store 實際App
此次練習有指定要使用到一些元件,大致上如下:
1 使用 IBOutlet 和 IBAction 實現 App 的功能。
2 畫面上至少需包含以下元件,而且程式也有使用這些元件。
text field,slider,switch,label,image view,button,segmented control,date picker
3 slider 滑動時要搭配 label 顯示數值
4 使用者輸入文字後,可以將鍵盤收起來,比方按某個 button 或 return 鍵。
5 有亂數功能。
前言
所以透過同學的案例,我想到網路上常常有很多梗圖,加上一些文字,透過眼神傳達一些有的沒的的療癒效果,於是我也想來做做看。
製作步驟
一、先找圖,我從網路上的梗圖倉庫找到了許多圖片來實作,大家有興趣可以到以下網址參考。
二、將圖放入Xcode的Assets.xcassets。
三、製作main.storyboard畫面
一張圖片大致上我認為可以擺兩句話,所以預留了兩個文字框,以及上面圖片可供選擇,下面可以透過slider來調整文字大小,然後segment可以來做顏色變更,最後一個slider是另一篇教學,講到有關於濾鏡,會在其篇教學說明。
大致上畫面的元件配置與設定就不多說了,直接進入程式囉!
程式說明
一、先將元件與ViewController class建立關係(IBOutlet、IBAction)
二、在viewDidLoad中先做一些處理
關於收鍵盤這件事,可參考以下文章進行實作
三、在textfield的IBAction中撰寫輸入時,變更Label文字
四、將ImageView加上UIButton來做IBAction,並於每張圖片按鈕內撰寫程式碼,因為每張圖片文字要顯示的位置不同,目前這個案例是每張都分開寫。
之後第二張圖片,請按照這個方式繼續做囉!
五、修改文字大小,在文字大小的Slider建立IBAction。
六、修改文字顏色Segment,也是建立IBAction來偵測事件
成果分享
Github