MyLayout是一個可以非常簡單和方便的實現(xiàn)各種界面布局的第三方開源庫。在我的github項目中大部分DEMO都是通過代碼來實現(xiàn)界面布局的臼膏,但這并不是表示MyLayout不支持XIB和SB囤采。
在構(gòu)建一個應(yīng)用的MVC框架中西剥,我們希望模型削葱、視圖料滥、控制這三部分都盡可能的低耦合,而蘋果推薦的視圖部分構(gòu)建則是通過XIB或者SB來完成的模软。因為MyLayout中的各種布局視圖類其實都是從UIView派生的琅攘,因此MyLayout是完全可以和XIB以及SB混合使用的。
MyLayout的一些布局視圖屬性以及子視圖的擴展布局屬性是可以在XIB或者SB界面編輯器里面進行設(shè)置的银觅。唯一的一個缺點是這些屬性的設(shè)置不能起到所見即所得的效果。 因為MyLayout是一個獨立而完整的界面布局框架壤短,因此您可以和系統(tǒng)默認(rèn)的AutoLayout混合使用设拟,也可以完全獨立的單獨使用。
不和AutoLayout以及Size Classes結(jié)合使用的方法
當(dāng)您使用MyLayout進行界面布局時久脯,那么要求至少應(yīng)該存在一個布局視圖纳胧,否則所有關(guān)于子視圖的擴展布局屬性都無效,因為子視圖的這些擴展屬性只有在布局視圖里面才有用帘撰。MyLayout是一個完整而獨立的布局體系跑慕,因此要求我們的布局視圖內(nèi)的子視圖不能再通過設(shè)置AutoLayout的約束來進行布局了,因此我們可以在XIB或者SB中完全不需要AutoLayout以及Size Classess的特性摧找。
-
第一步就是要將XIB或者SB中對AutoLayout和Size Classes的支持去掉:
-
第二步就是將視圖控制器中的根視圖的類名轉(zhuǎn)化為對應(yīng)的布局視圖類:
第三步將類名轉(zhuǎn)換后您可以切換到Show the attributes inspector 標(biāo)簽中進行布局視圖特有屬性的設(shè)置:
您會發(fā)現(xiàn)上面圖中出現(xiàn)了大量對MyLayout布局特有屬性以及子視圖的擴展布局屬性設(shè)置的地方核行。你可以在這里設(shè)置布局視圖以及子視圖的擴展屬性。我這里就分別設(shè)置了根視圖布局的topPadding屬性值為20蹬耘,subviewVSpace屬性值為30芝雪。
在XCODE中如果您想要將視圖類的自定義屬性出現(xiàn)在attributes inspector 中的話,您需要在您的自定義屬性前面加上IBInspectable 關(guān)鍵字综苔。比如下面的定義:
@property(nonatomic, assign) IBInspectable CGFloat myTop;
@property(nonatomic, assign) IBInspectable CGFloat myLeading;
@property(nonatomic, assign) IBInspectable CGFloat myBottom;
@property(nonatomic, assign) IBInspectable CGFloat myTrailing;
目前支持** IBInspectable關(guān)鍵字的屬性只有NSString惩系、BOOL、int如筛、float堡牡、double、CGSize杨刨、UIColor晤柄、UIImage等基本屬性,而對枚舉類型以及其他對象類型暫時不支持妖胀,那么假如我想設(shè)置枚舉類型的值比如布局視圖的gravity屬性時怎么辦呢芥颈?我們可以切換到Show the Identify inspector標(biāo)簽中的 User Defined Runtime Attributes列表中
您會發(fā)現(xiàn)所有設(shè)置的擴展屬性都會在這里同時出現(xiàn)惠勒,因此您也可以在這里設(shè)置自定義的擴展屬性。 當(dāng)某個自定義屬性無法在attributes inspector標(biāo)簽中設(shè)置時浇借,您可以在User Defined Runtime Attributes 進行設(shè)置捉撮,我在這里添加了對布局視圖gravity的設(shè)置。這里設(shè)置為1799的原因是MyGravity_Fill
的枚舉值就是1799(參考MyGravity類型枚舉值的定義)妇垢。通過gravity屬性設(shè)置了所有子視圖均分高度和以及寬度和布局視圖相等巾遭。設(shè)置完畢后我們分別按順序添加3個高度一致的子視圖如下:
上面的中我們可以看出,我們并不需要為子視圖設(shè)置任何附加的約束闯估,我們也沒有為子視圖設(shè)置擴展屬性灼舍。我們只是按順序添加上去。下面的圖片就是實際的運行的結(jié)果:
從上面的例子里面我們可以看出MyLayout是可以完全和XIB以及SB無縫結(jié)合的涨薪,我們在沒有任何編碼的情況下骑素,通過幾個簡單屬性的設(shè)置就實現(xiàn)了三個子視圖的垂直高度均分以及寬度和布局視圖相等以及每個子視圖之間間隔30的功能。(假如你用AutoLayout來設(shè)置約束的話刚夺,我相信要實現(xiàn)同樣的功能献丑,您一定要設(shè)置非常多的約束來完成吧。)在這里唯一的缺陷就是MyLayout的屬性設(shè)置無法在XCODE界面編輯器中所見即所得侠姑。
上面的例子我們進行了簡單的布局?jǐn)U展屬性設(shè)置创橄,那么如果我們要實現(xiàn)布局套布局怎么辦呢? 既然我們可以把根視圖轉(zhuǎn)化為一個布局視圖類,那么我相信您可以舉一反三了莽红。我們只要直接在根布局視圖中妥畏,先添加一個UIView視圖,然后把類名改為對應(yīng)想要使用的布局視圖就可以了安吁。我們將上面例子中的中間UILabel改為一個水平線性布局(需要注意的是在放置時需要將三個子視圖的frame的高度設(shè)置為一致醉蚁,這個gravity屬性拉伸才能得到相同的高度。)鬼店。而水平線性布局則有2個子視圖:
上圖中我將中間的視圖的UIView類改為了MyLinearLayout网棍。并設(shè)置了orientation屬性為1也就是水平線性布局方向,同時設(shè)置了水平線性布局的四周的邊界為10妇智。下面就是運行的實際效果:
這樣是不是非常的簡單确沸。當(dāng)然如果您不想在XCODE的界面編輯器中設(shè)置布局視圖的各種屬性,而是想通過界面編輯器來建立視圖俘陷,然后通過代碼設(shè)置屬性或者要設(shè)置界面編輯器無法設(shè)置的布局屬性時。那么你需要將布局視圖設(shè)置為一個IBoutlet插座變量观谦,然后在對應(yīng)的地方設(shè)置布局屬性或者子視圖擴展屬性或者復(fù)雜的布局屬性就可以了:
和AutoLayout結(jié)合使用方法
上面的例子介紹的是在不使用AutoLayout時如何將MyLayout和XIB以及SB結(jié)合的場景拉盾,那么如果我們使用AutoLayout并且想用到MyLayout的布局視圖類怎么辦呢?答案很簡單:
MyLayout布局視圖本身就和其他普通視圖一樣通過AutoLayout來設(shè)置約束豁状,而布局視圖里面的子視圖則不能使用AutoLayout來設(shè)置約束捉偏,而是用上面介紹的方式來設(shè)置各種布局屬性倒得。
TangramKit對XIB以及SB的支持
目前TangramKit并沒有在XCODE的界面編輯器中定義出可設(shè)置的擴展屬性。因此當(dāng)你用TangramKit進行界面布局時夭禽,您可以在XCODE的界面編輯器中將對應(yīng)的界面視圖添加上去霞掺。然后通過建立插座變量來在代碼中設(shè)置各種布局屬性。
小結(jié)
從上面可以看出MyLayout并不排斥XIB或者SB讹躯,也并不排斥AutoLayout菩彬,相反如果您能夠靈活的運用那么將會大大的減少您構(gòu)建應(yīng)用的時間和精力。
最后歡迎大家訪問我的界面布局庫:
- MyLayout(OC版):https://github.com/youngsoft/MyLinearLayout
- TangramKit(Swift版):https://github.com/youngsoft/TangramKit
您的點贊和支持將是我開發(fā)的動力潮梯。骗灶。。