制作一个类似苹果VFL的格式化语言来描述UIStackView
在項目中總是希望頁面上各處的文字，顏色，字體大小甚至各個視圖控件布局都能夠在發版之后能夠修改以彌補一些前期考慮不周，或者根據統計數據能夠隨時進行調整，當然是各個版本都能夠統一變化。看到這樣的要求后，第一反應是這樣的頁面只能改成H5，或者嘗試使用React Native來應對這種要求。
?
既然UIStackView已經提供了一種既先進又簡潔的布局思路，為何不通過制作一個類似VFL這樣的DSL語言來處理布局。這樣不就能夠通過下發一串DSL字符串的方式來進行內容樣式甚至布局的更換，不用跟版，還能使多版本統一。同時在端內直接用這樣的DSL語言來寫界面不光能夠減少代碼量易于維護，還能夠很直觀方便的看出整個界面布局結構。
?
AssembleView（組裝視圖）和PartView（零件視圖）
?
在設計格式化語言之前需要對布局做個統一思想進行管理，在看了WWDC里關于UIStackView的介紹后感覺任何復雜的布局都能夠通過這樣一種組合排布再組合排布的思路特別適合用格式化語言來描述。于是我想出兩個視圖概念。
?
一個是AssembleView組合視圖，專門用于對其PartView子視圖進行排列，比如說是水平排列還是垂直排列，PartView是按照居中對齊還是居左等對齊方式，各個PartView之間間隔是多少。
?
PartView決定自己視圖類型，內容，無固定大小的可以設置大小，同時AssembleView可以作為PartView被加入另一個AssembleView里進行排列，這樣各種設計圖都可以在初期通過拆解分成不同的AssembleView和PartView進行組合套組合布局出來。
?
格式化語言
?
接下來是如何通過格式化語言來描述AssembleView和PartView。“{}”符號里包含的是AssembleView的設置，“[]”符號里是PartView的設置，“()”里是他們的屬性設置，“”可以將對象帶入到設置里。下面舉幾個例子說明下。完整Demo放到了Github上：https://github.com/ming1016/STMAssembleView
?
三個星星水平對齊居中排列
?
h表示水平排列horizontal，c表示居中center，“[]”PartView會根據順序依次添加排列，imageName屬性能夠指定本地圖片
?
?
三個星星水平對齊居中排列
?
{
????hc(padding:30)
????[(imageName:starmingicon)]
????[(imageName:starmingicon)]
????[(imageName:starmingicon)]
}
?
AssembleView里套作為PartView的AssembleView的復雜情況
?
color可以指定文字顏色，font指定文字大小
?
?
AssembleView里套作為PartView的AssembleView的復雜情況
?
{
????ht(padding:10)
????[avatarImageView(imageName:avatar)]
????[
????????{
????????????vl(padding:10)
????????????[(text:戴銘,color:AAA0A3)]
????????????[(text:Starming站長,color:E3DEE0,font:13)]
????????????[(text:喜歡畫畫編程和寫小說,color:E3DEE0,font:13)]
????????}
????????(width:210,backColor:FAF8F9,backPaddingHorizontal:10,backPaddingVertical:10,radius:8)
????]
}
?
給PartView設置背景色和按鈕
?
設置背景色使用backColor，背景距離設置的PartView的內容間距通過backPaddingHorizontal屬性設置水平間距，backPaddingVertical設置垂直間距，“”符號帶入的button通過button屬性設置。
?
?
[
????{
????????hc(padding:4)
????????[(imageName:starmingicon,width:14,height:10)]
????????[(text:關注,font:16,color:FFFFFF)]
????}
????(height:36,backColor:AAA0A3,radius:8,backBorderWidth:1,backBorderColor:E3DEE0,backPaddingHorizontal:80,backPaddingVertical:10,button:)
]
?
AssembleView設置忽略約束的方法
?
水平排列時，通過ignoreAlignment屬性設置忽略left約束，如果是垂直排列設置top忽略。
?
?
{
????hc(padding:5)
????[(text:STMAssembleView演示,color:E3DEE0,font:13)]
????[(imageName:starmingicon,width:14,height:10,ignoreAlignment:left)]
????[(text:Starming星光社,color:E3DEE0,font:13)]
}
?
將前面的視圖組合成一個AssembleView
?
?
將前面的視圖組合成一個AssembleView
?
ASS(@"{
????vc(padding:20)
????[%@(height:90)]
????[%@(height:36,backColor:AAA0A3,radius:8,backBorderWidth:1,backBorderColor:E3DEE0,backPaddingHorizontal:80,backPaddingVertical:10,button:)]
????[%@(height:25)]
????[%@(ignoreAlignment:top,isFill:1,height:16)]
}",midStr,followBtStr,centerStr,desStr)
?
AssembleView的屬性
?
-
當在“{}”里面第一個字母是v表示垂直排列vertical，是h表示水平排列horizontal
-
第二個字母是c表示所有PartView居中對齊center，l表示居左對齊left，r表示居右對齊right，t表示居上對齊top，b表示居下對齊bottom。
-
padding：默認各個PartView的間距。
?
PartView的屬性
?
-
如果不希望通過屬性生成視圖，可以通過在[后直接填入帶入對象對應的key，然后再在()里設置屬性。
?
PartView布局相關屬性
?
-
width：UILabel和UIImage這樣有固定大小的可以不用設置，會按照固定大小的來。
-
height：有固定大小的可以不用設置。
-
isFill：垂直排列時會將寬設置為父AssembleView的寬，水平排列時會將高設置為父AssembleView的高。
-
padding：設置后會忽略父AssembleView里設置的padding，達到自定義間距的效果。
-
partAlignment：可以自定義對齊方向，設置后會忽略父AssembleView里設置的對齊。值可填center，left，right，top，bottom。
-
ignoreAlignment：設置忽略的約束方向，在父AssembleView不需要由子PartView決定大小的情況下，可以通過打斷某個方向約束來實現拆開排列的效果。值可填center，left，right，top，bottom。
?
PartView權重相關屬性
?
-
crp：Compression Resistance Priority的設置，根據權重由低到高值可以設置為fit，low，high，required。對應的UILayoutPriority的分別是UILayoutPriorityFittingSizeLevel，UILayoutPriorityDefaultLow，UILayoutPriorityDefaultHigh，UILayoutPriorityRequired。
-
minWidth：對應NSLayoutRelationGreaterThanOrEqual，設置一個最小的寬
-
maxWidth：對應NSLayoutRelationLessThanOrEqual，設置一個最大的寬
?
PartView視圖控件相關設置
?
通過以下屬性即可生成對應的UILabel，UIImageView或者UIButton等控件視圖，而不用特別指出需要生成哪種控件視圖
?
-
text：設置文字內容
-
font：設置字體，可以帶入一個UIFont，也可以直接設置一個字體大小，解析時會判斷類型。
-
color：設置顏色，可以帶入一個UIColor，也可以直接設置一個十六進制顏色，解析時會判斷類型。
-
imageName：設置本地圖片，值是本地圖片名稱。
-
image：帶入一個UIImage。
-
imageUrl：設置一個網絡圖片的url地址，ps:目前需要通過來帶入一個字符串。
?
PartView的通用設置
?
可以為PartView創建一個底部視圖，并設置其樣式。也可以添加一個UIButton設置UIControlStateHighlighted時的樣式。
?
-
backColor：設置底部視圖的顏色，可以帶入一個UIColor，也可以直接設置一個十六進制顏色，解析時會判斷類型。
-
backPaddingHorizontal：設置當前PartView視圖距離底部視圖top和bottom的間距。
-
backPaddingVertical：設置當前PartView視圖距離底部視圖left和right的間距。
-
backBorderColor：設置底部視圖邊框的顏色，可以帶入一個UIColor，也可以直接設置一個十六進制顏色，解析時會判斷類型。
-
backBorderWidth：設置底部視圖邊框寬。
-
radius：設置底部視圖的圓角半徑。
-
button：帶入一個button。
-
buttonHighlightColor：設置button在UIControlStateHighlighted時的顏色，默認是透明度0.05的黑色。
?
解析格式化語言
?
解析過程的第一步采用掃描scanner程序將字符串按照分析符號表將字符流序列收集到有意義的單元中。
?
第二步將這些單元逐個歸類到對應的類別中。比如解析到“()”里內容時就將其歸類到對應的AssembleView的屬性或者PartView的屬性類別中。在歸類過程中會出現PartView是AssembleView，這個Assemble里面又有這樣作為PartView的AssembleView這樣層層套的情況，所以需要采用類似引用計數方式保證在最后一個“}”符號結束時能將整個Assemble遞歸進行解析。
?
第三步將各個類別集合轉換成對應原生代碼從而生成對應的視圖布局。
?
具體實現可以查看STMAssembleView.m文件。Github地址：https://github.com/ming1016/STMAssembleView
?
如何生成頁面
?
生成頁面需要實現格式化語言對應的原生代碼，所有PartView的屬性都會存放在STMPartMaker里，包括帶入的自定義視圖還有用于生成視圖控件的屬性等。PartView屬性設置完成后會在STMPartView這個類中先決定對應的視圖控件，并將STMPartMaker里的屬性都設置上。實現代碼可以查看STMPartView.m里的- (STMPartView *)buildPartView方法。
?
接下來STMAssembleView會在buildAssembleView時進行布局，具體實現代碼可以查看STMAssembleView.m里的- (STMAssembleView *)buildAssembleView方法。
?
總結
以上是生活随笔為你收集整理的制作一个类似苹果VFL的格式化语言来描述UIStackView的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【CodeForces 577C】Vas
- 下一篇： LateUpdate、Late、Fixe