#5 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片/梗圖_中職啦啦隊

前陣子中華職棒明星賽剛結束，當時六隊啦啦隊一起表演的畫面實在很香～不是，是令人印象深刻啦，剛好看到這個作業，就拿來當做練習的主題啦。練習與熟悉 UIView和UILabel的一些屬性和應用。

中職明星賽啦啦隊陣容

1.先找一張球場的圖案當背景，並修改邊框的寬度、顏色和圓角。

//設定背景、邊框、圓角
let backgroundImageView = UIImageView(image: UIImage(named: "basefield.jpg"))
backgroundImageView.contentMode = .scaleAspectFill
backgroundImageView.frame = CGRect(x: 0, y: 0, width: 900, height: 600)
backgroundImageView.layer.borderWidth = 10
backgroundImageView.layer.borderColor = CGColor(red: 255/255, green: 192/255, blue: 203/255, alpha: 1)
backgroundImageView.layer.cornerRadius = 50
backgroundImageView.clipsToBounds = true

2.放上一張去背的啦啦隊圖片

//設定啦啦隊圖片
let cheerLeadingImage = UIImage(named: "cheerleading.png")
let cheerLeadingImageView = UIImageView(image: cheerLeadingImage)
cheerLeadingImageView.contentMode = .scaleAspectFit
cheerLeadingImageView.frame = CGRect(x: 150, y: 150, width: 600, height: 400)
backgroundImageView.addSubview(cheerLeadingImageView)

3.用迴圈的方式新增emoji圖案，我這邊設定一個label的寬跟高50*50，背景圖900*600，因為上下左右各留25的空間，所以剩850*550

寬：850 / 50 = 17 (可以畫17個愛心)

高：550 / 50 = 11 (可以畫11個愛心)

使用CGAffineTransform + .random讓愛心可以隨機轉角度。

//用迴圈在邊匡顯示emoji圖案
for i in 1...11{
    for j in 1...17 {
        if i == 1 || j == 1 || i == 11 || j == 17 {
            let loveLabel=UILabel(frame: CGRect(x: 25 + 50 * (j - 1), y: 25 + 50 * (i - 1), width: 50, height: 50))
            loveLabel.text = "🩷"
            loveLabel.font = UIFont.systemFont(ofSize: 40)
            loveLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * .random(in: 0...359))
            backgroundImageView.addSubview(loveLabel)
        }
    }
}

4.最後再加上一些文字，就完成啦！

//設定文字內容
var messageLabel = UILabel(frame: CGRect(x: 80, y: 80, width: 10, height: 10))
messageLabel.text = "2024中職明星賽"
messageLabel.textColor = UIColor(red: 25/255, green: 25/255, blue: 112/255, alpha: 1)
messageLabel.font = UIFont.systemFont(ofSize: 45)
messageLabel.sizeToFit()
backgroundImageView.addSubview(messageLabel)

messageLabel = UILabel(frame: CGRect(x: 150, y: 160, width: 10, height: 10))
messageLabel.text = "史上最香開場舞!!"
messageLabel.textColor = .red
messageLabel.font = UIFont.systemFont(ofSize: 50)
messageLabel.sizeToFit()
messageLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * -15)
backgroundImageView.addSubview(messageLabel)

messageLabel = UILabel(frame: CGRect(x: 640, y: 150, width: 10, height: 10))
messageLabel.text = "真香～"
messageLabel.textColor = UIColor(red: 255/255, green: 0/255, blue: 255/255, alpha: 1)
messageLabel.font = UIFont.systemFont(ofSize: 50)
messageLabel.sizeToFit()
messageLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 20)
backgroundImageView.addSubview(messageLabel)

這樣圖片、文字、emoji、邊框、圓角就都有練習到啦！真香啊～

Reference:

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