Rf-6 製作漂亮卡片 我家阿柴

先貼上我家漸層阿柴＾＾

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

主題發想

一開始想說用一張我家柴的圖，搞個遮罩圖旁邊加入那些效果文字就可以完成作業，但做一做突然覺得使用現成漂亮的圖確實會很好看，但就會比較無趣反正主要來練習，還是來惡搞一下吧～～～

程式使用

// 創建createShibaImage function用來創造UIImageView
func createShibaImage(name: String) -> UIImageView {
    let imageView = UIImageView(image: UIImage(named : name))
    return imageView
}

這邊我用function來做一個UIImageView的生成，因為我寫一寫發現要創UIImageView的地方還不少，所以寫一個來簡化一下～～～

// 創建柴的ImageView
let shibaImageView = createShibaImage(name: "柴")

// 創建去背柴的ImageView並設置屬性
let backshibaImageView = createShibaImage(name: "阿柴去背")
backshibaImageView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
backshibaImageView.frame = CGRect(x: 80, y: 200, width: 900, height: 900)
backshibaImageView.layer.borderWidth = 2
backshibaImageView.layer.cornerRadius = 80
backshibaImageView.layer.borderColor = CGColor(red: 188 / 255, green: 143 / 255, blue: 143 / 255, alpha: 2)

// 創建去背柴的ImageView1並設置屬性
let backshibaImageView1 = createShibaImage(name: "阿柴去背")
backshibaImageView1.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
backshibaImageView1.frame = CGRect(x: 280, y: 400, width: 512, height: 512)

// 創建去背柴的ImageView2並設置屬性
let backshibaImageView2 = createShibaImage(name: "阿柴去背")
backshibaImageView2.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
backshibaImageView2.frame = CGRect(x: 150, y: 300, width: 768, height: 768)

這邊我做了三個不同大小的去背過的柴圖來做等等的漸層邊，這邊我把最大張去背柴圖加上細邊加上圓角～～～

從 playground 調色去背圖片

// 創建狗狗的mask圖
let aShibaImageView = createShibaImage(name: "阿柴")
aShibaImageView.frame = CGRect(x: 410, y: 550, width: 250, height: 250)

// 使用aShibaImageView圖來mask柴的ImageView
shibaImageView.mask = aShibaImageView

我把阿柴的圖調整的比原圖柴還大一點，用來當作遮罩，有種柴中柴俄羅斯娃娃的感覺～～～

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

// 創建Label並設置屬性
let shibaLabel = UILabel(frame: CGRect(x: 90, y: 50, width: 900, height: 100))
shibaLabel.text = "🐕🐕 漸層小乖 🐕🐕"
shibaLabel.font = UIFont.systemFont(ofSize: 100)
shibaLabel.textColor = UIColor(red: 1, green: 128/255, blue: 0, alpha: 1)

// 創建旋轉的柴1的ImageView
let shibaRotationView = createShibaImage(name: "柴1")
shibaRotationView.frame = CGRect(x: 150, y: 1100, width: 150, height: 150)
shibaRotationView.transform = CGAffineTransform(rotationAngle: .pi / 180 * -50)

// 創建去背的柴2的ImageView
let shibaRotationView1 = createShibaImage(name: "柴2")
shibaRotationView1.frame = CGRect(x: 350, y: 1110, width: 150, height: 150)

// 創建去背的柴3的ImageView
let shibaRotationView2 = createShibaImage(name: "柴3")
shibaRotationView2.frame = CGRect(x: 550, y: 1110, width: 150, height: 150)

// 創建去背的柴4的ImageView
let shibaRotationView3 = createShibaImage(name: "柴4")
shibaRotationView3.frame = CGRect(x: 750, y: 1110, width: 150, height: 150)

這邊使用的圖都是從iphone上的照片中，使用手機的螢幕長按人事物會自動框住去背，但圖的方向都照原圖方向，所以我柴1的圖做了角度調整～～～

// 創建背景view並添加ImageView
let maView = UIView(frame: CGRect(x: 0, y: 0, width: 1048, height: 1300))
maView.layer.borderWidth = 15
maView.layer.cornerRadius = 100
maView.layer.borderColor = CGColor(red: 253 / 255, green: 146 / 255, blue: 112 / 255, alpha: 2)
maView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 2)

maView.addSubview(shibaImageView)
maView.addSubview(backshibaImageView)
maView.addSubview(backshibaImageView1)
maView.addSubview(backshibaImageView2)
maView.addSubview(shibaLabel)
maView.addSubview(shibaRotationView)
maView.addSubview(shibaRotationView1)
maView.addSubview(shibaRotationView2)
maView.addSubview(shibaRotationView3)

最後創了一個maView的UIView把上面那些東西，全部照順序使用addSubview擺上maView就完成小小作業～～～

心得分享

這作業我覺得最麻煩的地方在於要調整圖的的大小跟座標，但這作業讓我該練習的東西都有練到讓我對addSubview的使用更加熟悉，上面其實還有蠻多地方可以用function簡化，等其他作業完成後再回來修改＾＾

GitHub 連結

GitHub - NomikLee/loveCard.playground

補充網站

RGB Color Codes Chart