#練習 “使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片/梗圖”

引用教學文章

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

學習UIImageView 顯示圖片

let greenTeaCakeimage = UIImage(named: "greencake.jpg")
let greenTeaCakeimageView = UIImageView(image: greenTeaCakeimage)

學習UILabel 文字屬性

// 文字內容
messageLabel.text ="Promotions\nMATCHA CAKE"
// 文字顏色
messageLabel.textColor = UIColor(red: 49.0/255.0, green: 117.0/255.0, blue: 160.0/255.0, alpha: 1.0)
// 或是可以使用系統預設字型 並設定文字大小
messageLabel.font = UIFont.systemFont(ofSize: 25, weight: .bold)
// 設定文字位置 置左、置中或置右等等
messageLabel.textAlignment = .center
// 文字行數
messageLabel.numberOfLines = 0

學習for loop

for i in 1...15 {
    let greenTeaLabel = UILabel(frame: CGRect(x: 30 * i, y: 10, width: 30, height: 30))
    greenTeaLabel.text = "🍵" // 設置表情符號
    greenTeaLabel.font = UIFont.systemFont(ofSize: 30) // 設置字體大小
    greenTeaCakeimageView.addSubview(greenTeaLabel) // 將標籤添加到圖片視圖
}

完成品

import UIKit

// 載入綠茶蛋糕圖片並創建 UIImageView
let greenTeaCakeimage = UIImage(named: "greencake.jpg")
let greenTeaCakeimageView = UIImageView(image: greenTeaCakeimage)

// 創建顯示促銷信息的 UILabel
let messageLabel = UILabel(frame: CGRect(x: 330, y: 125, width: 150, height: 300))
messageLabel.text = "Promotions\nMATCHA CAKE" // 設置文字內容，包含換行符
messageLabel.font = UIFont.systemFont(ofSize: 25, weight: .bold) // 設置字體和字重
messageLabel.textColor = UIColor(red: 49.0/255.0, green: 117.0/255.0, blue: 160.0/255.0, alpha: 1.0) // 設置文字顏色
messageLabel.numberOfLines = 0 // 設置允許多行顯示
messageLabel.textAlignment = .center // 設置文字居中對齊

// 將 messageLabel 添加到圖片視圖的子視圖中
greenTeaCakeimageView.addSubview(messageLabel)

// 設置圖片視圖的框架和內容模式
greenTeaCakeimageView.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
greenTeaCakeimageView.contentMode = .scaleAspectFill

// 添加上方綠茶表情標籤
for i in 1...15 {
    let greenTeaLabel = UILabel(frame: CGRect(x: 30 * i, y: 10, width: 30, height: 30))
    greenTeaLabel.text = "🍵" // 設置表情符號
    greenTeaLabel.font = UIFont.systemFont(ofSize: 30) // 設置字體大小
    greenTeaCakeimageView.addSubview(greenTeaLabel) // 將標籤添加到圖片視圖
}

// 添加下方綠茶表情標籤
for i in 1...15 {
    let greenTeaLabel = UILabel(frame: CGRect(x: 30 * i, y: 450, width: 30, height: 30))
    greenTeaLabel.text = "🍵" // 設置表情符號
    greenTeaLabel.font = UIFont.systemFont(ofSize: 30) // 設置字體大小
    greenTeaCakeimageView.addSubview(greenTeaLabel) // 將標籤添加到圖片視圖
}

// 設置圖片視圖的邊框
greenTeaCakeimageView.layer.borderWidth = 10 // 邊框寬度
greenTeaCakeimageView.layer.borderColor = CGColor(red: 0, green: 2, blue: 170/255, alpha: 1) // 邊框顏色

// 返回圖片視圖以供顯示
greenTeaCakeimageView

最後請chatGPT寫註解