Swift自動調(diào)整視圖布局AutoLayout和AutoresizingMask功能詳解

更新時間：2023年06月12日 11:08:38 作者：山水域

這篇文章主要為大家介紹了Swift自動調(diào)整視圖布局AutoLayout和AutoresizingMask功能及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Swift 中 AutoLayout 和 AutoresizingMask

Swift 中 AutoLayout 和 AutoresizingMask 用于自動調(diào)整視圖的布局，以適應(yīng)不同大小的設(shè)備和屏幕方向。

兩種方法都可以用來處理視圖的自動適應(yīng)問題，但是它們的實現(xiàn)有所不同。

AutoLayout

AutoLayout是一個基于約束的視圖布局系統(tǒng)，它可以使視圖根據(jù)約束條件自動適應(yīng)不同的設(shè)備尺寸和方向。通過添加約束條件，AutoLayout會計算出每個視圖的正確位置和大小，以確保它們始終處于正確的位置并且是正確的尺寸。

以下是一些常見的AutoLayout 約束條件:

寬度約束或高度約束：限制視圖的寬度或高度；
水平或垂直間距約束：限制視圖之間的間距；
頂部、底部、左邊、右邊約束：限制視圖在父視圖中的位置。

以下是一個簡單的示例代碼，演示如何使用 AutoLayout 設(shè)置一個視圖在父視圖中水平居中并且垂直居中：

import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let myView = UIView()
        myView.backgroundColor = .red
        myView.translatesAutoresizingMaskIntoConstraints = false // 關(guān)閉 AutoresizingMask，打開 AutoLayout
        view.addSubview(myView) // 將myView添加到父視圖上
        NSLayoutConstraint.activate([
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor), // X軸方向居中
            myView.centerYAnchor.constraint(equalTo: view.centerYAnchor), // Y軸方向居中
            myView.heightAnchor.constraint(equalToConstant: 200), // 設(shè)置高度為200
            myView.widthAnchor.constraint(equalTo: myView.heightAnchor, multiplier: 0.8) // 寬度是高度的0.8倍
        ])
    }
}

以上代碼創(chuàng)建了一個紅色的 UIView 對象，并將其添加到當(dāng)前ViewController的主視圖上。使用 NSLayoutConstraint.activate() 方法添加了一組約束來確定視圖的位置和大小，其中 myView 的中心點與父視圖的中心點重合，并且設(shè)置了視圖的高度和寬度。

AutoresizingMask

AutoresizingMask是一個基于 autoresizingMask 屬性的視圖布局系統(tǒng)，它可以使視圖根據(jù)屏幕方向自動調(diào)整大小和位置。當(dāng)視圖調(diào)整寬度或高度時，AutoresizingMask 屬性可根據(jù)視圖的布局信息調(diào)整子視圖的布局。

以下是一些常見的AutoresizingMask 屬性:

UIViewAutoresizingFlexibleWidth : 自動調(diào)整寬度
UIViewAutoresizingFlexibleHeight : 自動調(diào)整高度
UIViewAutoresizingFlexibleLeftMargin : 自動調(diào)整左邊距
UIViewAutoresizingFlexibleRightMargin : 自動調(diào)整右邊距
UIViewAutoresizingFlexibleTopMargin : 自動調(diào)整頂部距離
UIViewAutoresizingFlexibleBottomMargin : 自動調(diào)整底部距離

接下來，讓我們看一下如何使用 AutoresizingMask 添加布局約束來實現(xiàn)自適應(yīng)布局。以下是一個示例代碼，演示如何使用 autoresizingMask 屬性將一個視圖居中并根據(jù)屏幕方向進行調(diào)整大?。?/p>

import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let myView = UIView()
        myView.backgroundColor = .red
        myView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        myView.center = view.center // 設(shè)置視圖居中
        myView.autoresizingMask = [.flexibleWidth, .flexibleHeight, .flexibleTopMargin, .flexibleBottomMargin] // 自適應(yīng)寬度、高度和頂部、底部邊距
        view.addSubview(myView)
    }
}

以上代碼創(chuàng)建了一個紅色的 UIView 對象，并將其添加到當(dāng)前 ViewController 的主視圖上。使用 autoresizingMask 屬性設(shè)置了視圖的位置和大小自適應(yīng)調(diào)整，其中寬度和高度都是自適應(yīng)的，而頂部和底部邊距可以隨著屏幕方向變化而調(diào)整。

值得注意的是，AutoresizingMask 不支持精細的約束設(shè)置，只能簡單地指定自適應(yīng)方式，不適用于需要更高級布局的情況。