#8 使用mask/邊框 /圓角製作漂亮卡片
這份作業練習了
- CGAffineTransform的位移、旋轉、縮放
- 用mask做出特別形狀的圖片
- 圖片邊框/圓角設定
因為現在是秋天所以用楓葉當主題,主題為一張楓葉照片,並用楓葉輪廓做mask,再加上楓葉的邊框,以及最能代表秋天的松鼠。
首先先將素材匯入Playground的Resources中,並建立兩個ImageView,分別是楓葉照片及要用來遮罩的楓葉輪廓圖片。
let momijiImageView = UIImageView(image: UIImage(named: "momiji"))
let maskImageView = UIImageView(image: UIImage(named: "leaf-mask"))
將楓葉照片調整為跟遮罩輪廓圖片一樣的大小,再用.mask進行遮罩。
momijiImageView.frame = maskImageView.frame
momijiImageView.mask = maskImageView
momijiImageView
先讀取上圖的frame,建立一個比上圖寬高各大60的cardView,並把完成遮罩後的圖片用addSubview貼上去。
var frame = momijiImageView.frame
frame = CGRect(x: 0, y: 0, width: frame.width + 60, height: frame.height + 60)
let cardView = UIView(frame: frame)
cardView.backgroundColor = UIColor(red: 0.97, green: 0.89, blue: 0.78, alpha: 1.00)
cardView.addSubview(momijiImageView)
楓葉不在正中央,因此用transForm調整位置,將楓葉移至中央。
momijiImageView.transform = CGAffineTransform.identity.translatedBy(x: 30, y: 30)
用迴圈製作楓葉邊框,這邊有用到random讓每片楓葉的角度隨機產生。
let iconSize = 30
for i in 0...10 {
let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
mapleLeafImageView.frame = CGRect(x: iconSize*i, y: 0, width: iconSize, height: iconSize)
mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
cardView.addSubview(mapleLeafImageView)
}
for i in 1..<10 {
let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
mapleLeafImageView.frame = CGRect(x: 0, y: i*iconSize, width: iconSize, height: iconSize)
mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
cardView.addSubview(mapleLeafImageView)
}
for i in 1..<10 {
let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
mapleLeafImageView.frame = CGRect(x: iconSize*10, y: i*iconSize, width: iconSize, height: iconSize)
mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
cardView.addSubview(mapleLeafImageView)
}
for i in 0...10 {
let mapleLeafImageView = UIImageView(image: UIImage(named: "maple-leaf"))
mapleLeafImageView.frame = CGRect(x: iconSize*i, y: iconSize*10, width: iconSize, height: iconSize)
mapleLeafImageView.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
cardView.addSubview(mapleLeafImageView)
在右下角放上吃樹果的松鼠並調整角度。
let acornImageView = UIImageView(image: UIImage(named: "acorn"))
acornImageView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
acornImageView.transform = CGAffineTransform.identity.translatedBy(x: 200, y: 200).rotated(by: -10 * (.pi/100))
cardView.addSubview(acornImageView)
let squirrelImageView = UIImageView(image: UIImage(named: "squirrel"))
squirrelImageView.frame = CGRect(x: 0, y:0, width: 200, height: 200)
squirrelImageView.transform = CGAffineTransform.identity.translatedBy(x: 240, y: 230).rotated(by: 20 * (.pi/180))
cardView.addSubview(squirrelImageView)
調整卡片邊框寬度及顏色,這邊顏色偷懶直接用systemBrown。
cardView.layer.borderWidth = 10
cardView.layer.borderColor = UIColor.systemBrown.cgColor
將卡片加上圓角,完成。
cardView.layer.cornerRadius = 30
cardView.clipsToBounds = true
程式碼筆記
位移、旋轉及縮放
CGAffineTransform.identity.translatedBy(x: , y: )
CGAffineTransform.identity..rotated(by: )
CGAffineTransform.identity.scaledBy(x: , y: )
Mask圖片
imageView.mask = maskImageView
(主要圖片.mask = 去背後的輪廓圖片)
View圓角設定
cardView.layer.cornerRadius = 10
cardView.clipsToBounds = true
View邊框設定
view.layer.borderWidth = 10
view.layer.borderColor = UIColor