35 梗圖編輯軟體”SOMEME”（AppWorks School）第一篇-首頁

哈囉，自從2023年8月底進入AppWorks School之後，經過每天的魔鬼式教育，最後我做了個人作品『梗圖編輯軟體』，一起來看看吧！

這款app有以下特色：

一、 可體驗完整圖片編輯流程（裁切、塗鴉、貼圖、文字編輯）外，導入Apple Core ML(machine learning models)技術可進行影像去背轉成素材，素材可儲存雲端素材庫並隨時使用。

二、提供圖片管理庫功能，便於管理收藏內容（可新增和刪除），並可立即進行圖片編輯或分享。

三、瀏覽最新熱門各項梗圖、並可搜尋關鍵字找到相關梗圖。

你也可以透過我的github來看看我的code:

GitHub - HydeeChen/SOMEME

demo影片：

整體main storyboard

一、首頁：

（一）lottie動畫

首頁我加了Q彈的lottie動畫，指引大家看文字敘述。

可以到lottie的免費網站下載你想要的動畫（改顏色就要錢囉！）

Featured animations from our community

我用了cocoaPod載了套件，並在網站上下載lottie JSON檔案，丟到專案資料夾。

在viewDidLoad的地方放入呈現的程式：

import Lottie

 override func viewDidLoad() {
        super.viewDidLoad()
//        fatalError()
        // 新增箭頭動畫 
        let arrowAnimationView = LottieAnimationView()
        let arrowAnimation = LottieAnimation.named("arrow")
        arrowAnimationView.animation = arrowAnimation
        arrowAnimationView.frame = CGRect(x: -30, y: 250, width: 300, height: 300)
        view.addSubview(arrowAnimationView)
        arrowAnimationView.play()
}

（二）選擇要編輯的圖片（相機或相簿）

1. 相機：記得要開相機的權限喔！

 // 設定選擇照片後的動作為顯示圖片及關掉視窗
    func imagePickerController(_: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
        if let image = info[.originalImage] as? UIImage {
            photoImageView.image = image
        }
        dismiss(animated: true)
    }

    @IBAction func takePhoto(_: Any) {
        // 檢查相機是否可用
            guard UIImagePickerController.isSourceTypeAvailable(.camera) else {
                print("相機不可用")
                return
            }
            // 檢查是否有相機許可權
            let cameraAuthorizationStatus = AVCaptureDevice.authorizationStatus(for: .video)
            switch cameraAuthorizationStatus {
            case .authorized:
                // 有相機許可權，執行相機操作
                let imagePickerController = UIImagePickerController()
                imagePickerController.sourceType = .camera
                imagePickerController.delegate = self
                present(imagePickerController, animated: true, completion: nil)
                // 開始編輯ui顯示設定
                shadowOfEdit.isHidden = false
                redViewOfEdit.isHidden = false
                editButtonOutlet.isHidden = false
                // 尚未選擇照片文字隱藏
            case .notDetermined:
                // 尚未詢問用戶許可權，執行詢問用戶
                AVCaptureDevice.requestAccess(for: .video) { granted in
                    if granted {
                        // 用戶同意許可權，執行相機操作（這個在主線程執行）
                        DispatchQueue.main.async {
                            self.takePhoto(self)
                        }
                    } else {
                        // 用戶拒絕許可權，提供提示
                        print("相機許可權被拒絕")
                    }
                }
            case .denied, .restricted:
                // 用戶拒絕或限制許可權，提供提示
                print("相機許可權被拒絕或受限")
            }
    }

2. 相簿：

 @IBAction func openGallery(_: Any) {
        // 開始編輯ui顯示設定
        shadowOfEdit.isHidden = false
        redViewOfEdit.isHidden = false
        editButtonOutlet.isHidden = false
        startLabelOutlet.isHidden = false
        // 選擇圖庫照片
        let controller = UIImagePickerController()
        controller.sourceType = .photoLibrary
        controller.delegate = self
        present(controller, animated: true)
        // 尚未選擇照片文字隱藏
        unselectLabel.isHidden = true
    }

    // 設定選擇照片後的動作為顯示圖片及關掉視窗
    func imagePickerController(_: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
        if let image = info[.originalImage] as? UIImage {
            photoImageView.image = image
        }
        dismiss(animated: true)
    }

（三）進入編輯模式（頁面間傳值）

這邊我們設定要傳送給下個頁面，並用全螢幕的方式present。

   @IBAction func startToEdit(_ sender: Any) {
        if let photo = photoImageView.image {
                let st = UIStoryboard(name: "Main", bundle: nil)
                let editVC = st.instantiateViewController(withIdentifier: "EditingViewController") as! EditingViewController
                // 傳遞圖片給 EditingViewController
                editVC.imageViewLoad = photo
                // 設定全螢幕呈現模式
                editVC.modalPresentationStyle = .fullScreen
                self.present(editVC, animated: true)
            }
    }

來說說接圖片的下一頁：

// 設定接前頁傳值資料
    var imageViewLoad: UIImage?
// 在viewDidLoad的地方
override func viewDidLoad() {
        super.viewDidLoad()
 // 設定顯示傳值過來的圖片
 photoImageView.image = imageViewLoad
}

右上角加了叉按鈕可以dismiss取消整個畫面。

 @IBAction func dismiss(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }