從程式生成 UI 元件

以生成 label 為例

import UIKit
let rect = CGRect(x: 0, y: 0, width: 200, height: 100)
let label = UILabel(frame: rect)
label.numberOfLines = 0
label.backgroundColor = UIColor(red: 128/255, green: 100/255, blue: 0, alpha: 1)
label.text = "  我要找到你，\n  不管南北東西"
label.textColor = UIColor(red: 240/255, green: 128/255, blue: 128/255, alpha: 1)
label.layer.borderWidth = 5
label.layer.borderColor = UIColor(red: 0, green: 0, blue: 1, alpha: 1).cgColor
label

import UIKit

UI 相關的東西定義在 UIKit framework 裡，所以要加入 UIKit，才能使用 UILabel 和 UIColor 。

let rect = CGRect(x: 0, y: 0, width: 200, height: 100)

產生長方形，設定它的位置(x, y 座標)和尺寸(width, height 寬高)，CGRect 的 rect 是長方形 rectangle 的縮寫。

ps: 點選 playground 右邊圓形的 Quick Look & 長方形的 Show Result，將可進一步看到生成東西的畫面，比方剛剛的長方形或是待會產生的 label。

let label = UILabel(frame: rect)

產生 label，以長方形型別的 frame (框框)描述它的位置和尺寸。

我們也可以將生成 CGRect & UILabel 的程式合併為一行，例如以下例子:

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 100))

大部分的 UI 元件都可以在生成時傳入 frame 設定它的大小位置，比方以下生成 button 的例子:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 100))

我們也可以在產生 UI 元件後，後來再透過它的 frame 屬性修改它的大小位置，例如以下例子。

label.frame = CGRect(x: 0, y: 0, width: 200, height: 100)

frame 是 UIView 的屬性，因為大部分的 UI 元件都繼承自 UIView，因此我們可以透過 frame 修改 label，button，image view 等元件的大小位置。

frame - UIView | Apple Developer Documentation

label.numberOfLines = 0

設定文字的行數，0 表示可顯示任意行數的文字。

label.backgroundColor = UIColor(red: 128/255, green: 100/255, blue: 0, alpha: 1)

設定 label 的背景顏色。

開發 iOS App 時，若要從程式指定顏色，一般會生成 UIColor 物件。相關說明可參考以下連結:

如何從 RGB 生成顏色 UIColor

label.text = “ 我要找到你，\n 不管南北東西”

設定 label 的文字。\n 表示換行。

label.textColor = UIColor(red: 240/255, green: 128/255, blue: 128/255, alpha: 1)

設定 label 的文字顏色。

label.layer.borderWidth = 5

設定 label 的邊框寬度。

label.layer 會得到 CALayer 物件。CALayer 物件控制元件呈現的樣子，比方圓角和陰影。

label.layer.borderWidth 表示存取 label 的 layer 的 borderWidth，borderWidth 是 layer 的屬性，型別為 CGFloat。( CGFloat 也是浮點數的型別，跟 Float 類似。)

我們也可以分開寫，先將 label.layer 存到變數 layer，然後再設定 layer 的 borderWidth。

var layer = label.layer
layer.borderWidth = 5

寫程式時我們常常看到類似 label.layer.borderWidth 這樣 A.B.C 的格式，利用一連串的 . 串聯讀取 C 的內容，其實這跟講中文雷同，我們會說妹妹的同學的媽媽的弟弟的朋友的名字。為了更清楚這樣的概念，讓我們再看一個讀取 label 寬度的例子:

label.frame.size.width 代表 label 的框框的尺寸的寬度。

label.layer.borderColor = UIColor(red: 0, green: 0, blue: 1, alpha: 1).cgColor

設定 label 的邊框顏色。

由於 borderColor 的型別是 CGColor，所以我們需要給它 CGColor 的東西。我們可從 UIColor 的 property cgColor 得到型別 CGColor 的顏色。

如果直接將 UIColor 的內容存入 borderColor，將產生型別不合的錯誤。

像剛剛這樣從 UIColor 物件的 property 取得 CGColor 物件的例子，其實在 iOS SDK 時常看到，相關的資訊可參考以下連結。

從型別 A 的東西得到型別 B 的東西