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

參考文章

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

首先把照片存在 Resources 裡

貼心小提醒：

1. 顏色可以 Google（RGB配色表）但在 Xcode 輸入色碼時，每個色碼後面都要加 /255，才會顯示顏色（例如：red: 153/255, green: 204/255, blue: 255/255）
2. image view 若要顯示圓角效果，clipsToBounds 也要記得設為 true
3. CGAffineTransform 搭配 rotationAngle 旋轉，讓Emoji邊框的圖能旋轉

import UIKit
//顯示圖片 UIImageView
let catImage = UIImage(named: "mimi.JPG")
let catImageView = UIImageView(image: catImage)
catImageView.frame = CGRect(x: 0, y: 0, width: 504, height: 378)
//顯示文字 UILabel
let messageLabel = UILabel(frame: CGRect(x: 170, y: 230, width: 200, height: 30))
messageLabel.text = "我是虎斑貓MIMI"
messageLabel.textColor = UIColor(red: 153/255, green: 204/255, blue: 255/255, alpha: 1)
messageLabel.font = UIFont.systemFont(ofSize: 25)
catImageView.addSubview(messageLabel)
//設定邊框 broderWidth
catImageView.layer.borderWidth = 10
catImageView.layer.borderColor = CGColor(red: 255, green: 0, blue: 128, alpha: 1)
catImageView.layer.cornerRadius = 50
catImageView.clipsToBounds = true
catImageView
//迴圈製作編框(上、下)
for i in 0...9{
let emojiLabel = UILabel(frame: CGRect(x: 20+i*60, y: 20, width: 60, height: 60))
let emojiLabel3 = UILabel(frame: CGRect(x: 20+i*60, y: 300, width: 60, height: 60))
emojiLabel.transform = CGAffineTransform(rotationAngle: .pi/180*35*CGFloat(i))
emojiLabel3.transform = CGAffineTransform(rotationAngle: .pi/180*35*CGFloat(i))
emojiLabel.font = UIFont.systemFont(ofSize: 50)
emojiLabel3.font = UIFont.systemFont(ofSize: 50)
if i%2 == 0 {
emojiLabel.text = "🐯"
emojiLabel3.text = "🐯"
}
else{
emojiLabel.text = "⭐️"
emojiLabel3.text = "⭐️"
}
catImageView.addSubview(emojiLabel)
catImageView.addSubview(emojiLabel3)
}
//迴圈製作邊框(左、右）
for i in 0...3{
let emojiLabel1 = UILabel(frame: CGRect(x: 20, y: 100+i*70, width: 60, height: 60))
let emojiLabel2 = UILabel(frame: CGRect(x: 440, y: 100+i*70, width: 60, height: 60))
emojiLabel1.transform = CGAffineTransform(rotationAngle: .pi/180*35*CGFloat(i))
emojiLabel2.transform = CGAffineTransform(rotationAngle: .pi/180*35*CGFloat(i))
emojiLabel1.font = UIFont.systemFont(ofSize: 50)
emojiLabel2.font = UIFont.systemFont(ofSize: 50)
if i%2 == 0 {
emojiLabel1.text = "🐯"
emojiLabel2.text = "🐯"
}
else {
emojiLabel1.text = "⭐️"
emojiLabel2.text = "⭐️"
}
catImageView.addSubview(emojiLabel1)
catImageView.addSubview(emojiLabel2)
}