使用Masonry自動布局

對于新手來說丰包,還是學(xué)習(xí)Masonry框架進(jìn)行布局比較好禁熏,畢竟這個框架使用的人群基數(shù)較大壤巷。

一、首先兩句話介紹一下這個框架:

1瞧毙、Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布局 簡潔明了 并具有高可讀性 而且同時支持 iOS 和 Max OS X胧华。
2、添加約束的條件主要是利用block模塊
官網(wǎng)上的sample code 截圖.png

二宙彪、Masonry支持的一些屬性如下屬性:

注意:其中l(wèi)eading與left trailing與right 在正常情況下是等價的 但是當(dāng)一些布局是從右至左時(比如阿拉伯文?沒有類似的經(jīng)驗) 則會對調(diào) 換句話說就是基本可以不理不用 用left和right就好了

三矩动、具體的使用步驟

1、首先释漆,創(chuàng)建視圖控件悲没,添加到self.view上,(PS:以下以我自己創(chuàng)建的self.firstView為例)

例如:

[self.view addSubview:self.firstView];
- (UIView *)firstView{
    if (_firstView == nil) {
        _firstView = [[UIView alloc]init];
        _firstView.backgroundColor = [UIColor orangeColor];
    }
    return _firstView;
}
2男图、將AutoresizingMask布局關(guān)掉
self.firstView.translatesAutoresizingMaskIntoConstraints = NO;
3示姿、接著添加約束條件
__weak __typeof(self) weakSelf = self;//這里用一個弱引用來表示self,用于下面的Block中逊笆,會循環(huán)引用(若不用目前也沒發(fā)現(xiàn)問題栈戳。)
[self.firstView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view.mas_left).offset(16);//使得左邊等于sele.view的左右,間距為16
make.top.equalTo(weakSelf.view.mas_top).offset(48);//使得頂部與sele.view的間距為48
make.width.equalTo(weakSelf.view.mas_width).multipliedBy(0.5);//設(shè)置寬度為self.view的一半难裆,multipliedBy倍數(shù)的意思子檀,這里是self.view寬度的0.5倍
make.height.equalTo(weakSelf.view.mas_height).multipliedBy(0.25);//設(shè)置高度為self.view的0.25倍
}];
約束條件的設(shè)置根據(jù)相對于的屬性進(jìn)行相關(guān)聯(lián),其他的控件的約束如上述一般大抵是以上的類似編寫的約束乃戈。

最后的效果圖如下:


實現(xiàn)自動布局.png

以上褂痰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市症虑,隨后出現(xiàn)的幾起案子脐恩,更是在濱河造成了極大的恐慌,老刑警劉巖侦讨,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件驶冒,死亡現(xiàn)場離奇詭異苟翻,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)骗污,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進(jìn)店門崇猫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人需忿,你說我怎么就攤上這事诅炉。” “怎么了屋厘?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵涕烧,是天一觀的道長。 經(jīng)常有香客問我汗洒,道長议纯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任溢谤,我火速辦了婚禮瞻凤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘世杀。我一直安慰自己阀参,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布瞻坝。 她就那樣靜靜地躺著蛛壳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪所刀。 梳的紋絲不亂的頭發(fā)上衙荐,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天,我揣著相機(jī)與錄音勉痴,去河邊找鬼赫模。 笑死,一個胖子當(dāng)著我的面吹牛蒸矛,可吹牛的內(nèi)容都是我干的瀑罗。 我是一名探鬼主播,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼雏掠,長吁一口氣:“原來是場噩夢啊……” “哼斩祭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起乡话,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤摧玫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诬像,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡屋群,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了坏挠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芍躏。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖降狠,靈堂內(nèi)的尸體忽然破棺而出对竣,到底是詐尸還是另有隱情,我是刑警寧澤榜配,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布否纬,位于F島的核電站,受9級特大地震影響蛋褥,放射性物質(zhì)發(fā)生泄漏临燃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一壁拉、第九天 我趴在偏房一處隱蔽的房頂上張望谬俄。 院中可真熱鬧柏靶,春花似錦弃理、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炬转,卻和暖如春辆苔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背扼劈。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工驻啤, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人荐吵。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓骑冗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親先煎。 傳聞我的和親對象是個殘疾皇子贼涩,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,619評論 2 354

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