iOS自動布局之VisualFormat

vfl是蘋果推出的用來autolayout布局的一門比較形象的語言, 本身為字串,雖然用起來比較麻煩, 但是相比直接使用蘋果的另乙個套布局方案要少寫一些**, 那麼問題來了, github上那麼多自動布局的框架, 簡單又好用, 為什麼要用這麼複雜的**去布局呢, 之前我也這麼想, 直到有一天自己想封裝乙個框架的的時候才發現, 不能處處依賴別人的框架去封裝, 因為這樣的話, 你封裝的框架幾乎沒法用. 舉個例子, 假設你的框架用了afn的2.0版本, 那麼對於使用框架的人來說, 他們專案中如果使用了afn3.0, 那麼肯定出出現一大堆相容問題, 因此對於自己的封裝的框架, 要以原生為主. 廢話不多說下面總結一下我半天的的學習成果: vfl布局

下面是vfl使用的乙個核心方法

+ (nsarray
<__kindof nslayoutconstraint> *)constraintswithvisualformat:(nsstring *)format 
options:(nslayoutformatoptions)opts 
metrics:(nullable nsdictionary
*)metrics 
views:(nsdictionary
*)views;

該方法一共有四個引數, 接下來將一一講解四個引數的含義及其使用:

format引數: 這個是具體布局的字串,形如@」v:|-10-[view1(50.0)]-20-[view2(50.0)]」稍後再講解此字串的意思;

option引數: 這個引數是乙個可複選的引數, 主要用來布局view的對齊方式;

metrics引數: 這個引數是替換vfl字串中的變數用的, 如果這麼寫:@則第一條中的布局可以替換成下面的寫法:@」v:|-10-[view1(50.0)]-20-[view2(50.0)]」其實就是替換字串中的變數使用;

views引數: 這個引數是用來儲存本條vfl語句中所有用到的view, 可以直接建立字典@對於這個引數蘋果有乙個特定的巨集,nsdictionaryofvariablebindings()因此也可以這樣寫nsdictionaryofvariablebindings(view1, view2);

該方法返回的是乙個裝有約束的陣列集合;可以直接新增到設定約束view的父view上;

如果你對上面的解釋不太理解下面用**具體舉個列子,相信你立馬回恍然大悟

- (void)viewdidload 
- (void)testconstraint views:nsdictionaryofvariablebindings(supview1, supview2)];
nsarray *s1l = [nslayoutconstraint constraintswithvisualformat:left options:0 metrics:nil views:nsdictionaryofvariablebindings(supview1)];
nsarray *v2tc = [nslayoutconstraint constraintswithvisualformat:v2t options:0 metrics:nil views:nsdictionaryofvariablebindings(supview2)];
//一般需要把約束新增到父view上
[self
.view addconstraints:v2tc];
[self
.view addconstraints:s1t];
[self
.view addconstraints:s1l];
}

效果如下圖:

符號含義

|: 表示父檢視 -: 表示距離 v: 表示垂直 h: 表示水平 >=: 表示檢視間距、寬度和高度必須大於或等於某個值 <= :表示檢視間距、寬度和高度必須小宇或等於某個值 == :表示檢視間距、寬度或者高度必須等於某個值 @: 優先順序最大為 1000

一般用法:

|-[view]-|:                          檢視處在父檢視的左右邊緣內
|-[view] : 檢視處在父檢視的左邊緣
|[view] : 檢視和父檢視左邊對齊
v:[view(100.)] : 設定檢視的高度 
h:[view(100.)] : 設定檢視的寬度
|-30.0-[view]-30.0-|: 表示離父檢視 左右間距 30
|-[view(view1)]-[view1]-| :
view和view1檢視寬度一樣，並且在父檢視內
v:|-padding-[imageview]->=0-[button]-padding| : 表示離父檢視的距離為padding,這兩個檢視間距必須大於或等於0並且距離底部父檢視為padding。此時必須對 metrics引數賦值eg. metrics:@;
[wideview(>=60
@700)] :檢視的寬度為至少為60 優先順序為700
最後要注意, h可以忽略, 預設為水平布局 , v必須要寫!!!

好了碼了半天終於大功告成, 希望此部落格對你有幫助, 記得點讚哦~

iOS自動布局之VisualFormat

iOS自動布局之autoresizingi

IOS自動布局

IOS開發之自動布局 VFL語言

iOS自動布局之VisualFormat

iOS自動布局之autoresizingi

IOS自動布局

IOS開發之自動布局 VFL語言

相關推薦