#39 製作拍立得 App 學習 if else

Rose

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

8 min readMay 7, 2021

以製作拍立得相機熟悉 if else 的用法，以及多頁式 Outlet 、 Class 的設定方式。

照片就用我們家的金牌吃貨兔兔「年年」吧😂～吃到翻白眼

基本的照尺寸更換可以理解，但更複雜的就要參考學長姐的作業，邊學邊研究。
這個作業順便練習多頁式的設定

因為最近作業的數量接近宇宙大爆炸等級，所以先挑比較不熟的來研究。

功能設定：

設定三種照片比例：1:1，4:3，16:9
按鈕輪流切換三種尺寸
設定文字輸入
設定文字輸出
設定導覽頁
熟悉多頁拉 Outlet 與 Class 設定
導入自訂字型

多頁拉 Outlet 與 Class 雖然課程還沒教到，但是常常看到學長學姊的作業是多頁式的，

所以跟著練習看看。

收鍵盤

設定二個地方，一個是 Text Fidel 點擊 Return 收鍵盤、一個是點任意處收鍵盤

(1) Text Fidel 拉 Outlet 時選擇 Did End On Exit

@IBAction func dismissKeyboard(_ sender: UITextField) { photoText = sender.text! }

(2) 新增觸控收鍵盤 Tap Gesture Recognizer

Tap Gesture 設定很容易拉錯連到奇怪的地方例如背景，所以錄了一個 Outlet 連結動畫做紀錄。

@IBAction func onTap(_ sender: UITapGestureRecognizer) {
        view.endEditing(true)
    }

PS. 雖然點擊 Tap 可以收起鍵盤，但是如果要讓 Text Fidel 裡輸入的文字可以出現在最終照片上，還是需要按下 Return 鍵

照片編輯區

這邊照片尺寸是進行裁切，而非縮放，所以襯了一張半透明的兔兔照片在最底下，示意原圖大小

而把真正要進行選取的兔兔照片包在 View 裡面，在 View 上面設定裁切尺寸，圓角以及邊框。

layer.borderWidth、layer.cornerRadius

因為要讓 View 裡的照片被裁切，所以 Clips to Bounds 要打勾

照片設定 Scale To Fill

切換照片比例

新增按鈕，拉 IBAction

並設定高寬變數，使用 if else 判斷式來切換三種比例

利用currentTitle 變更按鈕文字

語法：`currentTitle`

顯示在按鈕上的當前標題。當按鈕狀態發生變化時，他將自動設置此屬性。對於與它們關聯的沒有自定義標題字符串的狀態，此方法返迴當前顯示的標題，通常是與正常狀態關聯的標題。值可能是零。

@IBAction func proportionButton(_ sender: UIButton) {
        var width: CGFloat = 428
        var height: CGFloat = 570
        
        if sender.currentTitle == "1 : 1"{
            ratio = "3 : 4"
            width = 326
            height = width / 3 * 4
        } else if sender.currentTitle == "3 : 4"{
            ratio = "16 : 9"
            width = 326
            height = width / 16 * 9
        } else {
            ratio = "1 : 1"
            width = 326
            height = width
        }
        sender.setTitle(ratio, for: UIControl.State.normal)
        subView.frame = CGRect(x: (view.frame.width-width)/2, y: 139+(view.frame.width-height)/2, width: width, height: height)
        imageView.frame = CGRect(x: -(view.frame.width-width)/2, y: -(view.frame.width-height)/2, width: 428, height: 570)
        
        print("subView", subView.frame)
        print("imageView", imageView.frame)
        
    }