MyLayout和XIB或SB的混合使用方法

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的特性摧找。

  1. 第一步就是要將XIB或者SB中對AutoLayout和Size Classes的支持去掉:


    取消對AutoLayout的支持
  2. 第二步就是將視圖控制器中的根視圖的類名轉(zhuǎn)化為對應(yīng)的布局視圖類:


    根視圖的類名轉(zhuǎn)換
  3. 第三步將類名轉(zhuǎn)換后您可以切換到Show the attributes inspector 標(biāo)簽中進行布局視圖特有屬性的設(shè)置:

布局視圖的屬性設(shè)置.png

您會發(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列表中

設(shè)置自定義擴展屬性

您會發(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é)果:

布局運行結(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ù)雜的布局屬性就可以了:

代碼和編輯器結(jié)合布局

和AutoLayout結(jié)合使用方法

上面的例子介紹的是在不使用AutoLayout時如何將MyLayout和XIB以及SB結(jié)合的場景拉盾,那么如果我們使用AutoLayout并且想用到MyLayout的布局視圖類怎么辦呢?答案很簡單:

MyLayout布局視圖本身就和其他普通視圖一樣通過AutoLayout來設(shè)置約束豁状,而布局視圖里面的子視圖則不能使用AutoLayout來設(shè)置約束捉偏,而是用上面介紹的方式來設(shè)置各種布局屬性倒得。

AutoLayout和MyLayout混合使用

TangramKit對XIB以及SB的支持

目前TangramKit并沒有在XCODE的界面編輯器中定義出可設(shè)置的擴展屬性。因此當(dāng)你用TangramKit進行界面布局時夭禽,您可以在XCODE的界面編輯器中將對應(yīng)的界面視圖添加上去霞掺。然后通過建立插座變量來在代碼中設(shè)置各種布局屬性。

小結(jié)

從上面可以看出MyLayout并不排斥XIB或者SB讹躯,也并不排斥AutoLayout菩彬,相反如果您能夠靈活的運用那么將會大大的減少您構(gòu)建應(yīng)用的時間和精力。

最后歡迎大家訪問我的界面布局庫:

您的點贊和支持將是我開發(fā)的動力潮梯。骗灶。。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末秉馏,一起剝皮案震驚了整個濱河市耙旦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌萝究,老刑警劉巖免都,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異帆竹,居然都是意外死亡绕娘,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門馆揉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來业舍,“玉大人,你說我怎么就攤上這事升酣∠夏海” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵噩茄,是天一觀的道長下面。 經(jīng)常有香客問我,道長绩聘,這世上最難降的妖魔是什么沥割? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮凿菩,結(jié)果婚禮上机杜,老公的妹妹穿的比我還像新娘。我一直安慰自己衅谷,他們只是感情好椒拗,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蚀苛。 火紅的嫁衣襯著肌膚如雪在验。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天堵未,我揣著相機與錄音腋舌,去河邊找鬼。 笑死渗蟹,一個胖子當(dāng)著我的面吹牛块饺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拙徽,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼刨沦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了膘怕?” 一聲冷哼從身側(cè)響起想诅,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎岛心,沒想到半個月后来破,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡忘古,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年徘禁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片髓堪。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡送朱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出干旁,到底是詐尸還是另有隱情驶沼,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布争群,位于F島的核電站回怜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏换薄。R本人自食惡果不足惜玉雾,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望轻要。 院中可真熱鬧复旬,春花似錦、人聲如沸冲泥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至幸冻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間咳焚,已是汗流浹背洽损。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留革半,地道東北人碑定。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像又官,于是被迫代替她去往敵國和親延刘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容