#8 法國足球金童的Bromance。使用圖片、文字、emoji、邊框 & 圓角製作卡片

Mbappé好基友

FIFA2022圓滿落幕，雖然法國沒有衛冕冠軍，但該隊主力Mbappe堪稱當代法國足球金童&網路迷因霸主&基情角色擔當，看看他與Giroud基情四射的一幕，就算不看高潮迭起的足球比賽，也能在腦內激起某種高潮(?

這麼好的素材不能放過。來做卡片吧！

首先把基情四射的圖片匯入playground，命名為”MGBL”。將寬高設定為800x1000。

import UIKit

//import Mbappe&Giroud bromance photo
let blImage=UIImage(named:"MGBL.jpeg")
let blImageView=UIImageView(image: blImage)
blImageView.frame=CGRect(x: 0, y: 0, width: 800, height: 1000)

預覽長這樣。

加入滿滿愛意的粉紅文字「The way Mbappé looks at Giroud.」（Mbappe深情款款看著Giroud。）字體大小設定50。

再將設定好的messageLabel變成Subview貼上原先的blImageView。

//add label
let messageLabel=UILabel(frame: CGRect(x: 60, y: 10, width: 800, height: 100))
messageLabel.text="The way Mbappé looks at Giroud."
messageLabel.textColor=UIColor(red: 1, green: 205/255, blue: 1, alpha: 1)

messageLabel.font=UIFont.systemFont(ofSize: 50)
blImageView.addSubview(messageLabel)

粉紅文字壓在圖片上方

看起來有點單調，來讓整個卡片更加粉紅。border邊框寬度設為10、但四角尖尖的不好看，於是設定layer.cornerRadius為50，讓它變成圓潤的角。顯示效果要打開，將clipsToBounds設定為True。

//add border
blImageView.layer.borderWidth=10
blImageView.layer.borderColor=CGColor(red: 1, green: 0, blue: 1, alpha: 1)

blImageView.layer.cornerRadius=50
blImageView.clipsToBounds=true

哇σ`∀´)σ

好像還少了點什麼…來加個❤️好了。兩旁也飄出愛的火花💕。
但愛心太正有點奇怪，利用.transform=CGAffineTransform(rotationAngle)去旋轉Emoji的角度。
可參考Peter的教學：

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

記得Emoji調整後要.addSubview，否則啥都看不到～

//add emoji heart label
let heartLabel=UILabel(frame: CGRect(x: 450, y: 195, width: 100, height: 100))
heartLabel.text="❤️"
heartLabel.font=UIFont.systemFont(ofSize: 80)
heartLabel.transform=CGAffineTransform(rotationAngle: .pi/180*30)

//add emoji doshearts label Left
let dosHeartsLabelL=UILabel(frame: CGRect(x: 150, y: 130, width: 100, height: 100))
dosHeartsLabelL.text="💕"
dosHeartsLabelL.font=UIFont.systemFont(ofSize: 80)
dosHeartsLabelL.transform=CGAffineTransform(rotationAngle:  .pi/180*330)

//add emoji doshearts label Right
let dosHeartsLabelR=UILabel(frame: CGRect(x: 650, y: 270, width: 100, height: 100))
dosHeartsLabelR.text="💕"
dosHeartsLabelR.font=UIFont.systemFont(ofSize: 80)
dosHeartsLabelR.transform=CGAffineTransform(rotationAngle: .pi/180*20)

//add emoji subview
blImageView.addSubview(heartLabel)
blImageView.addSubview(dosHeartsLabelL)
blImageView.addSubview(dosHeartsLabelR)

耶完成啦！ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ﾉ

Mbappé開滿嘲諷

練習用Image疊Image的方式做出一張開滿嘲諷的Swift卡片。苦主就是12碼罰踢失常的英格蘭隊長Kane。配上Mbappe開心到不行的笑臉，整個嘲諷滿點。

( σ՞ਊ ՞)σ

因為沒有使用func和迴圈，土法煉鋼用笨方法貼了三次Mbappe的Image。

import UIKit

//kane BG
let kaneImage=UIImage(named: "kanesad.jpg")
let kaneImageView=UIImageView(image: kaneImage)

kaneImageView.frame=CGRect(x: 0, y: 0, width: 900, height: 600)

//mbappe mock left
let mbappeMockImage=UIImage(named: "mbappemock.png")
let mbappeMockImageView=UIImageView(image: mbappeMockImage)

mbappeMockImageView.frame=CGRect(x: 0, y: 0, width: 200, height: 200)
mbappeMockImageView.transform=CGAffineTransform(rotationAngle: .pi/180*330)

kaneImageView.addSubview(mbappeMockImageView)

//mbappe mock right uno
let mbappeMockImageRUno=UIImage(named: "mbappemock.png")
let mbappeMockImageRUnoImageView=UIImageView(image: mbappeMockImageRUno)
mbappeMockImageRUnoImageView.frame=CGRect(x: 700, y: 45, width: 200, height: 200)
mbappeMockImageRUnoImageView.transform=CGAffineTransform(rotationAngle: .pi/180*20)

kaneImageView.addSubview(mbappeMockImageRUnoImageView)

//mbappe mock right big
let mbappeMockImageBig=UIImage(named: "mbappemock.png")
let mbappeMockImageBigImageView=UIImageView(image: mbappeMockImageBig)
mbappeMockImageBigImageView.frame=CGRect(x: 500, y: 275, width: 400, height: 400)
kaneImageView.addSubview(mbappeMockImageBigImageView)

但足球金童的開心表情不是真的在嘲笑，只是FIFA導播太賤了馬上Cue他，希望大家不要誤會Mbappe，他是個很有禮貌的大男孩喔！
也希望下一屆還能看到Kane，他是我最喜歡的英格蘭球員😭。