HW4: สร้างการ์ดที่สวยงามด้วย Xcode Playground (การมอบหมายหลายรายการ)

這次用到的學習point(Coding)
＊顯示底層圖片的 UIImageView
＊利用 UIView 的 property 調整元件的基本特性
＊利用控制邊框寬度，邊框顏色， 圓角的 CALayer
＊UIImageView 加入顯示特別文字樣式的 UILabel(AttributedString ＆ NSAttributedString)
＊UIImageView 加入包含圖片的文字字串的 UILabel(NSTextAttachment)
＊利用 sizeToFit 讓 label 的大小剛好顯示文字(單行＆多行)
＊UIImageView 加入 emoji UILabel 並旋轉
＊利用 mask 在 UIImageView 加入特別形狀的 UIImageView
＊UIImageView 加入利用 iOS SDK 生成的當前時間 UILabel
＊圖片去背(從 Mac 的 Preview App )

import UIKit
import Foundation

//***顯示圖片的 UIImageView, UIImage 為 "sky.png"
let skyImageView = UIImageView(image: UIImage(named: "sky.png"))
//利用 UIView 的 property 調整元件的基本特性
skyImageView.frame = CGRect(x: 0, y: 0, width: 900, height: 600)//大小位置: frame
//維持比例不變形可設定 property contentMode
//.scaleAspectFit: 維持比例但上下或左右留白
//.scaleAspectFill: 維持比例並填滿 frame 的框框,超出的部分被切掉
skyImageView.contentMode = .scaleAspectFill
skyImageView.alpha = 0.8//透明度 : alpha 範圍 0 ~ 1

//***控制邊框寬度，邊框顏色， 圓角的 CALayer
skyImageView.layer.borderWidth = 15//邊框寬度 : borderWidth
skyImageView.layer.borderColor = UIColor(red: 106/255, green: 185/255, blue: 252/255, alpha: 1).cgColor//邊框顏色 : borderColor
//圓角 : cornerRadius & image view 若要顯示圓角效果 clipsToBounds 要設為 true
skyImageView.layer.cornerRadius = 30
skyImageView.clipsToBounds = true

//***skyImageView 加入顯示文字的 UILabel(AttributedString ＆ NSAttributedString)
//文字樣式設定->AttributedString
var textContent = AttributedString()
var name = AttributedString("韓愈\n")//第一行
name.font = .boldSystemFont(ofSize: 30)//粗體字 文字大小
name.foregroundColor = UIColor(red: 183/255, green: 122/255, blue: 93/255, alpha: 1)//.black//文字顏色
textContent += name//加入textContent
var poem = AttributedString("漠漠輕陰晚自開 青天白日映樓台\n曲江水滿花千樹 有底忙時不肯來")//第二行
poem.font = .boldSystemFont(ofSize: 25)//粗體字 文字大小
poem.foregroundColor = UIColor(red: 255/255, green: 153/255, blue: 97/255, alpha: 1)//文字顏色
poem.backgroundColor = .cyan
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 15//上下行間距
poem.paragraphStyle = paragraphStyle
textContent += poem//加入textContent
//Label 設定 AttributedString->NSAttributedString
let messageLabel = UILabel()//messageLabel.text 文字內容//messageLabel.textColor 文字顏色//messageLabel.font 文字大小
messageLabel.attributedText = NSAttributedString(textContent)
messageLabel.numberOfLines = 0//顯示多行文字
messageLabel.sizeToFit()//label 的寬度剛好等於文字的長度
messageLabel.backgroundColor = .clear
messageLabel.frame.origin.x = 100
messageLabel.frame.origin.y = 100
skyImageView.addSubview(messageLabel)

//***skyImageView 加入顯示文字的 UILabel(NSTextAttachment)
//利用 NSTextAttachment 製作包含圖片的字串
let poemName = NSMutableAttributedString(string: "--同水部張員外籍曲江春遊寄白二十二舍人--")//產生 NSMutableAttributedString 物件
let patternAttachment = NSTextAttachment()//產生包含圖片的 NSTextAttachment 物件
patternAttachment.image = UIImage(named: "Three-section_Compound_512x512")
patternAttachment.bounds = CGRect(x: 0, y: -20, width: 55, height: 55)//調整大小
poemName.append(NSAttributedString(attachment: patternAttachment))
//Label 設定
let titleLabel = UILabel()
titleLabel.attributedText = poemName
titleLabel.font = UIFont.systemFont(ofSize: 20)//font: 文字大小
titleLabel.numberOfLines = 0//顯示多行文字
titleLabel.sizeToFit()//label 的寬度剛好等於文字的長度
titleLabel.textColor = UIColor(red: 70/255, green: 70/255, blue: 70/255, alpha: 1)//文字顏色
titleLabel.frame.origin.x = 100
titleLabel.frame.origin.y = 60
skyImageView.addSubview(titleLabel)

//***skyImageView 加入 emoji
var leafLabel = UILabel(frame: CGRect(x: 30, y: 30, width: 50, height: 50))
leafLabel.text = ""
leafLabel.font = UIFont.systemFont(ofSize: 45)
skyImageView.addSubview(leafLabel)
leafLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * -45)//emoji 旋轉(左上方胡蝶)
//右上方
leafLabel = UILabel(frame: CGRect(x: 820, y: 30, width: 50, height: 50))
leafLabel.text = ""
leafLabel.font = UIFont.systemFont(ofSize: 45)
skyImageView.addSubview(leafLabel)
leafLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
//右下方
leafLabel = UILabel(frame: CGRect(x: 820, y: 520, width: 50, height: 50))
leafLabel.text = ""
leafLabel.font = UIFont.systemFont(ofSize: 45)
skyImageView.addSubview(leafLabel)
leafLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 125)
//左下方
leafLabel = UILabel(frame: CGRect(x: 30, y: 520, width: 50, height: 50))
leafLabel.text = ""
leafLabel.font = UIFont.systemFont(ofSize: 45)
skyImageView.addSubview(leafLabel)
leafLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * -125)

//***Mask: 設計特別形狀的圖片
let treeImageView = UIImageView(image: UIImage(named: "tree.png"))
let shapeImageView = UIImageView(image: UIImage(named: "mask.png"))
shapeImageView.frame = CGRect(x: 0, y: 0, width: 300, height: 400)
treeImageView.frame = shapeImageView.frame
//調整內容顯示
shapeImageView.contentMode = .scaleAspectFill
treeImageView.contentMode = .scaleAspectFill
treeImageView.mask = shapeImageView
//在 Mask 上蓋一層顏色: 建立一個相同形狀的UIView,再設定UIView背景色
let shapeColorView = UIView(frame: treeImageView.frame)
shapeColorView.backgroundColor = UIColor(red: 220/255, green: 158/255, blue: 84/255, alpha: 0.3)
treeImageView.addSubview(shapeColorView)

//***skyImageView 加入特別形狀的圖片
treeImageView.frame.origin.x = 450
treeImageView.frame.origin.y = 120
skyImageView.addSubview(treeImageView)

//***利用 iOS SDK 各式型別生成東西，設定它的屬性和呼叫方法
//將時間變成特定格式的字串
let now = Date()
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd"
let formatterString = dateFormatter.string(from: now)

//***skyImageView 加入時間
let timeLabel = UILabel()
timeLabel.text = formatterString
timeLabel.font = UIFont.systemFont(ofSize: 25)//font: 文字大小
timeLabel.sizeToFit()//label 的寬度剛好等於文字的長度
timeLabel.textColor = UIColor(red: 70/255, green: 70/255, blue: 70/255, alpha: 1)//文字顏色
timeLabel.frame.origin.x = 100
timeLabel.frame.origin.y = 230
skyImageView.addSubview(timeLabel)