iOS10 UI教程檢視的邊界與檢視的框架

iOS10 UI檢視的邊界

在檢視的幾何形狀中我們提到了檢視屬性中的一部分屬性可以將定義的檢視繪製在螢幕上。其中典型的3個屬性為邊界屬性、框架屬性以及中心位置屬性。

bounds表示的就是邊界屬性，它是一個CGRect屬性。它定義了該檢視本身內部的座標系統中的位置（origin）和大小（size）。在大多數情況下bounds中的origin屬性為(x: 0, y: 0)，size屬性為檢視的大小。在使用bounds時，我們不可以確定檢視是如何繪製在UI層次結構中的。

iOS10 UI檢視的框架

frame表示的就是框架屬性，定義了檢視圖如何放置層次結構中。frame是一個CGRect屬性，它型別與bounds屬性，但是frame的origin屬性決定了檢視如何放置它的父檢視中。

注意：bounds屬性和frame屬性類似，但有所不同，bounds指的是該檢視本身內部的座標系統中的位置和大小。參照點是本身的座標系統，即為絕對座標，而frame指的是該檢視在設計介面座標系統中的位置和大小。參照點是設計介面，即為相對座標。

【示例1-4：Frame】以下我們將使用程式碼說明frame和bounds的不同。具體的操作步驟如下：

（1）開啟ViewController.swift檔案，編寫程式碼，實現在螢幕上顯示一個紅色的空白檢視，並且分別輸出bounds和frame的位置和大小。程式碼如下：

點選(此處)摺疊或開啟

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let point=CGPoint(x: 67.0, y: 217.0)
let size=CGSize(width: 240.0, height: 128.0)
let rect=CGRect(origin: point, size: size)
let newView=UIView(frame: rect)
self.view.addSubview(newView)
newView.backgroundColor=UIColor.red
//輸出bounds的位置
print("bounds.origin.x：\(newView.bounds.origin.x)")
print("bounds.origin.y：\(newView.bounds.origin.y)")
//輸出bounds的大小
print("bounds.size.width：\(newView.bounds.size.width)")
print("bounds.size.height：\(newView.bounds.size.height)")
//輸出frame的位置和大小
print("frame.origin.x：\(newView.frame.origin.x)")
print("frame.origin.y：\(newView.frame.origin.y)")
print("frame.size.width：\(newView.frame.size.width)")
print("frame.size.height：\(newView.frame.size.height)")
}
……
}

此時執行程式，會看到如圖1.9所示的效果

圖1.9 執行效果圖1.10 執行效果

此時會在應用程式輸出視窗輸出如下內容：

點選(此處)摺疊或開啟

//bounds的位置和大小
bounds.origin.x：0.0
bounds.origin.y：0.0
bounds.size.width：240.0
bounds.size.height：128.0
//frame的位置和大小
frame.origin.x：67.0
frame.origin.y：217.0
frame.size.width：240.0
frame.size.height：128.0

注意：在以上這些情況中，frame和bounds的size是相同的，但是origin是不同的。

（2）修改vViewController.swift檔案中的viewDidLoad()方法中的程式碼，實現空白檢視的旋轉，旋轉後再分別輸出bounds和frame的位置和大小。程式碼如下：

點選(此處)摺疊或開啟

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let point=CGPoint(x: 67.0, y: 217.0)
let size=CGSize(width: 240.0, height: 128.0)
let rect=CGRect(origin: point, size: size)
let newView=UIView(frame: rect)
self.view.addSubview(newView)
newView.backgroundColor=UIColor.red
newView.transform=CGAffineTransform(rotationAngle: 45) //旋轉
print("bounds.origin.x：\(newView.bounds.origin.x)")
……
}

此時執行程式，會看到如圖1.10所示的效果。在應用程式輸出視窗輸出以下內容：

點選(此處)摺疊或開啟

//bounds的位置和大小
bounds.origin.x：0.0
bounds.origin.y：0.0
bounds.size.width：240.0
bounds.size.height：128.0
//frame的位置和大小
frame.origin.x：69.5035357716888
frame.origin.y：145.270969771571
frame.size.width：234.992928456622
frame.size.height：271.458060456858

注意：在旋轉檢視後，bounds的位置和大小和在沒有旋轉檢視之前是一樣的。frame發生了變化，為了容納旋轉後的檢視，尺寸會自動進行調整。

iOS10 UI教程檢視的邊界與檢視的框架

相關閱讀：iOS10 UI教程檢視的幾何形狀

iOS10 UI教程檢視的邊界與檢視的框架