做漂亮卡片吧

YunaB

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

8 min readSep 11, 2023

用swiftUI做梗圖

雖然斷斷續續，但是課還是有在上的，只是很慢很慢
總之先來張成果鎮樓

這次的作業是用addSubview的方式來做漂亮卡片
想也知道要做漂亮卡片不難，有了AI一切好說
不過既然是作業就不能偷懶，所以在補課的時候就跟著一面聽一面做了

說好要找張去背的圖片換顏色，所以就找了心中男神安娜蘇來試試，jojo在使用替身的時候大家顏色都會變，拿jojo來改最適合了！

結果這張光是去背就弄了好久…
因為我蠢到忘記有買繪圖軟體(看看我多久沒畫圖了)
網上找免費去背工具弄了半天才想起來我有CSP
接著因為自己龜毛所以又把圖片放到最大想要把頭髮去背弄乾淨
不知不覺兩個小時就過去了…
早知道就跟上課的範例圖一樣用多拉A夢就好…

看來要做出範例中的效果沒有想像中的難嘛～
既然這次要做的是漂亮卡片，那就來試試看梗圖以外的圖吧！

首先從Pinterest找靈感

這張窗框圖看起來很適合挖空中間放點什麼進去，就用這張當作參考吧！

首先用常用的Figma做個窗框，順便放隻可愛黑貓～
也加上文字，到時候用figma的Dev mode可以看到文字的資訊，還有和周圍物件的距離

接著要放在後面的圖就交給AI吧！
推薦一下這個網站Clipdrop，可以線上用AI繪圖之後直接用網站內的其他功能修改，不用切換到其他工具或是網站，需要的圖一次就能搞定，讚啦！
再來就是按照課堂上的內容實際操作了！

//加入窗邊貓貓圖片
let windowCat = UIImage(named: "windowCat")
let windowCatView = UIImageView(image: UIImage(named: "windowCat"))

//加入煙火圖片
let firework01 = UIImage(named: "firework01")
let firework01Viwe = UIImageView(image: firework01)
firework01Viwe.frame = CGRect(x: 0, y: 0, width: 428, height: 926)
firework01Viwe.contentMode = .scaleAspectFill

//將窗邊貓貓圖片疊在煙火圖片上
firework01Viwe.addSubview(windowCatView)

幫自己加上註解，避免以後癡呆了看不懂

之後再加上文字，不過這邊還是找了Peter給的參考資料，加入文字並且調整文字的尺寸、顏色
之後就會變成這樣啦！

給自己memo一下，加上文字的時候如果沒有調整文字尺寸的話，預覽圖上的文字會歪一邊

除了這張之外，也想試試看不同的底圖，增加練習量

最後再補上自己這次作業的內容，證明我有好好的練習！

//加入窗邊貓貓圖片
let windowCat = UIImage(named: "windowCat")
let windowCatView = UIImageView(image: UIImage(named: "windowCat"))

//加入煙火圖片
let firework01 = UIImage(named: "firework01")
let firework01Viwe = UIImageView(image: firework01)
firework01Viwe.frame = CGRect(x: 0, y: 0, width: 428, height: 926)
firework01Viwe.contentMode = .scaleAspectFill

//將窗邊貓貓圖片疊在煙火圖片上
firework01Viwe.addSubview(windowCatView)

//參考https://medium.com/彼得潘的試煉-勇者的-100-道-swift-ios-app-謎題/142-使用圖片-文字-emoji-邊框-圓角製作漂亮卡片-401741bf23f7
//依照上面的內容加入文字，製作文字的時候用figma的Dev mode輕鬆取得了資訊嘿嘿

let textLabel = UILabel(frame: CGRect(x: 165, y: 64, width: 99, height: 17))
textLabel.text = "Firework"
textLabel.textColor = UIColor(white: 1, alpha: 1)
textLabel.font = UIFont.systemFont(ofSize: 24)

//再把做好的textLabel加到原本的煙火圖上
firework01Viwe.addSubview(textLabel)

let textLabel02 = UILabel(frame: CGRect(x: 138, y: 840, width: 153, height: 15))
textLabel02.text = "I Love Black Cat!!"
textLabel02.textColor = UIColor(red: 152/266, green: 142/266 , blue: 169/266, alpha: 1)
textLabel02.font = UIFont.systemFont(ofSize: 20)
firework01Viwe.addSubview(textLabel02)


// 再來直接替換底圖看看

let flyingCat = UIImage(named: "blackcat")
let flyingCatView = UIImageView(image: UIImage(named: "blackcat"))
flyingCatView.addSubview(windowCatView)
flyingCatView.addSubview(textLabel)
flyingCatView.addSubview(textLabel02)

//加碼一下
let meme = UIImage(named: "meme01")
let memeView = UIImageView(image: UIImage(named: "meme01"))

let textLabel3 = UILabel(frame: CGRect(x: 80, y: 15, width: 192, height: 17))
textLabel3.text = "說好的颱風假呢？"
textLabel3.textColor = UIColor(white: 1, alpha: 1)
textLabel3.font = UIFont.systemFont(ofSize: 24)

//讓寬度剛好等於文字長度，不加這個文字會被切斷哭哭
textLabel3.sizeToFit()

let textLabel4 = UILabel(frame: CGRect(x: 258, y: 200, width: 192, height: 17))
textLabel4.text = "只有台北沒有啦！"
textLabel4.textColor = UIColor(white: 1, alpha: 1)
textLabel4.font = UIFont.systemFont(ofSize: 24)
textLabel4.sizeToFit()

memeView.addSubview(textLabel3)
memeView.addSubview(textLabel4)

至於最後加碼的圖就是最前面的梗圖
不能放颱風假的颱風還好意思自稱是颱風嗎！羞羞臉啦！！

做漂亮卡片吧

Written by YunaB