Autolayout類似于安卓里的layout,或者說類似于web開發(fā)中的html css,簡(jiǎn)單來說就是用相對(duì)布局來代替絕對(duì)成局(這是我的理解)。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比云南網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式云南網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋云南地區(qū)。費(fèi)用合理售后完善,10余年實(shí)體公司更值得信賴。
使用Autolayout有兩種方式,1.用xib配置,2.用代碼寫。
無(wú)論用xib還是代碼,需要遵循的一個(gè)原則是,一個(gè)視圖你必須包含以下兩個(gè)限制:1.position,設(shè)定x,y坐標(biāo)、上下左右間隙、居中等這些條件都能確定位置,但這幾個(gè)是相互沖突的,只能用其一;2.size, 必須設(shè)定尺寸,可以設(shè)定固定值的寬高,也可以通過設(shè)定寬高比例來等比縮放。
1.用xib配置
這種方式比較直觀,打開xib進(jìn)行配置即可,具體的使用方法網(wǎng)路上有很多介紹,這里就不細(xì)說了
2.用代碼寫
用xib配置應(yīng)該能完成大部分需要,不過還是會(huì)有要用代碼寫的時(shí)候,下面是我寫的一個(gè)例子,包含了option, metric的用法。
這個(gè)例子的效果是:xib里放置了兩個(gè)水平居中的butt1,butt3,然后用代碼創(chuàng)建了butt2,butt2與butt3水平居中對(duì)齊,最后創(chuàng)建了view1,view1只與根視圖進(jìn)行布局,與不受其他視圖影響
//butt2
{
UIButton *butt = [UIButtonbuttonWithType:UIButtonTypeCustom];
butt.backgroundColor = [UIColorredColor];
[buttsetTitle:@"2"forState:UIControlStateNormal];
butt.translatesAutoresizingMaskIntoConstraints =NO;
butt.frame = CGRectMake(0, 0, 100, 100); //這個(gè)frame其實(shí)是不需要的
[self.view addSubview:butt];
butt2 = butt;
//寬:高 = 1:1
[butt2addConstraint:[NSLayoutConstraintconstraintWithItem:butt2attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:butt2attribute:NSLayoutAttributeHeightmultiplier:1constant:0]];
//butt2與butt3水平對(duì)齊,豎直間隙20, 寬定為50
NSDictionary *viewsDict =NSDictionaryOfVariableBindings(butt3,butt2);
[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[butt3]-20-[butt2(==50)]"options:NSLayoutFormatAlignAllCenterXmetrics:nilviews:viewsDict]];
}
//A new view,相對(duì)于根視圖布局
{
UIView *view1 = [[UIViewalloc]initWithFrame:CGRectMake(0,0,0,0)];
view1.translatesAutoresizingMaskIntoConstraints = NO; //注意,代碼創(chuàng)建的view要設(shè)置此屬性為NO以防止系統(tǒng)自動(dòng)轉(zhuǎn)換autoresizing
view1.backgroundColor = [UIColorblueColor];
[self.view addSubview:view1];
//1.寬高比1:1.5
[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:view1attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:view1attribute:NSLayoutAttributeWidthmultiplier:1.5fconstant:0]];
//2.固定高度150
[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:view1attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:nilattribute:NSLayoutAttributeWidthmultiplier:0.fconstant:150.f]];
//3.水平居中 (3和4只能選其一,因?yàn)檫@兩個(gè)限制是沖突的)
// [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
//4.右邊對(duì)齊,保留10間隙
[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:view1attribute:NSLayoutAttributeTrailingrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeTrailingmultiplier:1constant:-10]];
//5.上下間隔,這里要的效果是保持頂部間隙為100,所以底部間隙要是可變的>=100,試試下面6的效果對(duì)比一下
CGFloat hMargin = 100.f;
[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-hmar-[view1]-(>=hmar)-|"options:0metrics:@{@"hmar":@(hMargin)}views:NSDictionaryOfVariableBindings(view1)]];
//6.上下間隔,頂部間隙可變
//[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[view1]-(==100)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];
}