最近看了劉坤的一篇博客（感興趣的自己去看 ）。里面講到使用masonry進(jìn)行布局的奄薇。具體情況是這樣的：
這一節(jié)我們舉例一個(gè)簡(jiǎn)單的區(qū)塊布局驳阎，常見一些電商類活動(dòng)資源模板建立。需求如下：
其中view1和view2同寬馁蒂，view2和view3,view4同高呵晚，view3和view4同寬， 所有的margin都是3远搪。要完成這樣要求的布局劣纲，可以很容易的用Autolayout來完成, 只需要指定好這些間距和寬度的關(guān)系就好了。
使用Masonry的實(shí)現(xiàn)是這樣的：
當(dāng)我們沉浸到這段代碼里時(shí)谁鳍，其實(shí)我們發(fā)現(xiàn)它是直接描述四個(gè)視圖之間的關(guān)系癞季。這樣做會(huì)有一個(gè)風(fēng)險(xiǎn)：當(dāng)里面有些微妙的關(guān)系而出現(xiàn)約束沖突時(shí)，你是不容易立刻發(fā)現(xiàn)問題所在的倘潜”疗猓或者說，當(dāng)需求發(fā)生變化時(shí)涮因，你要修改的時(shí)全部代碼废睦，而不是部分。
如果把這四個(gè)視圖看作模塊养泡，那么這四個(gè)模塊之間的依賴是非常嚴(yán)重的嗜湃。
我們現(xiàn)在給大家看一下如何使用QuickVFL進(jìn)行布局奈应。
主要是有兩步：
1. 描述視圖的層次關(guān)系
2. 描述視圖的位置關(guān)系
第一步時(shí)，我們這樣寫就可以完成工作：
在層次關(guān)系上购披，我們把視圖展示邏輯做了分割杖挣。一次只處理一個(gè)orientation。也就是刚陡，view1和容器viewRightWrapper_是一個(gè)層次惩妇。然后，同理處理view2筐乳、view3歌殃、view4的層次關(guān)系。這樣做蝙云，雖然多了兩個(gè)視圖wrapper氓皱，但因?yàn)樵赒uickVFL里，創(chuàng)建匿名的wrapper（以_結(jié)尾的視圖名字）是無成本的贮懈，所以可以忽略此問題匀泊。
第二步，我們從層次的上朵你，從外到內(nèi)分別寫它們的位置關(guān)系各聘。我們首先處理最外層的關(guān)系
在寫這一層的關(guān)系的時(shí)候，你的眼里應(yīng)該就只有view1和viewRightWrapper_抡医。嗯躲因，使用VFL很compact地描述清楚了他們的位置關(guān)系。
再往里走一層：
寫這一層的關(guān)系時(shí)忌傻，你的眼里應(yīng)該只有view2和view34Wrapper_大脉。忘掉你已經(jīng)處理過的view1和viewRightWrapper_吧，它們已經(jīng)私奔水孩，跟你一點(diǎn)關(guān)系都沒有了镰矿。至于view3、view4俘种，那是view34Wrapper_要處理的秤标，你就不用勞心了。
OK宙刘，來看最后一層：
Job done苍姜！在這過程中，其實(shí)每一個(gè)模塊都是“解耦”的悬包。你在思考如何布局的時(shí)候衙猪，就這樣如剝洋蔥一樣，一層一層，有條不紊垫释。
最關(guān)鍵的時(shí)丝格，你直接把這個(gè)文件交給框架，它就會(huì)幫你把所有東西弄好饶号。創(chuàng)建視圖的事情都不用你做铁追！
然后我們?cè)賮碛懻撘幌庐a(chǎn)品經(jīng)理要來開需求的情況季蚂。比如茫船，把view2、view3扭屁、view4的品自結(jié)構(gòu)倒轉(zhuǎn)過來算谈？壓根不是個(gè)事兒！只要在第二層里把:layout在V方向上view2和wrapper調(diào)個(gè)位置就可以料滥。
跳出這條條框框的細(xì)節(jié)然眼，我們來討論最大的一個(gè)細(xì)節(jié)：使用QuickVFL最大的工作不是寫代碼，而是在寫一個(gè)json結(jié)構(gòu)體葵腹！我們?cè)趯懘a的時(shí)候永遠(yuǎn)不要忘了這句話高每，多行代碼就是多一個(gè)香爐。多一個(gè)香爐就多一個(gè)鬼践宴。會(huì)在開發(fā)流程上多很多麻煩鲸匿。所以，當(dāng)你的project里阻肩，布局的大部分工作使用配置完成而不是代碼時(shí)带欢，你的開發(fā)效率肯定能大進(jìn)一步。
