storyboard 自动布局

autoResizing:

一共六条约束。

四周的四条约束:用于保证和其他视图的距离保持不变(如果勾选保持不变)

中间的两条约束:用于是否允许该视图可以缩放(如果勾选,则可以缩放)

缺陷:如果在一个父视图上添加多个子视图的时候,需要让两个子视图存在某种约束的时候,不怎么可能实现

通过代码实现autoResizing

view.autoresizingMask = UIViewAutoresizingNone;//默认不进行自动布局
/*
默认不进行自动布局
UIViewAutoresizingNone
设置表示可伸缩,相当于NIB文件设置不勾选   UIViewAutoresizingFlexibleLeftMargin
UIViewAutoresizingFlexibleRightMargin        UIViewAutoresizingFlexibleTopMargin  UIViewAutoresizingFlexibleBottomMargin
设置表示可伸缩,相当于NIB文件设置勾选
设置横向可以缩放
UIViewAutoresizingFlexibleWidth  
设置纵向可以缩放     UIViewAutoresizingFlexibleHeight
*/

autoLayout:重点

1、使用autoLayout后,frame失效

黄色(警告):绘制的视图和添加约束后应该显示的位置不一致,不影响显示结果(使用update frame更新 frame值)

红色(警告):缺少约束,约束冲突

update frame:修改frame,以约束显示视图

update Constraint:修改约束,以frame显示视图

2、代码创建约束

使用代码创建autoLayout约束的时候,首先应该把autoResizing关掉

 view.translatesAutoresizingMaskIntoConstraints =NO;

创建方式

NSLayoutConstraint * right = [NSLayoutConstraint constraintWithItem:view
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-90];

3、添加多个约束

思路:水平的视图看成一组,垂直的视图看成一组

VFL的语法总结:

(1)控件使用”[ ]”括起来

(2)控件之间只用”-”

(3)使用”H/V”表示方向,H:水平 V:垂直

(4)使用”|”表示父视图的边界

(5)对视图自身显示的时候使用”( )”,如果条件有多个用”,”隔开     [button(>= 50,<= 100)]

创建VFL字符串

水平方向H:

竖直方向V:

NSString *str =  @"H:|-20-[leftView]-20-[rightView(==leftView)]-20-|"

SizeClasses

使用SizeClasses必须使用Auto Layout

iOS8推出,iOS8之前的不能使用

1、将屏幕分为九种情况
宽:紧凑(compact)任意(any)宽松(regular)

高:紧凑(compact)任意(any)宽松(regular)

注意:如果在any情况下添加约束,会被”继承”

以后添加约束,最好别在含有any的情况下设置

时间: 2024-12-09 06:43:59

storyboard 自动布局的相关文章

iOS 自动布局扩展应用:代码中动态调整布局常量

一.设计需求 iOS Storyboard 自动布局技术,是iOS 6才出来的新技术,相当于多屏幕分辩率下自适应的技术. 但是一些复杂情况还是难处理. 比如有一个界面需求,进度条上显示标签,这个需求不难,难的是显要在显示表格框内,在各种机型显示正常. 最初设定是垂直居中向上偏15个像素 这是iPhone 4S 显示效果,下面与滑块还有错位 但是在iPhone 6下显示,下面有错位,但是上面留空太多 但如果把偏移量设为21.则出现另一种情况. 大屏幕的手机显示完美. 但是iPhone 4S下就错位

UIScrollView自动布局技巧

1.用storyboard自动布局注意点: (1)首先添加一个view,view的四周和scrollview一致,设置view的大小: (2)设置view的宽和高=> 设置scrollview的contentSize: (3)所有的控件都添加在view上. 2. 代码布局

开源一个完整的iOSApp《丁丁美图》供初学者学习

学习iOS开发的时候,得益于开源社区的大量开源项目,去年开始购买了个人开发者账号,写了这个练手项目<丁丁美图>,并上传到了App Store(Ipad版本被驳回也懒得处理).现在将代码开源出来,供初学者学习吧. 项目简介 一款美图展示APP,使用著名图片分享网站500PX(https://500px.com/)的图片数据源,当初写它是为了学习整个APP的构思开发发布流程.同时我个人比较喜欢看一些美文美图,所以着手开发了这款APP.当时做iOS开发也不长,技术运用也不成熟.不过代码规范算是从那时

Masonry remake更新约束

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图: 我们这里初始按钮是一个很小的按钮,点击

Masonry整体动画更新约束

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图: 我们这里初始按钮是一个很小的按钮,点击

Masonry tableviewCell布局

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图: 我们这里初始按钮是一个很小的按钮,点击

Masonry tableviewCell布局(转)

转载自:http://www.henishuo.com/masonry-tableviewcell-layout/ 前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效

Masonry复杂ScrollView布局

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的循环创建视图,并且可以展开与收缩的用法,先看看效果图: 当我们点击某一行时,可以展开:

Masonry 比例(multipliedBy)

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图: 我们这里初始按钮是一个很小的按钮,点击