您好,登錄后才能下訂單哦!
Autolayout類似于安卓里的layout,或者說(shuō)類似于web開(kāi)發(fā)中的html css,簡(jiǎn)單來(lái)說(shuō)就是用相對(duì)布局來(lái)代替絕對(duì)成局(這是我的理解)。
使用Autolayout有兩種方式,1.用xib配置,2.用代碼寫。
無(wú)論用xib還是代碼,需要遵循的一個(gè)原則是,一個(gè)視圖你必須包含以下兩個(gè)限制:1.position,設(shè)定x,y坐標(biāo)、上下左右間隙、居中等這些條件都能確定位置,但這幾個(gè)是相互沖突的,只能用其一;2.size, 必須設(shè)定尺寸,可以設(shè)定固定值的寬高,也可以通過(guò)設(shè)定寬高比例來(lái)等比縮放。
1.用xib配置
這種方式比較直觀,打開(kāi)xib進(jìn)行配置即可,具體的使用方法網(wǎng)路上有很多介紹,這里就不細(xì)說(shuō)了
2.用代碼寫
用xib配置應(yīng)該能完成大部分需要,不過(guò)還是會(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 = [UIButton buttonWithType:UIButtonTypeCustom];
butt.backgroundColor = [UIColor redColor];
[butt setTitle:@"2" forState:UIControlStateNormal];
butt.translatesAutoresizingMaskIntoConstraints = NO;
butt.frame = CGRectMake(0, 0, 100, 100); //這個(gè)frame其實(shí)是不需要的
[self.view addSubview:butt];
butt2 = butt;
//寬:高 = 1:1
[butt2 addConstraint:[NSLayoutConstraint constraintWithItem:butt2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:butt2 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
//butt2與butt3水平對(duì)齊,豎直間隙20, 寬定為50
NSDictionary *viewsDict = NSDictionaryOfVariableBindings(butt3,butt2);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[butt3]-20-[butt2(==50)]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:viewsDict]];
}
//A new view,相對(duì)于根視圖布局
{
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
view1.translatesAutoresizingMaskIntoConstraints = NO; //注意,代碼創(chuàng)建的view要設(shè)置此屬性為NO以防止系統(tǒng)自動(dòng)轉(zhuǎn)換autoresizing
view1.backgroundColor = [UIColor blueColor];
[self.view addSubview:view1];
//1.寬高比1:1.5
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1.5f constant:0]];
//2.固定高度150
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:0.f constant: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.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];
//5.上下間隔,這里要的效果是保持頂部間隙為100,所以底部間隙要是可變的>=100,試試下面6的效果對(duì)比一下
CGFloat hMargin = 100.f;
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hmar-[view1]-(>=hmar)-|" options:0 metrics:@{@"hmar":@(hMargin)} views:NSDictionaryOfVariableBindings(view1)]];
//6.上下間隔,頂部間隙可變
//[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[view1]-(==100)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];
}
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。