#swift-5 使用圖片、文字、emoji、邊框 、圓角製作抓寶卡片

語法筆記

圖片遮罩
imageView.mask = maskImageView
(將imageView顯示於maskImageView非去背的部分)

圖片處理
CGAffineTransform.identity.translatedBy(x: , y: ) //位移
CGAffineTransform.identity.rotated(by: ) //旋轉
CGAffineTransform.identity.scaledBy(x: , y: ) //縮放
CGAffineTransform.identity.translatedBy(x: , y: ).scaledBy(x: , y: ).rotated(by: ) //結合位移、縮放、旋轉
CGAffineTransform(scaleX: -1, y: 1) //左右鏡像
CGAffineTransform(scaleX: 1, y: -1) //上下鏡像

View邊框設定
view.layer.borderWidth = 20
view.layer.borderColor = UIColor

View圓角設定
cardView.layer.cornerRadius = 30
cardView.clipsToBounds = true

開始製作

建立Playground，並將圖片放至的Resources資料夾下

建立兩個ImageView (要抓的寶可夢 及 寶貝球遮罩）

let duckImageView = UIImageView(image: UIImage(named: "duck"))
let maskImageView = UIImageView(image: UIImage(named: "BabyBall"))

將圖片調整為遮罩圖片的大小，再用.mask進行遮罩。

duckImageView.frame = maskImageView.frame
duckImageView.mask = maskImageView

讀取原圖的frame，建立一個比原圖寬高各大60的cardView，再建立一個高為cardView一半的紅色View

//設定大小
var cardFrame =  duckImageView.frame
cardFrame = CGRect(x: 0, y: 0, width: cardFrame.width + 60, height: cardFrame.height + 30)
let cardView = UIView(frame: cardFrame)
//設定背景顏色(白)
cardView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1.00)
//設定大小
var redFrame = CGRect(x: 0, y: 0, width: cardFrame.width, height: cardFrame.height/2)
let redView = UIView(frame: redFrame)
//設定背景顏色(紅)
redView.backgroundColor = UIColor(red: 244/255, green: 66/255, blue: 54/255, alpha: 1.00)

將紅色View用addSubview貼至cardView，再把已遮罩圖片貼上。

cardView.addSubview(redView)
cardView.addSubview(duckImageView)

用transForm將寶可夢移到想要的位置。

duckImageView.transform = CGAffineTransform.identity.translatedBy(x: 30, y: 20)

用迴圈製作寶貝球邊框，並用random隨機產生角度及圖片。

let iconSize = 60
for i in 0...13 {
  let babyBallForDecorateImageView = UIImageView(image: UIImage(named: "babyBall_" + "\(Int.random(in: 1...5))" ))
  babyBallForDecorateImageView.frame = CGRect(x: iconSize*i, y: 10, width: iconSize, height: iconSize)
  babyBallForDecorateImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
  cardView.addSubview(babyBallForDecorateImageView)
}
for i in 1..<12 {
  let babyBallForDecorateImageView = UIImageView(image: UIImage(named: "babyBall_" + "\(Int.random(in: 1...5))" ))
  babyBallForDecorateImageView.frame = CGRect(x: 10, y: i*iconSize, width: iconSize, height: iconSize)
  babyBallForDecorateImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
  cardView.addSubview(babyBallForDecorateImageView)
}
for i in 1..<12 {
  let babyBallForDecorateImageView = UIImageView(image: UIImage(named: "babyBall_" + "\(Int.random(in: 1...5))" ))
  babyBallForDecorateImageView.frame = CGRect(x: iconSize*12, y: i*iconSize, width: iconSize, height: iconSize)
  babyBallForDecorateImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
  cardView.addSubview(babyBallForDecorateImageView)
}
for i in 0...10 {
  let babyBallForDecorateImageView = UIImageView(image: UIImage(named: "babyBall_" + "\(Int.random(in: 1...5))" ))
  babyBallForDecorateImageView.frame = CGRect(x: i*iconSize+63, y: iconSize*12-35, width: iconSize, height: iconSize)
  babyBallForDecorateImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
  cardView.addSubview(babyBallForDecorateImageView)
}

放上屬性徽章。

let badgeImageView = UIImageView(image: UIImage(named: "water"))
badgeImageView.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
badgeImageView.transform =    CGAffineTransform.identity.translatedBy(x: 20, y: 20)
cardView.addSubview(badgeImageView)

調整卡片邊框寬度及顏色。

cardView.layer.borderWidth = 20
cardView.layer.borderColor = UIColor(red: 0, green: 177/255, blue: 1, alpha: 1).cgColor

設定圓角，大功告成！

cardView.layer.cornerRadius = 30
cardView.clipsToBounds = true