iOS autoLayout自動布局

??對于使用自動布局首先要注意以下幾點(diǎn):

  • 不要使用frame布局,這樣可以盡量減少約束沖突亏娜。
  • 一定要在設(shè)置約束之前先把視圖添加到父視圖之上。
  • 設(shè)置不允許將AutoresizingMask轉(zhuǎn)化成AutoLayout
    view.translatesAutoresizingMaskIntoConstraints = NO;

添加約束的規(guī)則:

  • 兩個同層級的View之間添加約束關(guān)系蹬挺,要添加到他們的父類上维贺。


    1.png
  • 不同層級的View之間添加約束關(guān)系,要添加在他們最近的共同父控件上巴帮。


    2.png
  • 對于有層次關(guān)系的兩個view之間的約束關(guān)系溯泣,添加到層次較高的父view上。


    3.png

使用NSLayoutConstraint進(jìn)行布局榕茧,例如如下代碼垃沦,其余的形式也都是一樣。

第一個參數(shù)view是需要添加約束的控件
第二個參數(shù)NSLayoutAttributeWidth是需要約束的部分
第三個參數(shù)NSLayoutRelationEqual比較的方式用押,就是相對其他控件肢簿,該控件是大于小于還是等于
第四個參數(shù)nil 表示相對那個控件池充,如果是相對自身就設(shè)置nil桩引。
第五個參數(shù)NSLayoutAttributeNotAnAttribute相對其他控件的的哪里進(jìn)行布局。
第六個參數(shù)0 表示相對其他控件需要乘以多少收夸。
第七個參數(shù)常量值 表示相對其他控件布局的常量值阐污。

//設(shè)置控件的寬度等于300
NSLayoutConstraint * constr = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:300];
[view addConstraint:constr];
//設(shè)置高度
NSLayoutConstraint * constr1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:70];
[view addConstraint:constr1];
    
//設(shè)置位置約束
NSLayoutConstraint *constRight = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
[self.view addConstraint:constRight];
    
NSLayoutConstraint *constBottom = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];
[self.view addConstraint:constBottom];

使用VFL進(jìn)行自動布局

  • ??VFL相對NSLayoutConstraint是顯的相對簡便些,但是VFL不是所有的都能進(jìn)行布局咱圆,有些情況下,還是需要NSLayoutConstraint來進(jìn)行布局的功氨。
  • VFl 中不能像NSLayoutConstraint那樣可以使用倍數(shù)來設(shè)置約束序苏。

使用示例:

UIView *view = [[UIView alloc]init];
view.backgroundColor = [UIColor blueColor];
[self.view addSubview:view];
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
view.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO;
NSNumber *margin = @(20);
NSNumber *cen = @(40);
//使用VFL的時候使用該方法
//設(shè)置約束
NSString *vfl  = @"H:|-margin-[view]-cen-[redView(==view)]-margin-|";

//使用系統(tǒng)的NSDictionaryOfVariableBindings方法設(shè)置
NSDictionary *metrics = NSDictionaryOfVariableBindings(margin,cen);
NSDictionary *views = NSDictionaryOfVariableBindings(view,redView);
//將方法添加父視圖    
NSArray *arr = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];
[self.view addConstraints:arr];
    
NSString *vfl1 = @"V:[view(cen)]-margin-|";
NSArray *arr1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:kNilOptions metrics:metrics views:views];
[self.view addConstraints:arr1];
NSString *vfl2 = @"V:[redView(cen)]-margin-|";
NSArray *arr2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:metrics views:views];
[self.view addConstraints:arr2];

效果圖

效果圖
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市捷凄,隨后出現(xiàn)的幾起案子忱详,更是在濱河造成了極大的恐慌,老刑警劉巖跺涤,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匈睁,死亡現(xiàn)場離奇詭異,居然都是意外死亡桶错,警方通過查閱死者的電腦和手機(jī)航唆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來院刁,“玉大人糯钙,你說我怎么就攤上這事⊥诵龋” “怎么了任岸?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長狡刘。 經(jīng)常有香客問我享潜,道長,這世上最難降的妖魔是什么嗅蔬? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任剑按,我火速辦了婚禮,結(jié)果婚禮上澜术,老公的妹妹穿的比我還像新娘吕座。我一直安慰自己,他們只是感情好瘪板,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布吴趴。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪锣枝。 梳的紋絲不亂的頭發(fā)上厢拭,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天,我揣著相機(jī)與錄音撇叁,去河邊找鬼供鸠。 笑死,一個胖子當(dāng)著我的面吹牛陨闹,可吹牛的內(nèi)容都是我干的楞捂。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼趋厉,長吁一口氣:“原來是場噩夢啊……” “哼寨闹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起君账,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤繁堡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后乡数,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體椭蹄,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年净赴,在試婚紗的時候發(fā)現(xiàn)自己被綠了绳矩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡玖翅,死狀恐怖埋酬,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情烧栋,我是刑警寧澤写妥,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站审姓,受9級特大地震影響珍特,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜魔吐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一扎筒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酬姆,春花似錦嗜桌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春层亿,著一層夾襖步出監(jiān)牢的瞬間桦卒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工匿又, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留方灾,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓碌更,卻偏偏與公主長得像裕偿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子痛单,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評論 2 350

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