iOS Task#20 | Swift Playground — Making a Card (Image, Text, Frame, CornerRadius)

UIImageView — 顯示圖片

先將圖片放在 Playground 的 Resources，輸入程式碼：

import UIKit
let xmasCard = UIImage(named:"OriginalImage.jpeg")
let xmasCardView = UIImageView(image: xmasCard

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

Frame — 圖片大小、位置

在 Storyboard 操作時，我們可以用 Attribute Inpector 來調整圖片顯示的位置跟大小，在 Playground 也是。

xmasCardImageView.frame = CGRect(x: 30, y: 30, width: 480, height: 311)

當然也可以設定不同的顯示位置：

//Aspect Fit 維持比例，不論是否frame留白
xmasCardImageView.contentMode = .scaleAspectFit
//Aspect Fill 維持比例並填滿frame，多餘部分裁切
xmasCardImageView.contentMode = .scaleAspectFill

Border, CornerRadius 邊框及圓角

xmasCardView.layer.borderColor = CGColor(red: 0, green: 0.5, blue: 0.5, alpha: 0.8)
xmasCardView.layer.borderWidth = 8
xmasCardView.layer.cornerRadius = 30
xmasCardView.clipsToBounds = true

設定完 CorderRadius (圓角)之後，一定要記得設定 Clip To Bounds = true。
這樣才會讓底下的圖片一起修成圓角，而不會圖片超出邊框的圓角外。

UILabel 文字

先設定好文字的位置、顏色、字體和大小 (按照行列依序說明)

• UILabel : 像在 Storyboard 一樣，先建立好 Label 文字框才能開始進行下一個動作
• UIColor : 選擇文字的顏色
• UIFont : 選擇字體和大小

let xmasLabel = UILabel(frame: CGRect(x: 150, y: 111, width: 240, height: 50))
xmasLabel.textColor = UIColor(red: 0, green: 0.5, blue: 0.5, alpha: 1)
xmasLabel.font = UIFont(name: "Snell Roundhand", size: 28)

這時候還預覽不到文字，因為還沒有指定要顯示文字內容和排版 (按照行列依序說明)

• text : 文字內容
• numberOfLines : 行數，0 表示任意行數，若超出Label範圍則自動換行
• sizeToFit() : Label 大小完全符合文字寬度
• textAlignment : 文字排列對齊格線 Left/Center/Right

xmasLabel.text = "Merry Christmas!"
xmasLabel.numberOfLines = 0 
xmasLabel.sizeToFit() 
xmasLabel.textAlignment = .center

最後要將 UILabel 貼到 UIImageView 上，因為我們要在圖片上顯示文字，才不會讓文字被圖片蓋住。

UIImageView 是 UILabel 的 SuperView

UILabel 是 UIImageView 的 SubView

xmasCardView.addSubview(xmasLabel)