在Swift中使用AutoLayout-VFL(AutoLayout-VFL筆記)

来源:https://www.cnblogs.com/dev-walden/archive/2018/07/27/9379318.html
-Advertisement-
Play Games

1.背景 iOS開發這幾年, UI佈局工具從frame到Masonry到SnapKit, sb和xib的AutoLayout也用過, 但是代碼版本的AutoLayout倒是沒用過, 最近一年, 頻頻發現一些三方UI組件佈局的bug, 作為三方組件不可能去依賴另一個三方的kayout倉庫, 所以只能通 ...


1.背景

iOS開發這幾年, UI佈局工具從frame到Masonry到SnapKit, sb和xib的AutoLayout也用過, 但是代碼版本的AutoLayout倒是沒用過, 最近一年, 頻頻發現一些三方UI組件佈局的bug, 作為三方組件不可能去依賴另一個三方的kayout倉庫, 所以只能通過代碼的AutoLayout來解決. 好吧, 最近我忍不了了, 於是乎就開始學習代碼版本的AutoLayout.

學習目標: 不追求用的多麼熟練, 至少要會用, 能夠看懂別人的佈局代碼是怎麼回事, 能夠找別人佈局代碼的問題出在哪裡.

2.入門

首先需要知道, 在cocoa touch中, 有三種佈局方式: Manual layout，Autoresizing，Autolayout, 這裡要講解的是第三個AutoLayout. 要想使用代碼佈局AutoLayout, 首先需要設置translatesAutoresizingMaskIntoConstraints=false, 原因見API註釋:

/* By default, the autoresizing mask on a view gives rise to constraints that fully determine 
     the view's position. This allows the auto layout system to track the frames of views whose 
     layout is controlled manually (through -setFrame:, for example).
     When you elect to position the view using auto layout by adding your own constraints, 
     you must set this property to NO. IB will do this for you.
     */
    @available(iOS 6.0, *)
    open var translatesAutoresizingMaskIntoConstraints: Bool // Default YES

如果不這樣設置, 則在運行時候會得到如下的警告(沒有編譯警告):

3.第一種AutoLayout的實現方法

API中NSLayoutConstraint.init的方法如下定義如下所示:

/*
//NSLayoutConstraint初始化方法在API中的定義:
/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" 
     If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
     */
    public convenience init(item view1: Any, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: Any?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat)

item:            指定約束左邊的視圖view1 
attribute:      指定view1的屬性attr1，具體見上述枚舉值。 
relatedBy:     指定左右兩邊的視圖的關係relation，具體見上述枚舉值。 
toItem:         指定約束右邊的視圖view2 (可以設置為nil,則attribute=.attribute)
attribute:      指定view2的屬性attr2，具體見上述枚舉值。 
multiplier:     指定一個與view2屬性相乘的乘數multiplier 
constant:      指定一個與view2屬性相加的浮點數constant
*/


public enum NSLayoutRelation : Int {
    case lessThanOrEqual
    case equal
    case greaterThanOrEqual
}

public enum NSLayoutAttribute : Int {
    case left            //左邊
    case right
    case top            //頂部
    case bottom
    case leading       //前面
    case trailing        //後面
    case width
    case height
    case centerX
    case centerY
    case lastBaseline
    @available(iOS 8.0, *)
    case firstBaseline
    @available(iOS 8.0, *)
    case leftMargin
    @available(iOS 8.0, *)
    case rightMargin
    @available(iOS 8.0, *)
    case topMargin
    @available(iOS 8.0, *)
    case bottomMargin
    @available(iOS 8.0, *)
    case leadingMargin
    @available(iOS 8.0, *)
    case trailingMargin
    @available(iOS 8.0, *)
    case centerXWithinMargins
    @available(iOS 8.0, *)
    case centerYWithinMargins
    case notAnAttribute
}

left和leading的不同之處, 詳見stackoverflow: Difference between NSLayoutAttributeLeft vs NSLayoutAttributeLeading

一個簡單的,設置view約束的示例: 

let leftLayout = NSLayoutConstraint(item: blueView,
                                    attribute: .left,
                                    relatedBy: .equal,
                                    toItem: view,
                                    attribute: .left,
                                    multiplier: 1,
                                    constant: 20)
let topLayout = NSLayoutConstraint(item: blueView,
                                   attribute: .top,
                                   relatedBy: .equal,
                                   toItem: redView,
                                   attribute: .bottom,
                                   multiplier: 1,
                                   constant: 30)
let heightLayout = NSLayoutConstraint(item: blueView,
                                      attribute: .height,
                                      relatedBy: .equal,
                                      toItem: nil,
                                      attribute: .notAnAttribute,
                                      multiplier: 1,
                                      constant: 100)
let rightLayout = NSLayoutConstraint(item: blueView,
                                     attribute: .right,
                                     relatedBy: .equal,
                                     toItem: view,
                                     attribute: .right,
                                     multiplier: 1,
                                     constant: -10)
view.addConstraints([leftLayout, topLayout, heightLayout, rightLayout])

毋庸置疑, NSLayoutConstraint非常強大, 但是代碼量也同樣非常大, 簡單一個view的約束就要寫將近30行代碼. 其實cocoa touch團隊已經想到了這點, 他們為我們提供了另一種更簡單的方法, 那就是VFL !

4.第二種實現AutoLayout的方法: VFL(Visual Format Language)

VFL是蘋果公司為了簡化autolayout的編碼而推出的抽象語言。

4.1 瞭解VFL

VFL（Visual Format Language）: “可視化格式語言”, 蘋果公司為了簡化autolayout的編碼而推出的抽象語言.

基本語法表

功能 表達式
水平方向 H:
垂直方向 V:
Views [view]
關係 >=,==,<=
SuperView |
空間，間隙 - -
優先順序 @value

舉幾個列子:

例子1: H:|-20-[view1(50)]-11-[view2]-20-|

設置水平方向的佈局, view1距離superView左邊20個單位, view1的寬度是50, view1的右邊是view2, view1和view2的距離是11個單位長度, view2距離superView右邊20個單位長度.

列子2:H:[wideView(>=60@700)]

wideView寬度大於等於60point，該約束條件優先順序為700（優先順序最大值為1000，優先順序越高的約束條件越先被滿足）

`例子3:V:|-20-[redBox(50)]-20-[yellowBox(==redBox)]``

垂直方向上, redBox距離上面20個單位, redBox的高度是50個單位, redBox右邊20個單位之外是yellowBox, yellowBox的高度和redBox的高度相等.

4.2 代碼示例

NSLayoutConstraint.constraints在API中的定義如下所示,

/* Create an array of constraints using an ASCII art-like visual format string.
     */
    open class func constraints(withVisualFormat format: String, options opts: NSLayoutFormatOptions = [], metrics: [String : Any]?, views: [String : Any]) -> [NSLayoutConstraint]

    /* This macro is a helper for making view dictionaries for +constraintsWithVisualFormat:options:metrics:views:.  
     NSDictionaryOfVariableBindings(v1, v2, v3) is equivalent to [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil];
     */


format：VFL語句
opts：約束類型
metrics：VFL語句中用到的具體數值
views：VFL語句中用到的控制項
  
創建一個字典（內部包含VFL語句中用到的控制項）的快捷巨集定義
NSDictionaryOfVariableBindings(...)

如下是設置redView和greenView的一個代碼示例, VFL支持同時設置多個view的約束, 也支持設置相對約束.

let redView = UIView()
redView.backgroundColor = UIColor.red
redView.translatesAutoresizingMaskIntoConstraints = false
let blueView = UIView()
blueView.backgroundColor = UIColor.blue
blueView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(redView)
view.addSubview(blueView)

 //設置redView的constraints
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[view(200)]",
                                                   options: NSLayoutFormatOptions(),
                                                   metrics: nil,
                                                   views: ["view": redView]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view(200)]",
                                                   options: NSLayoutFormatOptions(),
                                                   metrics: nil,
                                                   views: ["view": redView]))


//設置blueView的約束, 此時blueView的約束是相對於redView來設置
//實際上, 可以同時設置redView和blueView的約束, 這裡拆開是為了測試VFL支持相對約束
let hMetrics = ["middleSpace": 10, "rightSpace": 20]
let hViews = ["redView": redView, "blueView": blueView]
let hVFL = "H:[redView]-middleSpace-[blueView]-rightSpace-|"
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: hVFL,
                                                   options: NSLayoutFormatOptions()
                                                   metrics: hMetrics,
                                                   views: hViews))
let vMetrics = ["topSpace": 10, "height": 80]
let vViews = hViews
let vVFL = "V:[redView]-topSpace-[blueView(height)]"
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: vVFL,
                                                   options: NSLayoutFormatOptions()
                                                   metrics: vMetrics,
                                                   views: vViews))

4.3 使用規則(來自網路)

|: 表示父視圖
-:表示距離
V: :表示垂直
H: :表示水平


= :表示視圖間距、寬度和高度必須大於或等於某個值
<= :表示視圖間距、寬度和高度必須小宇或等於某個值
== :表示視圖間距、寬度或者高度必須等於某個值
@ :>=、<=、== 限制 最大為 1000
|-[view]-|: 視圖處在父視圖的左右邊緣內
|-[view] : 視圖處在父視圖的左邊緣
|[view] : 視圖和父視圖左邊對齊
-[view]- : 設置視圖的寬度高度
|-30.0-[view]-30.0-|: 表示離父視圖 左右間距 30
[view(200.0)] : 表示視圖寬度為 200.0
|-[view(view1)]-[view1]-| :表示視圖寬度一樣，並且在父視圖左右邊緣內
V:|-[view(50.0)] : 視圖高度為 50
V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示離父視圖的距離
為Padding,這兩個視圖間距必須大於或等於0並且距離底部父視圖為 padding。
[wideView(>=60@700)] :視圖的寬度為至少為60 不能超過 700
如果沒有聲明方向預設為 水平 V:

轉載請註明出處!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL案例07:MySQL5.7併發複製隱式bug
    我們MySQL線上環境大部分使用的是5.7.18的版本，這個版本已修複了很多bug，但針對主從複製的bug還是有很多的，尤其是一些組複製、並行複製的bug尤為突出，在5.7.19版本有做相應改善和修複。所以建議5.7.19之前的版本還是不要使用mgr和併發複製的功能，如使用建議升級至5.7.19（含 ...
  • sql server 索引闡述系列七 索引填充因數與碎片
    一.概述 索引填充因數作用：提供填充因數選項是為了優化索引數據存儲和性能。 當創建或重新生成索引時，填充因數的值可確定每個葉級頁上要填充數據的空間百分比，以便在每一頁上保留一些剩餘存儲空間作為以後擴展索引的可用空間，例如：指定填充因數的值為 80 表示每個葉級頁上將有 20% 的空間保留為空，以便隨 ...
  • 如何做數據分析師？教你從零開始系統規劃大數據學習之路
    大數據的領域非常廣泛，往往使想要開始學習大數據及相關技術的人望而生畏。大數據技術的種類眾多，這同樣使得初學者難以選擇從何處下手。 本文將為你開始學習大數據的徵程以及在大數據產業領域找到工作指明道路，提供幫助。目前我們面臨的最大挑戰就是根據我們的興趣和技能選定正確的角色。 為瞭解決這個問題，我在本文詳 ...
  • mysql 開發進階篇系列 8 鎖問題 (Innodb 行鎖實現方式)
    一.概述 Innodb 行鎖是通過給索引上的索引項加鎖來實現的。這一點與（oracle，sql server）不同後者是通過在數據塊中對相應的數據行加鎖。這意味著只有通過索引條件檢索數據，innodb才使用行級鎖，否則 innodb將使用表鎖。 在實際應用中，特別要註意innodb行鎖的這一特性，不 ...
  • 高性能MySQL--MySQL數據類型介紹和最優數據類型選擇
    MySQL支持的數據類型很多，那麼選擇合適的數據類型對於獲得高性能就至關重要。那麼就先瞭解各種類型的優缺點！ 一、類型介紹 1、整型類型 整型類型有： TINYINT，SMALLINT，MEDIUMINT，INT，BIGINT 。他們分別占8，16，24，32，64位儲存空間。可存儲的整數範圍為-2 ...
  • 基於Xtrabackup備份集來恢復某個誤刪除的表（drop）
    Preface Yesterday,I've demonstratated how to rescue a droped and a truncated table based on mysqldump backup.Let's see what's different in rescuing th ...
  • App上架流程(II)
    App 上架只需要一個證書，那就是上傳證書，其他的比如：推送證書， 打包 打包 上傳包 打包有點耗時間，打包完成後進入了這個界面。 第一步：驗證 對包進行驗證 選擇 AppStore發佈證書文件，描述文件(Provisioning Profile) 開始包文件的認證 驗證通過即可。 第二步： 上傳包 ...
  • Android交流會-碎片Fragment，閑聊單位與尺寸
    女孩：又周末了哦~ 男孩：那麼今日來開個交流會，我們也學一學人家高大尚的大會，自己開一個，廣州站，Android開發攻城獅交流會~ 1.Fragment概要： Android從3.0開始引入了Fragment的概念，中文意思為碎片，它的出現是為了更好展示UI的設計，讓程式更加得到充分的展示。Frag ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類