#7 製作漂亮的寶可夢卡片
Published in
16 min readJul 19, 2023
使用 XCode Playground 建立 UIImageView, UILabel, AttributedString 的 UILabel 元件
設定 borderWidth(邊框), backgroundColor(背景顏色), font(字體樣式), frame(框架設定), contentMode(圖片顯示模式), cornerRadius(角落圓角)
使用 CGAffineTransform 旋轉 UILabel，及 addSubview 疊加所有元件
一張卡片的背後有著說不清的辛苦🤣
先來張成果圖，找了張寶可夢的卡牌來做這次作業的練習
使用 UIImeageView 分別加入２張大底圖以及伊布的個人照
let bakegroundView = UIImageView(image: UIImage(named: "bakeground.jpg"))
//將檔圖片案以 UIImageView 建立放入 bakegroundView 內
bakegroundView.frame = CGRect(x: 0, y: 0, width: 200, height: 300)
//設定圖片位置及大小
bakegroundView.layer.cornerRadius = 10
//對圖片視圖做圓角修飾
let secondBakegroundView = UIImageView(image: UIImage(named: "secondBakeground.png"))
secondBakegroundView.frame = CGRect(x: 10, y: 10, width: 180, height: 280)
secondBakegroundView.layer.borderWidth = 1
//設定邊框粗度
secondBakegroundView.layer.cornerRadius = 5
let idImageview = UIImageView(image: UIImage(named: "IDImage.png"))
idImageview.frame = CGRect(x: 20, y: 35, width: 160, height: 110)
idImageview.contentMode = .scaleAspectFit
//圖片保持原比例方式縮放至視圖的大小
idImageview.layer.borderWidth = 1
let coverView = UIImageView(image: UIImage(named: "cover.png"))
coverView.frame = CGRect(x: 20, y: 35, width: 160, height: 110)
coverView.alpha = 0.3
//設定透明度來做大頭貼遮色美化效果建立 UILabel 文字標籤
let cardLabel = UILabel(frame: CGRect(x: 7, y: 15.5, width: 40, height: 14))
//建立 UILabe，設定位置與長寬
cardLabel.layer.borderWidth = 1
cardLabel.backgroundColor = UIColor(red: 181/255, green: 181/255, blue: 181/255, alpha: 1)
cardLabel.layer.cornerRadius = 3
cardLabel.text = "基礎"
//寫入標籤的文字內容
cardLabel.textAlignment = .center
//標籤內文對齊方式為置中對齊
cardLabel.font = UIFont.systemFont(ofSize: 10)
//修改字體大小建立 AttributedString 的 UILabel
var hpContent = AttributedString()
//先建立 AttributedString 實例
var hpName = AttributedString("HP")
hpName.font = .boldSystemFont(ofSize: 7)
hpContent += hpName
//建立新的 AttributedString 類型字串，改變字體大小後加入 hpContent
var hpNumber = AttributedString("60")
hpNumber.font = .boldSystemFont(ofSize: 15)
hpContent += hpNumber
//再新增其他字型字串後加入
var starEmoji = AttributedString("⭐️")
starEmoji.font = .boldSystemFont(ofSize: 20)
hpContent += starEmoji
//加入 Emoji 的文字符號字串
let hpLabel = UILabel()
//建立空的 UILabel
hpLabel.attributedText = NSAttributedString(hpContent)
//將構建的 hpContent 設置為 hpLabel 的 attributedText，
//這樣 UILabel 就會以 Attributed 文本的形式顯示所存入的內容。
hpLabel.frame.size = hpLabel.sizeThatFits(CGSize(width: 60, height: 20))
hpLabel.frame.origin = .init(x: 133, y: 11)
//設置 hpLabel 的位置用 function 做 Emoji ❤️的 UILabel，方便直接陣列生出無數個心，使用 CGAffineTransform 讓愛心旋轉
func loveUILabel (_ xPosition: Double, _ yPosition: Double, angle :Double) -> UILabel {
//建立 function，傳入座標位置與愛心旋轉角度
let loveLable = UILabel(frame: CGRect(x: xPosition, y: yPosition, width: 10, height: 10))
loveLable.text = "❤️"
loveLable.font = UIFont.systemFont(ofSize: 8)
loveLable.transform = CGAffineTransform(rotationAngle: .pi / 180 * angle)
bakegroundView.addSubview(loveLable)
return loveLable
//回傳名為loveLabel 的 UILabel
}For … Loop 生成無數顆散亂的❤️
for v in 0 ... 1 {
//總共產生２牌的愛心
for i in 0 ... 12 {
loveUILabel(20 + Double(i * 12), 160 + Double(v * 115), angle: Double.random(in: 0 ... 360))
//Ｘ起始位置20，每個愛心間隔 12，Ｙ起始位置為 160，第二次往下移動 115
//角度隨機在 0~360 度隨機生成
}
}最後來一段所有程式碼
import UIKit
let bakegroundView = UIImageView(image: UIImage(named: "bakeground.jpg"))
bakegroundView.frame = CGRect(x: 0, y: 0, width: 200, height: 300)
bakegroundView.layer.cornerRadius = 10
let secondBakegroundView = UIImageView(image: UIImage(named: "secondBakeground.png"))
secondBakegroundView.frame = CGRect(x: 10, y: 10, width: 180, height: 280)
secondBakegroundView.layer.borderWidth = 1
secondBakegroundView.layer.cornerRadius = 5
let idImageview = UIImageView(image: UIImage(named: "IDImage.png"))
idImageview.frame = CGRect(x: 20, y: 35, width: 160, height: 110)
idImageview.contentMode = .scaleAspectFit
idImageview.layer.borderWidth = 1
let coverView = UIImageView(image: UIImage(named: "cover.png"))
coverView.frame = CGRect(x: 20, y: 35, width: 160, height: 110)
coverView.alpha = 0.3
let cardLabel = UILabel(frame: CGRect(x: 7, y: 15.5, width: 40, height: 14))
cardLabel.layer.borderWidth = 1
cardLabel.backgroundColor = UIColor(red: 181/255, green: 181/255, blue: 181/255, alpha: 1)
cardLabel.layer.cornerRadius = 3
cardLabel.text = "基礎"
cardLabel.textAlignment = .center
cardLabel.font = UIFont.systemFont(ofSize: 10)
let nameLabel = UILabel(frame: CGRect(x: 40, y: 13, width: 60, height: 20))
nameLabel.text = "伊布"
nameLabel.textAlignment = .center
nameLabel.font = UIFont.boldSystemFont(ofSize: 18)
var hpContent = AttributedString()
var hpName = AttributedString("HP")
hpName.font = .boldSystemFont(ofSize: 7)
hpContent += hpName
var hpNumber = AttributedString("60")
hpNumber.font = .boldSystemFont(ofSize: 15)
hpContent += hpNumber
var starEmoji = AttributedString("⭐️")
starEmoji.font = .boldSystemFont(ofSize: 20)
hpContent += starEmoji
let hpLabel = UILabel()
hpLabel.attributedText = NSAttributedString(hpContent)
hpLabel.frame.size = hpLabel.sizeThatFits(CGSize(width: 60, height: 20))
hpLabel.frame.origin = .init(x: 133, y: 11)
let idNoLabel = UILabel(frame: CGRect(x: 20, y: 145, width: 160, height: 10))
idNoLabel.text = "全國圖鑑No.133 進化寶可夢 身高：0.3m 體重：6.5kg"
idNoLabel.font = UIFont.systemFont(ofSize: 5)
idNoLabel.backgroundColor = UIColor(red: 181/255, green: 181/255, blue: 181/255, alpha: 1)
idNoLabel.layer.borderWidth = 1
idNoLabel.textAlignment = .center
let redBar = UIView(frame: CGRect(x: 20, y: 175, width: 35, height: 12))
redBar.backgroundColor = UIColor(red: 156/255, green: 24/255, blue: 18/255, alpha: 0.7)
redBar.layer.cornerRadius = 6
redBar.layer.borderWidth = 1
let redBarLabel = UILabel(frame: CGRect(x: 20, y: 175, width: 35, height: 12))
redBarLabel.text = "特 性"
redBarLabel.font = UIFont.systemFont(ofSize: 10)
redBarLabel.textColor = .white
redBarLabel.textAlignment = .center
let redBarText = UILabel(frame: CGRect(x: 60, y: 172, width: 60, height: 18))
redBarText.text = "能量進化"
redBarText.font = UIFont.boldSystemFont(ofSize: 12)
redBarText.textColor = UIColor(red: 156/255, green: 24/255, blue: 18/255, alpha: 1)
let redBarDiscribe = UILabel(frame: CGRect(x: 20, y: 185, width: 160, height: 50))
redBarDiscribe.text = "在自己的回合，當從自己的手牌將基本能量附於這隻寶可夢身上時，可使用１次。從自己的牌庫選擇１張與附上能量相同屬性、從這隻寶可夢進化而來的卡，放置於這隻寶可夢身上並完成進化。並且重洗牌庫。"
redBarDiscribe.font = UIFont.boldSystemFont(ofSize: 7)
redBarDiscribe.numberOfLines = 0
let starEmojiText = UILabel(frame: CGRect(x: 20, y: 240, width: 20, height: 20))
starEmojiText.text = "⭐️"
let starBarText = UILabel(frame: CGRect(x: 60, y: 242, width: 60, height: 18))
starBarText.text = "快速抽出"
starBarText.font = UIFont.boldSystemFont(ofSize: 12)
starBarText.textColor = UIColor(red: 156/255, green: 24/255, blue: 18/255, alpha: 1)
let starBarDiscribe = UILabel(frame: CGRect(x: 20, y: 240, width: 160, height: 50))
starBarDiscribe.text = "擲１次硬幣若為正面，則從自己的牌庫抽出１張。"
starBarDiscribe.font = UIFont.boldSystemFont(ofSize: 7)
starBarDiscribe.numberOfLines = 0
func loveUILabel (_ xPosition: Double, _ yPosition: Double, angle :Double) -> UILabel {
let loveLable = UILabel(frame: CGRect(x: xPosition, y: yPosition, width: 10, height: 10))
loveLable.text = "❤️"
loveLable.font = UIFont.systemFont(ofSize: 8)
loveLable.transform = CGAffineTransform(rotationAngle: .pi / 180 * angle)
bakegroundView.addSubview(loveLable)
return loveLable
}
bakegroundView.addSubview(secondBakegroundView)
bakegroundView.addSubview(idImageview)
bakegroundView.addSubview(cardLabel)
bakegroundView.addSubview(coverView)
bakegroundView.addSubview(nameLabel)
bakegroundView.addSubview(hpLabel)
bakegroundView.addSubview(idNoLabel)
bakegroundView.addSubview(redBar)
bakegroundView.addSubview(redBarLabel)
bakegroundView.addSubview(redBarDiscribe)
bakegroundView.addSubview(redBarText)
bakegroundView.addSubview(starEmojiText)
bakegroundView.addSubview(starBarText)
for v in 0 ... 1 {
for i in 0 ... 12 {
loveUILabel(20 + Double(i * 12), 160 + Double(v * 115), angle: Double.random(in: 0 ... 360))
}
}
bakegroundView.addSubview(starBarDiscribe)
