IOS學習06|使用圖片，文字，emoji，邊框 & 圓角 製作漂亮卡片/梗圖

~運用playground製作圖片~

這篇為上一篇的延伸，加入更多調整做出卡片！

IOS學習05|從 playground 調色去背圖片

1.建立去背圖片與背景圖的View

let usamaruImage = UIImage(named: "usamaru1 2")
let usamaruImageView = UIImageView(image: usamaruImage)
let starbkView = UIImage(named: "starbk")
let starbkImageView = UIImageView(image: starbkView)

usamaruImageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
starbkImageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

starbkImageView.addSubview(usamaruImageView)

2.加入文字(label)與邊框(border)

a.文字(label)

文字(label)的內容：範圍大小、內容、字型大小、字體顏色、背景顏色

都設定完畢後再加入至圖片即可～

//label設定
let labelText = UILabel(frame: CGRect(x: 40, y: 35, width: 120, height: 30))
labelText.text = "USAMARU"
labelText.font = UIFont.systemFont(ofSize: 25)
labelText.textColor = UIColor(red: 1, green: 1, blue: 0.4, alpha: 1)
labelText.backgroundColor = UIColor(red: 1, green: 1, blue: 0.4, alpha: 0.3)

//label加入至圖片
starbkImageView.addSubview(labelText)

b.加入emoji

建立方式與文字相似

💡可以透過CGAffineTransform(rotationAngle: ) 改變角度

//emoji設定
var emoji = UILabel(frame: CGRect(x: 20, y: 17, width: 100, height: 100))
emoji.text = "🍥"
emoji.font = UIFont.systemFont(ofSize: 25)

//emoji加入至圖片
starbkImageView.addSubview(emoji)

//emoji設定
emoji = UILabel(frame: CGRect(x: 140, y: 5, width: 100, height: 100))
emoji.text = "🍥"
emoji.font = UIFont.systemFont(ofSize: 25)

//旋轉角度
emoji.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)

//emoji加入至圖片
starbkImageView.addSubview(emoji)

建立完畢並加入emoji後的圖片如下圖所示～

3.設定圓弧邊框(border)

a.設定邊框

starbkImageView.layer.borderWidth = 5
starbkImageView.layer.borderColor = CGColor(red: 0.8, green: 0.3, blue: 0.7, alpha: 1)

b.設定圓弧邊框

設定邊框角度

starbkImageView.layer.cornerRadius = 50

💡設定clipsToBounds，將超出邊框的圖片給切除

starbkImageView.clipsToBounds = true

這樣卡片就完成囉！🥳

參考連結：

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