使用 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

--

--