#11 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片(hw#4–1)

先請 AI 幫忙畫張畫，這次請 playgroundai 來幫忙，再找個相框的圖片，

import UIKit

//載入圖片
let autumnImageView=UIImageView(image: UIImage(named: "autumn.png"))
let borderImageView=UIImageView(image: UIImage(named: "border.png"))

//設定 ImageView 圖片的位置大小
autumnImageView.frame=CGRect(x: 0, y: 0, width: 800, height: 800)
borderImageView.contentMode = .scaleAspectFill
borderImageView.frame=CGRect(x: 40, y: 40, width: 720, height: 720)

邊框配色找了個金黃色來搭配一下，把二張圖片用 addSubview 組合在一起。

//增加景色圖片的邊框顏色(金黃色)及大小 45, 比較厚一點
autumnImageView.layer.borderWidth = 45
autumnImageView.layer.borderColor = CGColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.5)
autumnImageView.layer.cornerRadius = 50
autumnImageView.clipsToBounds = true

//增加相框圖片的邊框顏色(金黃色)及大小，比較細一點
borderImageView.layer.borderWidth = 5
borderImageView.layer.borderColor = CGColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.9)
borderImageView.layer.cornerRadius = 20
borderImageView.clipsToBounds = true

//組合二張圖片
autumnImageView.addSubview(borderImageView)

預覽圖：

接著我們加上文字，找首適合的詩詞來配一下，王維《山居秋暝》：空山新雨後，天氣晚來秋。明月松間照，清泉石上流。

//加上文字
let messageLabel = UILabel(frame: CGRect(x: 80, y: 630, width: 380, height: 88))
messageLabel.text = " 空山新雨後，天氣晚來秋。\n 明月松間照，清泉石上流。"
messageLabel.textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
messageLabel.backgroundColor = UIColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.5)
messageLabel.font = UIFont.systemFont(ofSize: 28)
messageLabel.numberOfLines = 2
messageLabel.textAlignment = .center
messageLabel.layer.borderWidth = 3
messageLabel.layer.borderColor = CGColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.9)
messageLabel.layer.cornerRadius = 30
messageLabel.clipsToBounds = true
autumnImageView.addSubview(messageLabel)

接下來我們想在圖片的四周加上一圈楓葉，我們再建一個UIView來組合圖片跟楓葉。用程式計算讓楓葉的圖片可以圍著 UIView 邊緣貼圖，並隨機產生旋轉角度

// 創建一個新的 UIView
let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 800, height: 800))

// 加入 leaf.png 到 containerView 的四周
let iconSize = 50
let rowCount = 16
let columnCount = 16

// 將 autumnImageView 加入到 containerView 中
containerView.addSubview(autumnImageView)

// 計算 leafImageView 的間距
let availableWidth = Int(containerView.frame.width) - (rowCount - 1) * iconSize
let availableHeight = Int(containerView.frame.height) - (columnCount - 1) * iconSize

let spacingX = availableWidth / (rowCount - 1)
let spacingY = availableHeight / (columnCount - 1)

// 在四周添加葉子
for i in 0..<rowCount {
    for j in 0..<columnCount {
        // 檢查是否在四周邊界
        let isEdge = i == 0 || i == rowCount - 1 || j == 0 || j == columnCount - 1
        if isEdge {

            let leafImageView = UIImageView(image: UIImage(named: "leaf.png"))
            leafImageView.alpha = 0.7 // 設定透明度
            leafImageView.frame = CGRect(x: iconSize * i + Int(autumnImageView.frame.origin.x),
                                         y: iconSize * j + Int(autumnImageView.frame.origin.y),
                                         width: iconSize,
                                         height: iconSize)

            // 隨機產生旋轉角度
            let randomRotation = CGFloat.random(in: 0...(2 * .pi))
            leafImageView.transform = CGAffineTransform(rotationAngle: randomRotation)

            containerView.addSubview(leafImageView)
        }
    }
}

最後卡片成品圖：

這次程式包含的功能：

• 在 playground 中加入圖片
• 使用 addSubview 組合照片
• 設定圖片的邊框與圓角
• 使用 UILabel 設定文字
• 使用迴圈重複 emoji或圖片
• 使用 CGAffineTransform 讓 emoji 旋轉
• 變更圖片顏色、背景色或透明度

參考：

# 142 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片

＃9 使用圖片 / 文字 / emoji / 邊框 / 圓角製作漂亮卡片

Playground - Nature

婚禮金色邊框裝飾, 金色邊框, 巴洛克, 裝飾婚禮素材圖案，PSD和PNG圖片免費下載

【附錄01】後續探索---圖像類AI工具：playgroundai、Leonardo.ai - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天