十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
Autolayout类似于安卓里的layout,或者说类似于web开发中的html css,简单来说就是用相对布局来代替绝对成局(这是我的理解)。
创新互联-专业网站定制、快速模板网站建设、高性价比云南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式云南网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖云南地区。费用合理售后完善,10余年实体公司更值得信赖。
使用Autolayout有两种方式,1.用xib配置,2.用代码写。
无论用xib还是代码,需要遵循的一个原则是,一个视图你必须包含以下两个限制:1.position,设定x,y坐标、上下左右间隙、居中等这些条件都能确定位置,但这几个是相互冲突的,只能用其一;2.size, 必须设定尺寸,可以设定固定值的宽高,也可以通过设定宽高比例来等比缩放。
1.用xib配置
这种方式比较直观,打开xib进行配置即可,具体的使用方法网路上有很多介绍,这里就不细说了
2.用代码写
用xib配置应该能完成大部分需要,不过还是会有要用代码写的时候,下面是我写的一个例子,包含了option, metric的用法。
这个例子的效果是:xib里放置了两个水平居中的butt1,butt3,然后用代码创建了butt2,butt2与butt3水平居中对齐,最后创建了view1,view1只与根视图进行布局,与不受其他视图影响
//butt2
{
UIButton *butt = [UIButtonbuttonWithType:UIButtonTypeCustom];
butt.backgroundColor = [UIColorredColor];
[buttsetTitle:@"2"forState:UIControlStateNormal];
butt.translatesAutoresizingMaskIntoConstraints =NO;
butt.frame = CGRectMake(0, 0, 100, 100); //这个frame其实是不需要的
[self.view addSubview:butt];
butt2 = butt;
//宽:高 = 1:1
[butt2addConstraint:[NSLayoutConstraintconstraintWithItem:butt2attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:butt2attribute:NSLayoutAttributeHeightmultiplier:1constant:0]];
//butt2与butt3水平对齐,竖直间隙20, 宽定为50
NSDictionary *viewsDict =NSDictionaryOfVariableBindings(butt3,butt2);
[self.viewaddConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[butt3]-20-[butt2(==50)]"options:NSLayoutFormatAlignAllCenterXmetrics:nilviews:viewsDict]];
}
//A new view,相对于根视图布局
{
UIView *view1 = [[UIViewalloc]initWithFrame:CGRectMake(0,0,0,0)];
view1.translatesAutoresizingMaskIntoConstraints = NO; //注意,代码创建的view要设置此属性为NO以防止系统自动转换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只能选其一,因为这两个限制是冲突的)
// [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
//4.右边对齐,保留10间隙
[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:view1attribute:NSLayoutAttributeTrailingrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeTrailingmultiplier:1constant:-10]];
//5.上下间隔,这里要的效果是保持顶部间隙为100,所以底部间隙要是可变的>=100,试试下面6的效果对比一下
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)]];
}