iOS--VFL--autolayout--自動布局

------------ VFL API介紹 ------------

 1.NSLayoutConstraint API
 
 + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts
 metrics:(NSDictionary *)metrics
 views:(NSDictionary *)views;
 參數介紹:
 
 format:此參數為你的vfl語句狰住,比如:@"H:|-[button]-|"
 
 opts:枚舉參數,默認寫0,具體跟據你所實現的需求去選擇你想要的枚舉
 
 metrics:這里是一個字典旧噪,當在format中使用了動態(tài)數據比如上現這句:@"H:|-[button(==width)]-|",表示這個button的寬度為width,那么這個參數去哪里找呢?就是在這個字典里面找到key對就的值,如果沒有找到這個值燎斩,app就會crash.
 
 views:顧名思義怪瓶,這是傳所有你在vfl中使用到的view许布,那在上面這句例子中的應該怎么傳呢灵妨?結果是這樣的:NSDictionaryOfVariableBindings(button).如果你使用到了多個view,就可以這樣NSDictionaryOfVariableBindings(button,button1,button3...),這個名字也要跟參數format中的一一對應缅疟,缺一不可.注意這一點,否則會crash
 
 2.UIView API
 
 - (void)addConstraints:(NSArray *)constraints;
 在上面1中返回值類型是NSArray,而現在這個方法的參數也剛好是一個NSArray類型岩饼。那么直接把上一個方法的返回值當作這個方法的參數就可以了荚虚。如果你有多個VFL,你也可以利用可變數組( NSMutableArray)把這多個VFL返回的數據拼在一起籍茧,然后再調用addConstraints:方法版述。

1:單控件的使用

///第一個aButton
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setTitle:@"點擊一下" forState:UIControlStateNormal];
aButton.backgroundColor = [UIColor blackColor];

///PS:值得注意的是,在用代碼創(chuàng)建的UIView時,一定要加上下面這句代碼寞冯,如果沒有上面這一行院水,你的約束將不生效,控制臺會輸出一連串的錯誤.
aButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:aButton];

/**
這里的意思是:aButton在水平方向上距離它的superView,左右各20px简十,比如在這里他的大小就是 屏幕寬-20*2=280.在@"H:|-[aButton]-|"這個語句中,其中"H:"是表示這是水平方向上的約束撬腾,"|"是表示superView螟蝙,"-"表示一個間隔空間,這個間隔如果是如superView之間的民傻,那么就是20px,如果是兩個同級別的view胰默,比如@"[aButton]-[bButton]",那么這里表示的是8px.
上面說的都是默認值漓踢,如果不想要默認牵署,想緊貼著邊,可以這樣寫:@"H:|-(0)-[aButton]-(0)-|" ;這樣就是緊貼著了喧半。
*/

NSArray *contraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[aButton]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton)];

/**
跟上面有點不同,@"V:|-20-[button(==30)]",其中"V:"中代表這是垂直方向上的約束,"|-20-"這里的意思就是距離頭部為20px奴迅,相當于y坐標為20。后面的"[aButton(==30)]"挺据,是指定這個aButton的高度為30px.y坐標固定了取具,高度固定了,那這個view的約束就完成了扁耐。如果你有需要暇检,你的高度值(或者其他同類型的)可以使用>=,==,<=來表示,甚至你可以組合來用婉称,像上面的30块仆,你可以指定一個區(qū)別构蹬,比如:(>=30,<=40),這同樣也是可以的悔据。如果你想表達他的優(yōu)先級別,可以使用@"V:|-20-[aButton(==30@1000)]",這個@1000庄敛,就是他的級別了。你可以適配XIB或者SB對它的優(yōu)先級做更多的處理.
*/

NSArray *contraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[aButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton)];

[self.view addConstraints:contraints1];
[self.view addConstraints:contraints2];

2:多控件之間關聯(lián)使用

///第二個bButton
UIButton *bButton = [UIButton buttonWithType:UIButtonTypeCustom];
[bButton setTitle:@"我是第二個bButton" forState:UIControlStateNormal];
bButton.backgroundColor = [UIColor blueColor];

bButton.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:bButton];

///添加H水平約束

NSArray *contraints3 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[bButton]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bButton)];

/**
VFL語句為:@"V:[aButton]-[bButton(==30)]"蜜暑,這里用到了兩個view在VFL語句里面铐姚。剛才我們也說到,"-"在同一級別的View上使用的時候表示的間距為8個像素點,整一句的意思就是bButton的y坐標離aButton有8個像素點.在不使用auto layout的時候肛捍,可以這樣表達CGRectGetMaxY(aButton.frame)+8.
當然隐绵,如果想距離50像素可以這樣寫:@"V:[aButton]-50-[bButton(==30)]";

添加V垂直約束 (最后面字典views后的參數跟 format 中出現的要一一對應,缺一不可.否則會報aButton is not a key in the views dictionary)比如 VFL 出現了兩個button拙毫,那么后面也要有這兩個button
*/

NSArray *contraints4 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

[self.view addConstraints:contraints3];
[self.view addConstraints:contraints4];

///注釋了上面的 添加contraints4 , 再改一下上面這一句VFL

NSArray *contrainst5 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(==height)]" options:0 metrics:@{@"height":@30} views:NSDictionaryOfVariableBindings(aButton,bButton)];

[self.view addConstraints:contrainst5];

//再次運行依许,你會發(fā)現,效果是一樣的缀蹄。這樣你就知道怎么動態(tài)去給view加上高度或者寬度峭跳,或是其他間距了吧?

/**
那么缺前,如何做到兩個View蛀醉,或是多個View之間等高,或者等寬呢衅码?能用VFL可以做到嗎拯刁?除了通過上面的直接賦值寬高的數值外,VFL還提供了另外一種寫法用于等寬等高上逝段。

接著上面垛玻,我們改一下代碼
*/

NSArray *contrainst6 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[bButton(aButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

NSArray *contrainst7 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(aButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

//通過@"H:|-[button1(button)]",@"V:[button]-[button1(button)]"奶躯,這兩句就可以輕松實現等寬等高了帚桩!

[self.view addConstraints:contrainst6];
[self.view addConstraints:contrainst7];

pragma 3:最后對格式的字符串作一個總結介紹

/**
 
 功能        表達式
 
 水平方向          H:  Horizontal
 
 垂直方向          V:  Vertical
 
 Views         [view]
 
 SuperView      |
 
 關系         >=,==,<=
 
 空間,間隙       -
 
 優(yōu)先級        @value
 
 */

///例子

UIView *aView = [[UIView alloc]init];
aView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:aView];

//沒有這句的話,而又加了下面兩句 addConstrainsts 則 aView 都不會顯示在self.view上嘹黔,即使上一句寫了 addSubview账嚎。
aView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-40-[aView(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[aView(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView,bButton)]];


UIView *bView = [[UIView alloc]init];
bView.backgroundColor = [UIColor purpleColor];
[self.view addSubview:bView];

bView.translatesAutoresizingMaskIntoConstraints = NO;

///實現與aView等大小
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[aView]-50-[bView(aView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView,bView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[bView(aView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bButton,bView,aView)]]; //注意后面字典中出現的views一定要與FLV里出現的一致,不能少,多了可以儡蔓,如寫上aButton也沒關系醉锄。


///這樣就可以根據(如果有一個裝文字的label,算出其rect)大小設置view的大小了
CGFloat fload = 100;
NSDictionary *dic = @{@"width":@(fload),@"height":@50};

UIView *cView = [[UIView alloc]init];
cView.backgroundColor = [UIColor grayColor];
[self.view addSubview:cView];

cView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView]-50-[cView(==width)]" options:0 metrics:dic views:NSDictionaryOfVariableBindings(bView,cView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[cView(==height)]" options:0 metrics:dic views:NSDictionaryOfVariableBindings(bButton,cView)]];



///根據文字大小來決定view的長度
UILabel *label1 = [[UILabel alloc]init];
label1.backgroundColor = [UIColor yellowColor];
label1.text = @"abcdefghijklmnddsafksajfkjwiojfaj";
label1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:label1];

///計算文字長度
float width = [label1 textRectForBounds:CGRectMake(0, 0, CGFLOAT_MAX, 30) limitedToNumberOfLines:1].size.width;
NSDictionary *dic2 = @{@"width2":@(width)};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-40-[label1(==width2)]" options:0 metrics:dic2 views:NSDictionaryOfVariableBindings(label1)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[cView]-50-[label1(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(cView,label1)]];

//另一種計算文字長度的方法
//CGRect rect = [label.text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, high) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:label.font.pointSize]} context:nil];
//float width = rect.size.width;
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末浙值,一起剝皮案震驚了整個濱河市恳不,隨后出現的幾起案子,更是在濱河造成了極大的恐慌开呐,老刑警劉巖烟勋,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件规求,死亡現場離奇詭異,居然都是意外死亡卵惦,警方通過查閱死者的電腦和手機阻肿,發(fā)現死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沮尿,“玉大人丛塌,你說我怎么就攤上這事⌒蠹玻” “怎么了赴邻?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵姥敛,是天一觀的道長了赌。 經常有香客問我袄秩,道長筒狠,這世上最難降的妖魔是什么辩恼? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任聘萨,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布乒省。 她就那樣靜靜地躺著,像睡著了一般十籍。 火紅的嫁衣襯著肌膚如雪蛆封。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天勾栗,我揣著相機與錄音惨篱,去河邊找鬼。 笑死围俘,一個胖子當著我的面吹牛砸讳,可吹牛的內容都是我干的。 我是一名探鬼主播界牡,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼簿寂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宿亡?” 一聲冷哼從身側響起常遂,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挽荠,沒想到半個月后烈钞,有當地人在樹林里發(fā)現了一具尸體泊碑,經...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年毯欣,在試婚紗的時候發(fā)現自己被綠了馒过。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡酗钞,死狀恐怖腹忽,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情砚作,我是刑警寧澤窘奏,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站葫录,受9級特大地震影響着裹,放射性物質發(fā)生泄漏。R本人自食惡果不足惜米同,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一骇扇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧面粮,春花似錦少孝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至柴底,卻和暖如春婿脸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柄驻。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工狐树, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凿歼。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓褪迟,卻偏偏與公主長得像冗恨,于是被迫代替她去往敵國和親答憔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內容