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

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教程視圖的幾何形狀