iOS6+AutoLayout使用教程

为了适配iPhone6 Plus,必须学会AutoLayout了,研究了两天,记得一下心得

Autolayout类似于安卓里的layout,或者说类似于web开发中的html css,简单来说就是用相对布局来代替绝对成局(这是我的理解)。

使用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 = [UIButton buttonWithType:UIButtonTypeCustom];

butt.backgroundColor = [UIColor redColor];

[butt setTitle:@"2" forState:UIControlStateNormal];

butt.translatesAutoresizingMaskIntoConstraints = NO;

butt.frame = CGRectMake(0, 0, 100, 100);    //这个frame其实是不需要的

[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水平对齐,竖直间隙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,相对于根视图布局

{

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];

view1.translatesAutoresizingMaskIntoConstraints = NO;

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只能选其一,因为这两个限制是冲突的)

//    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

//4.右边对齐,保留10间隙

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];

//5.上下间隔,这里要的效果是保持顶部间隙为100,所以底部间隙要是可变的>=100,试试下面6的效果对比一下

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)]];

}

关于VFL,请参考苹果官方文档: Visual Format Language

时间: 2024-10-11 00:16:43

iOS6+AutoLayout使用教程的相关文章

从此爱上iOS Autolayout

转:从此爱上iOS Autolayout 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触auto

自动布局autoLayout解决不同屏幕

这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几乎快被其折

[转]从此爱上iOS Autolayout

原文地址 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几

李洪强常见问题总结

1.搞清楚touch事件的传递(事件的响应链)   事件的响应(responder chain)   只有继承了UIResponder的类才能响应touch事件,从上图的响应者链可以看出,优先是最上层的view响应事件,如果该view有视图控制器的话会是下一个响应者,否者就是该view的父视图,这样至上而下传递事件.直到单例UIWindow对象,最后是单例UIApplication对象以终止,UIApplication的下一个响应者是nil,已结束整个响应循环.事件在传递过程中视图可以决定是否需

iOS 自动布局

自动布局框架 Masonry PureLayout FLKAutoLayout KeepLayout UIView+Autolayout 相关教程: iOS 开发实践之 Auto Layout Masonry介绍与使用实践(快速上手Autolayout) IOS自动布局之Autoresizing iOS中的相对布局:AutoLayout

iOS开发——面试总结(一)

面试总结(一) 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: 1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIResponder的类才能响应touch事件,从上图的响应者链可以看出,优先是最上层的 view响应事件,如果该view有视图控制器的话会是下一个响应者,否者就是该view的父视图,这样至上而下传递事件.直到单例UIWindow对 象,最后是单例UIApplication对象以终止,UIApplication的

ios8新特性屏幕适配之sizeclass

ios8推出也有一段时间了,由于时间比较紧,所以没去学习ios8的新特性, 随着iphone6,6+的推出,ios屏幕适配是一个大问题,如何成功适配各种尺寸以及ipad呢? 苹果公司为了解决这个问题给出了新技术sizeclass 下面是我对sizeclass学习的一些笔记,希望对大家有用: 1>屏幕适配的发展历程 代码计算frame -> autoreszing(父控件和子控件的关系ios6) -> autolayout(任何控件都可以产生关系ios7) -> sizeclass(

iOS 必备技术点

IOS面试问题总结 分类: IOS开发2013-11-20 17:26 5873人阅读 评论(1) 收藏 举报 目录(?)[+] 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: 1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIResponder的类才能响应touch事件,从上图的响应者链可以看出,优先是最上层的view响应事件,如果该view有视图控制器的话会是下一个响应者,否者就是该view的父视图,这样至上而下传递事

ios知识点

  1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIResponder的类才能响应touch事件,从上图的响应者链可以看出,优先是最上层的view响应事件,如果该view有视图控制器的话会是下一个响应者,否者就是该view的父视图,这样至上而下传递事件.直到单例UIWindow对象,最后是单例UIApplication对象以终止,UIApplication的下一个响应者是nil,已结束整个响应循环.事件在传递过程中视图可以决定是否需要对