Published in
5 min readJun 2, 2024
#練習 “使用圖片,文字,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寫註解