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

這是一張寫給女兒的卡片

ImageView 設計

首先，將所需的素材丟入 Resources 中，其中圖片 heart.png 有去背處理，且三張圖片大小也調整至長寬相近方便後續作業。

分別宣告三個 ImageView 。

import UIKit

let treeImage = UIImage(named: "tree.jpeg")
let treeImageView = UIImageView(image: treeImage)
treeImageView.alpha = 0.3

let babyImage = UIImage(named: "baby.jpg")
let babyImageView = UIImageView(image: babyImage)
babyImageView.alpha = 0.9

let heartImage = UIImage(named: "heart.png")
let heartImageView = UIImageView(image: heartImage)
heartImageView.frame = CGRect(x: 0, y: -40, width: 400, height: 500)

利用 Mask 將 heart 沒去背(粉紅色)的部分顯示出 baby 的圖片。

babyImageView.mask = heartImageView

利用 mask 設計特別形狀的圖片

因背景想秀出 tree，此時需要再宣告一次 heart 做為第四的 ImageView 。同時將 heartImageView2 的背景設定為 clear。
heartImageView2 與 heartImageView 的位置、大小的框架需一樣才能完美疊圖，在 frame 的部分在輸入一次 CGRect(x: 0, y: -40, width: 400, height: 500)，或直接打上 heartImageView.frame。

let heartImageView2 = UIImageView(image: heartImage)
heartImageView2.frame = heartImageView.frame
heartImageView2.backgroundColor = UIColor.clear

接下來就是在 tree 上，利用 addSubview 將 heartImageView2 套上去。
顏色淺淺的是因 tree 有調整 alpha 值。

treeImageView.addSubview(heartImageView2)

從 playground 調色去背圖片

接著讓上面兩張加工過的圖進行疊圖變為一張。

let backgroundaView = UIView(frame: treeImageView.frame)
backgroundaView.addSubview(treeImageView)
backgroundaView.addSubview(babyImageView)

Label 設計

宣告一個 Label。
messageLabel.text：Label 顯示的文字內容。
messageLabel.textColor：Label 顯示的文字顏色。
messageLabel.font：Label 顯示的文字大小、字體。
messageLabel.numberOfLines：Label 顯示的文字行數，值 0 為無限制。

let messageLabel = UILabel(frame: CGRect(x: 15  , y: 370, width: 0, height: 0))
messageLabel.text = "My dear daughter:\nOne day, I counted your fingers and kissed each one.One day, we crossed the street, and you held my hand tight.Though I may not often say it, I do love you dearly.\nI love you three thousand.\nYours ever\nKai.W"
messageLabel.textColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
messageLabel.font = UIFont(name: "Snell Roundhand Bold", size: 20)
messageLabel.numberOfLines = 0

呼叫 sizeThatFits，傳入 CGSize(width: 360, height: 0)，計算 label 寬度 360 時容納文字的理想尺寸。

let size = messageLabel.sizeThatFits(CGSize(width: 360, height: 0))
messageLabel.frame.size = size
backgroundaView.addSubview(messageLabel)

利用 sizeToFit & sizeThatFits 讓 label 的大小剛好顯示文字

邊框 & 圓角製作

接著製作邊匡及圓角，值得一提的是，CGColor 中並不存在 UIColor 才有的systemOrange，因此將 CGColor 改為 UIColor。但改 UIColor 後仍然報錯，往前查看 borderColor 型別為 CGcolor，為了讓“＝”號兩邊具有相同型別，則須在 systemOrange 後面再補上 .cgColor。

backgroundaView.layer.borderWidth = 8
backgroundaView.layer.borderColor = UIColor.systemOrange.cgColor
backgroundaView.layer.cornerRadius = 50
backgroundaView.clipsToBounds = true

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

從型別 A 的東西得到型別 B 的東西

Emoji 設計

因卡片設計的上、左、右方向都偏滿格，所以 emoji 的設計只僅放在卡片最底部。主要利用 function 讓程式自動產生九個愛心，同時為了不死板也加入了讓愛心 360度 random 旋轉的程式碼。

for i in 1...9 {
    let loveLabel = UILabel(frame: CGRect(x: i*40, y: 580, width: 0, height: 0))
    loveLabel.text = "❤️"
    loveLabel.font = UIFont.systemFont(ofSize: 20)
    loveLabel.transform = CGAffineTransform(rotationAngle: CGFloat.random(in: 0...(.pi*2)))
    loveLabel.sizeToFit()
    backgroundaView.addSubview(loveLabel)

#8 使用mask/邊框 /圓角製作漂亮卡片

看似冷冰冰的程式碼其實承載著很重的父愛。

畢竟是第一次幫女兒做卡片，所以想一併存上 GitHub 留念。

GitHub - z1191010/MyPlayground_Demo.playground

如何將 Playground 上傳到 GitHub

孩子，願你平安健康長大。

I love you three thousand.