使用 IBOutlet 和 IBAction 創作有趣的 App — Postcard Master

1. App 操作的動畫影片 gif

成品demo

2. GitHub 連結

3. 特製的App 畫面截圖

加了底圖,希望可以美化空虛(?)的介面

4. 文字說明

這次努力的將彼得潘開出的要求及一些加分功能進行了結合,希望不會有突兀的感覺(想功能比做功能還久……)。

使用到的技術:

(1)利用隨機變數(randomElement)來產生漸層的CAGradientLayer

(2) 利用 UIView 的 mask 為圖片文字染上美麗的漸層,並搭配timer完成封面

利用隨機漸層和mask完成的封面

(3)使用UIPickerView完成濾鏡選擇的選單

利用UIPickerView製作的選單

(4) 利用 CIFilter 實現美麗的圖片濾鏡

(5)利用 UIImagePickerController製作從相簿中選擇圖片的功能

(6)利用activityViewController將製作好的明信片儲存至photo album或是分享至社群媒體

要取得相簿使用權,需先對info.plist進行設定

(7)使用text field,slider,switch,label,image view,button,segmented control,date picker製作表單

(8)利用struct讓程式碼的架構變的更簡潔

(9)利用textFieldShouldReturn及touchesBegan讓鍵盤能夠收起來

(10) 利用UIBezierPath拼出明信片

5. 重點程式碼講解

(1) LoadingViewController

一開始原本想在LaunchScreen的部分做一些畫面繪製的動作,不過發現好像不行(貌似是因為LaunchScreen一定要是靜態的),所以我就自己寫一個ViewController當作Loading頁面。

一開始先建立要用來生成漸層的cgColor array(變數color),之後我用randomElement這個function來對color array取random(這邊不得不讚嘆swift的方便),為了確保color1和color2不是一樣的,所以我用一個while迴圈來對color2取random,直到color2跟color1不一樣。

之後就根據彼得潘的教學製作出漸層圖片。

最後,透過timer來計時,以達到類似LaunchScreen的效果。3秒過後,自動移轉到UINavigationController。

LoadingViewController部分之code

(2) ViewController

這部分為主要選單,可以對要製作的明信片進行設定、客製化。

以下為使用UIPickerView的重點code,記得要在ViewController後面繼承UIPickerViewDelegete跟UIPickerViewSource,並且將對象設定為self。

filterPicker code

以下為實作選擇圖片得部分,除了要先在info.plist設定好權限外,還需要繼承 UIImagePickerControllerDelegate及UINavigationControllerDelegate才能正常使用。

詳細教學可以參考:

picturePicker code

以下部分為處理收鍵盤問題及頁面跳轉的部分。

收鍵盤部分,除了按return外(textFieldShouldReturn),按空白地方也會自動收起來(touchesBegan)。需注意textFieldShouldReturn function的使用,要先繼承UITextFieldDelagete。

頁面跳轉部分,我會先對photoImageView進行檢查,若沒有選擇的照片,會跳出訊息,提醒使用者需要選擇照片(畢竟沒有照片,做什麼明信片啦!)。之後再將ResultViewController需要用到的參數傳遞過去。

收鍵盤&頁面跳轉 code

(3) ResultViewController

這個頁面主要用來生成明信片,詳細過程在此就不多加贅述,主要就是添加濾鏡跟一堆view的拼貼。

以下主要講解使用activityViewController、製作豎排Label及將View轉成image的方式。

activityViewController的init function有兩個參數可以傳入,一個為activityItems(用來選擇要進行分享的東西),這裡我選擇了我剛剛產生出來的相片,另一個參數為applicationActivities(用來提供自訂義的服務),這邊我沒有特別的需求,就直接設定nil了。

製作豎排Label的方式,我是採用每一個字加一個換行(“\n”)來實作的。

最後,我用UIGraphicsImageRenderer這個function,來對我們製作出的view進行截圖,以達到相似於將view轉換成view的效果。

ResultViewController code

(4) RenderArg

這裡額外說明一下,為了方便ViewController跟ResultViewController進行參數傳遞,我額外建立了一個struct,結構如下。

RenderArg struct