iOS Task#20 | Swift Playground — Making a Card (Image, Text, Frame, CornerRadius)
UIImageView — 顯示圖片
Published in
4 min readDec 15, 2021
先將圖片放在 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 = 8xmasCardView.layer.cornerRadius = 30xmasCardView.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)