⑪ 拍立得 App「日系Taiwan 動畫風格濾鏡」 if …else 練習

「日系台灣風景動畫風格」拍立得 App

捕捉台灣之美，展現日系動畫風格！這款創新的拍立得 App 將帶你踏上一段視覺與情感的旅程，讓你將台灣的絕美風景轉化為唯美的日系動畫風格照片，提供多樣化的拍立得模板、文字功能，讓每張照片都充滿故事性。

功能亮點：

1. 日系動畫濾鏡： 內建多款精心設計的日系動畫風格濾鏡，讓你的照片宛如動畫場景般夢幻唯美。
2. 多樣化模板： 提供多種拍立得模板，讓你創造出獨一無二的個性化相片。
3. 文字紀念功能：可以輸入旅遊心情或個人故事，將文字印製在拍立得照片上，使回憶更加豐富和生動。

基本版

複習上課內容，利用UISegmentControl 調整照片比例大小：

1. 圖片：高度原本設定為0
2. 依照比例：調整 1:1 ( height = width) 3:4 ( height = width / 3 * 4) 4:5( height = width / 4 * 5)
3. 透過if….else 來調整比例 [“1:1”, “3:4”, “4:5”] — 0,1, 2
4. 照片調整後比例：Image.frame.size = CGSize(width: width, height: height)

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var Image: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func Ratio(_ sender: UISegmentedControl) {
       let width = 400
       var height = 0
        if sender.selectedSegmentIndex==0{
            height = width
        }
        if sender.selectedSegmentIndex == 1{
            height = width / 3 * 4
        }
        if sender.selectedSegmentIndex == 2{
            height = width / 4 * 5
        }
        Image.frame.size = CGSize(width: width, height: height)
    }
    
}

Polaroid App with Taiwan Scenery — Part 1 Xcode iOS 17 UIKit

進階版

製作出互動性高日式拍立得App

1. 利用Canva Ai Painting 繪製多張台灣元素的圖片
2. 使用者可以點選喜愛照片，點選比例、輸入文字，即可印出拍立得

UI 設定步驟

第一頁

第二頁

ViewController 拉線介紹

IBOutlet

第一頁

第二頁

IBAction

圖片

下一頁按鈕

返回按鈕

成果影片

完整程式碼

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var changePicImage: UIImageView!
    //首頁圖片：台北101
    @IBOutlet weak var textLabel: UITextField!
    // 首頁：輸入框
    @IBOutlet weak var SizeLabel: UILabel!
    // 調整大小的按鈕
    @IBOutlet weak var nextPage: UIView!
    // 下一頁的全部View
    @IBOutlet weak var nextPicFrame: UIView!
    // 拍立得白邊
    @IBOutlet weak var nextPicImage: UIImageView!
    // 拍立得照片
    @IBOutlet weak var nextPageTextLabel: UITextField!
    // 拍立得：輸入框
     
    
    
    //利用index 方式，取得使用者輸入的順序
    var index = Int(0)
    let size = ["3:4", "1:1", "4:5"]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
    // 先將拍立得（第二頁）藏起來
        nextPage.isHidden = true
    }

    // 點選圖片前面的按鈕後，自動讓首頁圖片、拍立得圖片均相同
    @IBAction func pic2(_ sender: Any) {
        changePicImage.image = UIImage(named: "Image2")
        nextPicImage.image = UIImage(named: "Image2")
    }
    
    @IBAction func pic3(_ sender: Any) {
        changePicImage.image = UIImage(named: "Image3")
        nextPicImage.image = UIImage(named: "Image3")
    }
    
    @IBAction func pic4(_ sender: Any) {
        changePicImage.image = UIImage(named: "Image4")
        nextPicImage.image = UIImage(named: "Image4")
    }
    
    @IBAction func pic5(_ sender: Any) {
        changePicImage.image = UIImage(named: "Image5")
        nextPicImage.image = UIImage(named: "Image5")
    }
    
    @IBAction func pic6(_ sender: Any) {
        changePicImage.image = UIImage(named: "Image6")
        nextPicImage.image = UIImage(named: "Image6")
    }

    
    // 調整大小
    @IBAction func sizeChange(_ sender: Any) {
        
        // 利用餘數方式找出index(0,1,2)分別代表：["3:4", "1:1", "4:5"] 圖片比例
        index = (1 + index) % 3
        SizeLabel.text = size[index]
       
        // 首頁圖片等於拍立得長寬（height and width）、拍立得白邊大於圖片大小、文字高度＝圖片高度再往下（最佳比例可彈性設定）
        if index == 2 {
                    changePicImage.frame = CGRect(x: 30, y: 125, width: 330, height: 413)
                    nextPicFrame.frame = CGRect(x: 20, y: 115, width: 350, height: 500)
                    nextPicImage.frame = CGRect(x: 10, y: 20, width: 330, height: 413)
                    nextPageTextLabel.frame = CGRect(x: 15, y: nextPicImage.frame.maxY + 30 , width: 310, height: 30)
            
                } else if index == 1 {
                    changePicImage.frame = CGRect(x: 30, y: 125, width: 330, height: 330)
                    nextPicFrame.frame = CGRect(x: 20, y: 115, width: 350, height: 450)
                    nextPicImage.frame = CGRect(x: 10, y: 20, width: 330, height: 330)
                    nextPageTextLabel.frame = CGRect(x: 15, y: nextPicImage.frame.maxY + 40, width: 310, height: 30)
                } else {
                    changePicImage.frame = CGRect(x: 30, y: 125, width: 330, height: 440)
                    nextPicFrame.frame = CGRect(x: 20, y: 115, width: 350, height: 520)
                    nextPicImage.frame = CGRect(x: 10, y: 20, width: 330, height: 440)
                    nextPageTextLabel.frame = CGRect(x: 15, y: nextPicImage.frame.maxY + 20, width: 310, height: 30)
                }
        
    }
    
    // 第一頁按鈕：出現第二頁，首頁文字=拍立得文字，拍立得往下移動的動畫
    
    @IBAction func next(_ sender: Any) {
        nextPageTextLabel.text = textLabel.text
        nextPage.isHidden = false
        self.nextPicFrame.frame.origin.y = -635
        UIView.animate(withDuration: 3){
            self.nextPicFrame.frame.origin.y = 115
        }
        
        
    }
    
    // 拍立得打勾按鈕，可進行返回第一頁
    
    @IBAction func back(_ sender: Any) {
        nextPage.isHidden = true
    }
    
    
}

參考文章

#40照片編輯 App |文字/拍立得

#95 照片編輯 App

＃51 製作拍立得 App 學習 if else

My GitHub

If-else-polaroid/If-else-polaroid/ViewController.swift at main · ccwj1970/If-else-polaroid