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

2022彼得潘的 iOS App 程式設計入門

成品展示：

圖片是跟我女友出去玩時，覺得這個夕陽真的太美了就拍了下來！

附上程式碼

• 首先是先將圖片放進ImageView裡面，來使我們可以用ImageView的property
• 還有調整圖片的大小

import UIKit
let sunImage = UIImage(named: "sun.jpeg")
let sunImageView = UIImageView(image: sunImage)
sunImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 600)
sunImageView.contentMode = .scaleAspectFill

• 設定圖片上的文字

let messageLabel = UILabel(frame: CGRect(x: 120, y: 80, width: 200, height: 30))
messageLabel.text = "美麗的夕陽～"
messageLabel.textColor = UIColor(red: 100/255, green: 70/255, blue: 200/255, alpha: 1)
messageLabel.font = UIFont.systemFont(ofSize: 30)
sunImageView.addSubview(messageLabel)

• 設定圖片邊框及邊界顏色

sunImageView.layer.borderWidth = 7.5
sunImageView.layer.borderColor = CGColor(red: 1, green: 200/255, blue: 100/255, alpha: 1)
sunImageView.layer.cornerRadius = 50
//要記得開啟clipsToBounds
sunImageView.clipsToBounds = true

• 設定圖片周圍emoji
• 利用迴圈

for i in 0...7 {
    let loveLabel = UILabel(frame: CGRect(x: 20+i*100, y: 20, width: 30, height: 30))
    loveLabel.text = "🥰"
    loveLabel.font = UIFont.systemFont(ofSize: 30)
    sunImageView.addSubview(loveLabel)
}
for i in 0...7 {
    let loveLabel = UILabel(frame: CGRect(x: 20+i*100, y: 550, width: 30, height: 30))
    loveLabel.text = "🥰"
    loveLabel.font = UIFont.systemFont(ofSize: 30)
    sunImageView.addSubview(loveLabel)
}
for i in 0...4 {
    let starLabel = UILabel(frame: CGRect(x: 20, y: 80+i*100, width: 30, height: 30))
    starLabel.text = "⭐️"
    starLabel.font = UIFont.systemFont(ofSize: 30)
    sunImageView.addSubview(starLabel)
}
for i in 0...4 {
    let starLabel = UILabel(frame: CGRect(x: 740, y: 80+i*100, width: 30, height: 30))
    starLabel.text = "⭐️"
    starLabel.font = UIFont.systemFont(ofSize: 30)
    sunImageView.addSubview(starLabel)
}

完整程式碼：