# 142 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片/梗圖
Published in
18 min readMar 12, 2021
模仿 Swift Playground 的 Flashy Photos，在 Xcode playground 製作有趣的卡片送給喜歡的人。
使用 addSubview 組合畫面
顯示圖片的 UIImageView
import UIKit
let catImage = UIImage(named: "cat.jpg")
let catImageView = UIImageView(image: catImage)
利用 UIView 的 property 調整元件的基本特性
由於 label，image view 等各種 UI 元件都繼承 UIView，所以它們都具有 UIView 的 property。
- 大小位置: frame
catImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 734)
若是 frame 的寬高比例和圖片原本的比例不合，將造成圖片變形。
若想圖片維持比例不變形，可設定 property contentMode。
- 維持比例但上下或左右留白。
catImageView.contentMode = .scaleAspectFit
2. 維持比例並填滿 frame 的框框，超出的部分被切掉。
catImageView.contentMode = .scaleAspectFill
- 透明度 : alpha
範圍 0 ~ 1。
catImageView.alpha = 0.5
顯示文字的 UILabel
- 文字 : text
let messageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 140, height: 30))
messageLabel.text = "我們一起學貓叫"
- 文字顏色 : textColor
messageLabel.textColor = UIColor(red: 1, green: 128/255, blue: 0, alpha: 1)
- 文字大小 : font
messageLabel.font = UIFont.systemFont(ofSize: 25)控制邊框寬度，邊框顏色， 圓角的 CALayer
- 邊框寬度 : borderWidth
catImageView.layer.borderWidth = 10
- 邊框顏色 : borderColor
catImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)
- 圓角 : cornerRadius
catImageView.layer.cornerRadius = 50
catImageView.clipsToBounds = trueimage view 若要顯示圓角效果，clipsToBounds 也要記得設為 true。
加入 emoji
let starLabel = UILabel(frame: CGRect(x: 60, y: 60, width: 30, height: 30))
starLabel.text = "⭐️"
starLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(starLabel)
旋轉
從 UIView 的 property transform 設定，傳入旋轉的弧度，弧度 .pi 對應角度 180 度，所以角度 45 度是弧度 .pi / 180 * 45。
starLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
範例
已學過 function & 迴圈的同學可進一步簡化程式，以下為尚未使用 function & 迴圈的寫法。
import UIKit
let catImage = UIImage(named: "cat.jpg")
let catImageView = UIImageView(image: catImage)
catImageView.frame = CGRect(x: 0, y: 0, width: 500, height: 367)
let messageLabel = UILabel(frame: CGRect(x: 100, y: 100, width: 200, height: 30))
messageLabel.text = "我們一起學貓叫"
messageLabel.textColor = UIColor(red: 1, green: 128/255, blue: 0, alpha: 1)
messageLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(messageLabel)
catImageView.layer.borderWidth = 10
catImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)
catImageView.layer.cornerRadius = 50
catImageView.clipsToBounds = true
var loveLabel = UILabel(frame: CGRect(x: 30, y: 30, width: 30, height: 30))
loveLabel.text = "👩❤️👨"
loveLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(loveLabel)
loveLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 10)
loveLabel = UILabel(frame: CGRect(x: 450, y: 30, width: 30, height: 30))
loveLabel.text = "👩❤️👩"
loveLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(loveLabel)
loveLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
loveLabel = UILabel(frame: CGRect(x: 30, y: 320, width: 30, height: 30))
loveLabel.text = "👨❤️👨"
loveLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(loveLabel)
loveLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 90)
loveLabel = UILabel(frame: CGRect(x: 450, y: 320, width: 30, height: 30))
loveLabel.text = "👩❤️💋👨"
loveLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(loveLabel)
loveLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 150)
catImageView邊框參考範例
圖片來源: Swift Playground 的 Flashy Photos。已學會迴圈的同學可練習用迴圈製作邊框，已學過亂數的同學可用亂數隨機 emoji 的圖案，大小位置，旋轉等。
梗圖
除了製作卡片，也可以設計梗圖，比方以下 wei Tsao 同學的喵電感應。
利用 sizeToFit & sizeThatFits 讓 label 的大小剛好顯示文字
進階功能
- 利用 AttributedString 實現多種樣式組合的文字。
範例
- 搭配 mask & UIBezierPath 設計特別形狀。
