#3 製作可愛Aliens(三眼怪)卡片,用程式也行哦～

由於太太很喜歡三眼怪，再加上老是唸叨很久沒送卡片了，順便展現一下技術給她看～就用程式製作一張三眼怪小可愛卡片送她吧～

先來看一下成品圖：

主要使用工具元件：
Playground、UIImage、UIImageView、UILabel

1.先將圖片加入Playground左側導覽列的Resources資料夾中(檔名：aliens.jpeg)

2.使用UIImage元件產生圖片

let image = UIImage(named: "aliens.jpeg")

3.產生圖片片畫面UIImageView

let imageView = UIImageView(image: image)

4.設定圖片的位置長寬、圖片呈現方式、透明度、4個角設為圓角

//位置長寬
imageView.frame = CGRect(x: 0, y: 0, width: 1000, height: 1000)
//圖片呈現方式
imageView.contentMode = .scaleToFill
 
//透明度
imageView.alpha = 0.7
 
//4個角設為圓角
imageView.layer.cornerRadius = 70
imageView.clipsToBounds = true

5.用UILabel在圖片上想要的位置顯示想表達的文字

//文字-1
//顯示的位置及Label的大小
let messageLabel1 = UILabel(frame: CGRect(x: 250, y: 80, width: 500, height: 50))
//設定文字大小
messageLabel1.font = UIFont.systemFont(ofSize: 40)
//Label中加入想顯示的文字內容
messageLabel1.text = "Meow 永遠快樂～"
//使用addSubview method將Label加入畫面imageView.addSubview(messageLabel1)
//文字-2
let messageLabel2 = UILabel(frame: CGRect(x: 650, y: 560, width: 500, height: 100))
messageLabel2.font = UIFont.systemFont(ofSize: 23)
//將Label設定可以輸入多行
messageLabel2.numberOfLines = 0
messageLabel2.text = "Oh~oh~ \n I love you forever~❤️"
imageView.addSubview(messageLabel2)

6.加入圖片周圍的爪子圖(檔名：claw.png)

7.將爪子圖片(claw.png)放入Label元件，設定位置及旋轉角度，並圍繞圖片四周

//產生圖片
let meowClaw = UIImage(named: "claw.png")
//宣告變數
var meowClawView = UIImageView()
var emojiLabel = UILabel()
var x = 0
var y = 0
//使用for loop將爪子圖圍繞在主圖的四周
//左右2邊
for _ in 1...10 {
    meowClawView = UIImageView(image: meowClaw)
    meowClawView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    emojiLabel = UILabel(frame: CGRect(x: 0, y: y, width: 100,  height: 100))
    emojiLabel.addSubview(meowClawView)
    
    //旋轉角度
    emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
    imageView.addSubview(emojiLabel)
    
    y += 100
}
y = 0
for _ in 1...10 {
    meowClawView = UIImageView(image: meowClaw)
    meowClawView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    emojiLabel = UILabel(frame: CGRect(x: 900, y: y, width: 100, height: 100))
    emojiLabel.addSubview(meowClawView)
    emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * (-45))
    imageView.addSubview(emojiLabel)
    
    y += 100
}
//上下2邊
for _ in 1...8 {
    meowClawView = UIImageView(image: meowClaw)
    meowClawView.frame = CGRect(x: 100, y: 0, width: 100, height: 100)
    emojiLabel = UILabel(frame: CGRect(x: x, y: 0, width: 100, height: 100))
    emojiLabel.addSubview(meowClawView)
//    emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * 45)
    imageView.addSubview(emojiLabel)
    
    x += 100
}
x = 0
for _ in 1...8 {
    meowClawView = UIImageView(image: meowClaw)
    meowClawView.frame = CGRect(x: 100, y: 0, width: 100, height: 100)
    emojiLabel = UILabel(frame: CGRect(x: x, y: 900, width: 100, height: 100))
    emojiLabel.addSubview(meowClawView)
//    emojiLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 * (-45))
    imageView.addSubview(emojiLabel)
    
    x += 100
}
//在Playground顯示做好的卡片
imageView

完整程式碼：