＃9 使用圖片 / 文字 / emoji / 邊框 / 圓角製作漂亮卡片

寂寞的七夕，熊大一人在宇宙間尋找 Cony ，沒有煙抽，只有甜甜圈和棒棒糖陪著他…

這次的作業是在 Playground 中，練習以下功能：

• 在 playground 中加入圖片
• 使用 addSubview 組合照片
• 設定圖片的邊框與圓角
• 使用 UILabel 設定文字
• 使用迴圈重複 emoji
• 使用 CGAffineTransform 讓 emoji 旋轉
• 變更圖片顏色

首先，把圖加進playground

把找好的圖片拖曳加到 playground 的 Resources 裡，並建立兩張影像各自的imageView

import UIKit
let brownImageView=UIImageView(image: UIImage(named: "Brown.png"))
let spaceImageView=UIImageView(image: UIImage(named: "space.png"))

左圖：移除皮膚顏色的熊大

設定圖片的大小及位置

打算以熊大的尺寸為標準
特別注意如果不要圖片變形，可使用 .contentMode 去維持圖片比例

brownImageView.frame=CGRect(x: 0, y: 0, width: 800, height: 800) //呼叫 frame 設定 brownImageView 圖片的位置大小
spaceImageView.contentMode = .scaleAspectFill //維持圖片比例填滿，多餘部分切掉
spaceImageView.frame=CGRect(x: 0, y: 0, width: 800, height: 800) //呼叫 frame 設定 spaceImageView 圖片的位置大小

結合兩張圖片

呼叫 addSubView 熊大圖當太空圖的subview

spaceImageView.addSubview(brownImageView)

設定邊框寬度、顏色與圓角

spaceImageView.layer.borderWidth = 25 //邊框寬度
spaceImageView.layer.borderColor=CGColor(red: 139/255, green: 69/255, blue: 19/255, alpha: 1) //邊框顏色、透明度
spaceImageView.layer.cornerRadius=50 //圓角
spaceImageView //顯示spaceImageView

※ 在這裡若沒有加 spaceImageView //顯示spaceImageView ，
則會出現 無畫面可以顯示

加入要顯示的文字

先產生可容納字串的 UILabel，設定其大小及位置，然後加入文字，修改文字大小及顏色，最後要把 UILabel 設為太空圖的 subview

let messageLabel=UILabel(frame: CGRect(x: 250, y: 50, width: 320, height: 40)) //顯示字串的 UILabel
messageLabel.text="Where are you Cony~" //呼叫 text 加入字串
messageLabel.textColor=UIColor(red: 65/255, green: 105/255, blue: 225/255, alpha: 1) //呼叫 textColor 設定字串顏色、透明度
messageLabel.font=UIFont.boldSystemFont(ofSize: 32) //呼叫 font 設定文字大小粗體
spaceImageView.addSubview(messageLabel) //呼叫 addSubview 設為太空圖的 subview

加入 emoji

使用 迴圈，使 emoji 重複出現
使用 CGAffineTransform，使 emoji 旋轉並位移

for i in 0...5 { //使用迴圈，使 emoji 重複出現
    
    let dounghnutLabel=UILabel(frame: CGRect(x: 120+i*(-10), y: 120+i*105, width: 100, height: 40)) //設定emoji(字串)的label大小位置
    
    dounghnutLabel.text="🍩🍧" //設定emoji內容
    
    dounghnutLabel.font=UIFont.systemFont(ofSize: 40) //設定emoji大小
    
    dounghnutLabel.transform=CGAffineTransform(rotationAngle: .pi/180+CGFloat(i*40)) //使用 CGAffineTransform，讓 emoji 旋轉
    
    spaceImageView.addSubview(dounghnutLabel) 
 }                      //設定dounghnutLabel為spcceImageView的subView

for i in 0...5 {
    let lollipopLabel=UILabel(frame: CGRect(x: 600+i*10, y: 120+i*105, width: 100, height: 40))
    
    lollipopLabel.text="🍭🍿"
    
    lollipopLabel.font=UIFont.systemFont(ofSize: 40)
    
    lollipopLabel.transform=CGAffineTransform(rotationAngle: .pi/180+CGFloat(i*40))
    
    spaceImageView.addSubview(lollipopLabel)
}

使圖片變色

使用 .backgroundColor去改變熊大的顏色，並設定 alpha (0–1)，

0完全透明，1為不透明，需要有點透明才看得到 superView 的太空圖

brownImageView.backgroundColor=UIColor(red: 244/255, green: 164/255, blue: 96/255, alpha: 0.5) //呼叫 backgroundColor 變更圖片顏色、透明度
spaceImageView //顯示spaceImageView

reference

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

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

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

在 Xcode playground 顯示變數常數的內容

在 Medium 貼上維持縮排的漂亮程式

RGB Color Codes Chart