#3使用圖片,文字,emoji,邊框 & 圓角製作漂亮卡片/梗圖

Wen
彼得潘的 Swift iOS / Flutter App 開發教室
5 min readNov 20, 2023

顯示圖片的 UIImageView

利用 UIView 的 property 調整元件的基本特性

import UIKit
//加入圖片
let dog = UIImage(named: "狗.jpeg")
let dogdog = UIImageView(image: dog)
//設定圖片大小位置.邊寬
dogdog.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
dogdog.layer.borderWidth = 10

加入對話框的圖片

let frame = UIImage(named: "對話框.png")
let framebox = UIImageView(image: frame)
framebox.frame = CGRect(x: 50, y: 0, width: 300, height: 300)

加入label文字

let messagelabel = UILabel(frame: CGRect(x: 80, y: 80, width: 150, height: 150))
messagelabel.text = "我是狗狗不是棉花糖"
messagelabel.textColor = UIColor(red: 0, green: 0, blue: 205/255, alpha: 1)
messagelabel.font = UIFont.systemFont(ofSize: 15)

加入棉花糖圖片,調整圖片位置、角度

//加入小棉花糖圖片.調整大小角度位置
let cottonCandyImg1 = UIImage(named: "棉花糖1.png")
var cottonCandyImg = UIImageView(image: cottonCandyImg1)
cottonCandyImg.frame = CGRect(x: 10, y: 20, width: 120, height: 120)
cottonCandyImg.transform = CGAffineTransform(rotationAngle: .pi / 180 * 20)
//加入小棉花糖2圖片.調整大小角度位置
var cottonCandyImg2 = UIImageView(image: cottonCandyImg1)
cottonCandyImg2.frame = CGRect(x: 380, y: 350, width: 120, height: 120)
cottonCandyImg2.transform = CGAffineTransform(rotationAngle: .pi / 180 * 340)

完整程式碼

import UIKit
//加入圖片
let dog = UIImage(named: "狗.jpeg")
let dogdog = UIImageView(image: dog)
//設定圖片大小位置.邊寬
dogdog.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
dogdog.layer.borderWidth = 10
//設定圓角
dogdog.layer.cornerRadius = 50
dogdog.clipsToBounds = true
//加入第二張圖片
let frame = UIImage(named: "對話框.png")
let framebox = UIImageView(image: frame)
framebox.frame = CGRect(x: 50, y: 0, width: 300, height: 300)
//加入文字.設定文字大小邊框顏色
let messagelabel = UILabel(frame: CGRect(x: 80, y: 80, width: 150, height: 150))
messagelabel.text = "我是狗狗不是棉花糖"
messagelabel.textColor = UIColor(red: 0, green: 0, blue: 205/255, alpha: 1)
messagelabel.font = UIFont.systemFont(ofSize: 15)
//設定圖片比例
framebox .contentMode = .scaleAspectFit
//加入小棉花糖圖片.調整大小角度位置
let cottonCandyImg1 = UIImage(named: "棉花糖1.png")
var cottonCandyImg = UIImageView(image: cottonCandyImg1)
cottonCandyImg.frame = CGRect(x: 10, y: 20, width: 120, height: 120)
cottonCandyImg.transform = CGAffineTransform(rotationAngle: .pi / 180 * 20)
//加入小棉花糖2圖片.調整大小角度位置
var cottonCandyImg2 = UIImageView(image: cottonCandyImg1)
cottonCandyImg2.frame = CGRect(x: 380, y: 350, width: 120, height: 120)
cottonCandyImg2.transform = CGAffineTransform(rotationAngle: .pi / 180 * 340)

framebox.addSubview(messagelabel)
//覆蓋圖片上去
dogdog.addSubview(framebox)
dogdog.addSubview(cottonCandyImg)
dogdog.addSubview(cottonCandyImg2)

--

--