#1 HW142 製作卡片

好久沒寫過文字的作業了，凡事起頭難就從 製作漂亮卡片 這個作業開始吧

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

經過北車地下街偶而會看到一些文章小語，就決定借用一下來當作卡片的心靈雞湯吧 🤪

playground 結構說明

1. 參數

使用到UIColor、CGRect、UIFont、CGAffineTransform

//參數
let baseColor = UIColor(red: 1, green: 128/255, blue: 0, alpha: 1)
let bgImageName = "capybara.jpg"
let bgBorderWidth:CGFloat = 2
let bgBorderRadius:CGFloat = 350

let msgColor = baseColor
let msgFont28 = UIFont.systemFont(ofSize: 28)
let msg1Str = "旅行"
let msg1Rect = CGRect(x:100, y: 500, width: 200, height: 30)
let msg2Str = "是為了洗滌靈魂"
let msg2Rect = CGRect(x: 100, y: 550, width: 200, height: 30)
let emojiText = "❤️"
let emojiRect = CGRect(x: 310, y: 550, width: 30, height: 30)
let emojiTransform : CGAffineTransform = CGAffineTransform(rotationAngle: .pi / 180 * 30).concatenating(CGAffineTransform(scaleX: -1, y: 1))

let maskRect = CGRect(x: 0, y: 0, width: 350, height: 771)
let maskColor = UIColor.white
let maskAlpha = 0.8

2. Func

//產生遮罩
func GenMask() -> UIImageView {
    let maskImageView = UIImageView(image: UIImage())
    maskImageView.frame = maskRect
    maskImageView.backgroundColor = maskColor
    maskImageView.alpha = maskAlpha
    return maskImageView
}

//產生心靈雞湯
func GenLabel(size: CGRect, txt: String, txtColor: UIColor=msgColor, txtSize: UIFont=msgFont28) -> UILabel {
    let msgLabel = UILabel(frame: size)
    msgLabel.text = txt
    msgLabel.textColor = txtColor
    msgLabel.font = txtSize
    return msgLabel
}

//底圖邊框樣式
func SetBGImageViewStyle() {
    capybaraImageView.layer.borderWidth = bgBorderWidth
    capybaraImageView.layer.borderColor = baseColor.cgColor
    capybaraImageView.layer.cornerRadius = bgBorderRadius
    capybaraImageView.clipsToBounds = true
}

3. 建立背景圖

let capybaraUIImage = UIImage(named: bgImageName)
let capybaraImageView = UIImageView(image: capybaraUIImage)

為什麼是水豚君呢？看到牠過得這麼悠閒，就決定拿牠來當卡片主角了

話說門票350元也是挺貴的，適合此生只會去一次的旅遊規劃

4. 加入心靈雞湯使用的遮罩

使用到 addSubview

capybaraImageView.addSubview(GenMask())

5. 加入心靈雞湯

本篇文章重點，來點正向正能量的小語

let msg1Label = GenLabel(size: msg1Rect, txt: msg1Str)
capybaraImageView.addSubview(msg1Label)
let msg2Label = GenLabel(size: msg2Rect, txt: msg2Str)
capybaraImageView.addSubview(msg2Label)
let emojiLabel = GenLabel(size: emojiRect, txt: emojiText)
emojiLabel.transform = emojiTransform
capybaraImageView.addSubview(emojiLabel)

6. 設定背景圖樣式

背景圖加入邊框、顏色、圓角

SetBGImageViewStyle()

7. 卡片呈現

各位觀眾上菜了

參考

😜 08_Swift 程式初體驗精簡-1.pdf
😜 09_使用 iOS SDK.pdf
🤪 10_function & class.pdf
🤪 利用 UIView 的 addSubview 將 view 加到另一個 view 上

利用 UIView 的 addSubview 將 view 加到另一個 view 上

😛 利用 CGAffineTransform 縮放，位移，旋轉和鏡像翻轉

利用 UIView 的 addSubview 將 view 加到另一個 view 上

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

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

GitHub 連結

GitHub - goodvt9/HW142