[New learn]AutoLayout调查

1.简介  

  Autolayout旨在解决不同高宽度的屏幕下的显示问题,通过增加给控件增加约束来达到不同屏幕间的自适应。

2.问题产生与解决方法

  Autolayout解决的控件屏幕自适应问题,如果没有这个技术那么会发生什么呢?如应用为在3.5英寸屏幕下的创建了两个view。

当运行于iphone4等3.5英寸的模拟器下时候完全正常。

                        

但是如果我们将其运行于6+的模拟器后会怎么样呢?貌似蓝色块与边缘的间隔变大了。

  

原因就在于我们传统布局的时候都使用的是据对坐标,控件的frame固守着坐标值,无论当前设备是什么尺寸,这就造成了上述现象的发生。

Autolayout可以解决这个问题,autolayout通过“约束”来限定多个view或者自身的布局关系,从而让空间摆脱固有坐标的束缚。

3.autolayout的使用---IB方式

  如上图中为了让布局能够在不同屏幕的size上都能够表现正常,我们一步一步的对其增加“约束”

  1.设定两个view与各自边缘的留白保持不变。

             

  结果,在不同屏幕尺寸下view都能够按照约束来布局:

  

  单数问题又来了,貌似两者之间的间隔被扩大了,于是我们再去:

  

  2. 约束两者的间隔保持不变。

  

  结果,发现蓝色的view与红褐色的view宽度发生不一致,原本都是设置为100的。

  

  造成这样的结果是因为,我们设定了上述约束,系统为了保持这样的约束从而将某个view进行了拉伸(如果不拉伸就无法完成约束)

  

  3.为了解决这个问题,我们在设置两个view的宽度保持一致的约束

  

  结果,两个的宽度一致,间隔约束也遵守了,但是好像高度变形了,原来都是正方形,现在变成都是长方形了。

  

  4.为了解决这个问题我们需要将两个view的长款比例做一个约束,让其保持现有的比例即1:1

  

  结果,两个view都会保持长宽1:1的比例

  

4.约束问题

  1.约束缺少问题

  通过以上约束设定后会发现还有一些约束问题,如下图点击红色按钮会显示具体约束问题:

  

  下图说明我们在横向我们已经做了足够约束,但是在纵向方向上依然没有约束:

  

  我们需要给纵向加上约束,问题解决。

  

  

  2.约束冲突

  如果我们将两个size的长和框固定住,这样势必会和横向上的约束有冲突,因为纪要保持宽度不变,又要保持边距和间隔距离是完全做不到的,相互矛盾的。

  

  结果,应用运行的时候回出现如下错误日志:

  

2016-03-29 22:53:35.799 TestForSizeClassAndLayout[690:15205] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don‘t want.
    Try this:
        (1) look at each constraint and try to figure out which you don‘t expect;
        (2) find the code that added the unwanted constraint or constraints and fix it.
(
    "<NSLayoutConstraint:0x7fa070e347b0 H:[UIView:0x7fa070e342c0(100)]>",
    "<NSLayoutConstraint:0x7fa070e34dc0 H:[UIView:0x7fa070e34c00(100)]>",
    "<NSLayoutConstraint:0x7fa070e36490 H:|-(20)-[UIView:0x7fa070e342c0]   (Names: ‘|‘:UIView:0x7fa070e33f40 )>",
    "<NSLayoutConstraint:0x7fa070e36530 H:[UIView:0x7fa070e342c0]-(80)-[UIView:0x7fa070e34c00]>",
    "<NSLayoutConstraint:0x7fa070e365d0 H:[UIView:0x7fa070e34c00]-(20)-|   (Names: ‘|‘:UIView:0x7fa070e33f40 )>",
    "<NSLayoutConstraint:0x7fa070e134e0 ‘UIView-Encapsulated-Layout-Width‘ H:[UIView:0x7fa070e33f40(375)]>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7fa070e34dc0 H:[UIView:0x7fa070e34c00(100)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2016-03-29 22:53:35.800 TestForSizeClassAndLayout[690:15205] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don‘t want.
    Try this:
        (1) look at each constraint and try to figure out which you don‘t expect;
        (2) find the code that added the unwanted constraint or constraints and fix it.
(
    "<NSLayoutConstraint:0x7fa070e347b0 H:[UIView:0x7fa070e342c0(100)]>",
    "<NSLayoutConstraint:0x7fa070e36490 H:|-(20)-[UIView:0x7fa070e342c0]   (Names: ‘|‘:UIView:0x7fa070e33f40 )>",
    "<NSLayoutConstraint:0x7fa070e36530 H:[UIView:0x7fa070e342c0]-(80)-[UIView:0x7fa070e34c00]>",
    "<NSLayoutConstraint:0x7fa070e365d0 H:[UIView:0x7fa070e34c00]-(20)-|   (Names: ‘|‘:UIView:0x7fa070e33f40 )>",
    "<NSLayoutConstraint:0x7fa070e364e0 UIView:0x7fa070e34c00.width == UIView:0x7fa070e342c0.width>",
    "<NSLayoutConstraint:0x7fa070e134e0 ‘UIView-Encapsulated-Layout-Width‘ H:[UIView:0x7fa070e33f40(375)]>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7fa070e347b0 H:[UIView:0x7fa070e342c0(100)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

  3.位置错误

  当我们为控件添加了约束,这个时候不小心改变了控件的位置,此时就会出现位置错误的提示,在界面上提示为橙色的约束线。

  如下图我们将某个view往下拖一定位置:

  

  由于往下拖动后,在Y上的约束就会被打破,此时可以点击来解决此问题:

  

  当选择Update Frames的时候控件会被回复到原来的frame位置,当选择Update Constraints时候将当前约束匹配当前的控件frame位置。

完毕,上述主要讲解了IB方式的autolayout约束方式和冲突方式。下一篇文件将以代码的方式来进行约束的设定。

  

  

时间: 2024-10-13 23:07:22

[New learn]AutoLayout调查的相关文章

[New learn]AutoLayout调查基于code

代码https://github.com/xufeng79x/TestAutolayout-code2 1.简介 前一篇文章[New learn]AutoLayout调查基于IB讲述了如何在IB的基础上为控件添加约束.本文主要讲述如何在代码情况下操作autolayout 2.约束总结: 在上一篇文章中的主要约束为: 总结为: 1.两个view各自和边缘间隔20 2.两个view与top边缘相隔30 3.两个之间相隔80 4.两个view的高宽比保持不变1:1 5.两个view的宽度保持相等 3.

iOS: How To Make AutoLayout Work On A ScrollView

iOS: How To Make AutoLayout Work On A ScrollView Posted on June 11th, 2014 Ok, I’ll admit. I’ve been seriously struggling with AutoLayout ever since it’s been introduced. I understand the concept, and I LOVE the idea of it, but when I actually do it,

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

AutoLayout

1. iOS两种自适应布局方式: -AutoLayout(自动布局) + SizeClasses(尺寸类别) -Autoresizing (自动调整尺寸/弹簧式调整尺寸) 前者 AutoLayout 是从iOS6出现,通过创建视图约束实现自适应,SizeClasses是iOS8 开始出现,用于配合AutoLayout使用,为解决所有(包括iPhone,iPad)iOS设备屏幕尺寸和屏幕旋转时UI的适配. 后者是早期开发使用的适配界面的方式,现在仍然保留.通过弹簧式调整控件尺寸,使其适应屏幕的尺寸

iOS 8 自动布局sizeclass和autolayout的基本使用

1.首先创建新的工程,设置rootviewcontroller(这里不再多说) 2.勾选下面(因为我们到下面是使用sizeClass,所以勾选两个): 3.这里我创建了一个lable,名称为View1,在这里可以看到设置View1的约束为距上和左侧为0,宽和高设置的都是200,同理可以设置距离右和下的约束,如图: 4.当上面工作完成以后,点击Add按钮,会出现黄色的约束范围,如下图: 5.上面工作完成后点击Update Frames,到此View1的约束创建完毕,如图.当我们要更改约束的时候,需

NYOJ-小明的调查作业

小明的调查作业 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 小明的老师布置了一份调查作业,小明想在学校中请一些同学一起做一项问卷调查,聪明的小明为了实验的客观性,想利用自己的计算机知识帮助自己.他先用计算机生成了N个1到1000之间的随机整数(0<N≤1000),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应着不同的学生的学号.然后再把这些数从小到大排序,按照排好的顺序去找同学做调查.请你协助明明完成"去重"与"排序&

iOS AutoLayout的用法

添加约束 代码实现Autolayout的步骤 利用NSLayoutConstraint类创建具体的约束对象 添加约束对象到相应的view上 - (void)addConstraint:(NSLayoutConstraint *)constraint; - (void)addConstraints:(NSArray *)constraints; 代码实现Autolayout的注意点 要先禁止autoresizing功能,设置view的下面属性为NO view.translatesAutoresiz

Stack Overflow 2017 开发者调查报告

Stack Overflow 发布了 2017 开发者调查报告,此次有超过 64,000 名开发人员参与调查,分别对其技能.工具.学习趋势等数据进行了统计,现将其中一些有趣的数据和趋势撷取出来分享给大家. 一.开发角色 开发类型 大约有四分之三的受访者是 web 开发人员,不过这其中也有许多人表示正在努力构建桌面应用和移动应用. 具体开发类型 二.开发经验 Web 和移动开发人员平均而言,比其他技术学科的开发人员(如系统管理和嵌入式编程)的专业编码经验要少得多.软件行业是新人才的主要孵化器,经验

【Machine Learn】决策树案例:基于python的商品购买能力预测系统

决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结合视频学习和书籍基础的笔记所得.本系列文章将采用理论结合实践方式编写.首先介绍机器学习和深度学习的范畴,然后介绍关于训练集.测试集等介绍.接着分别介绍机器学习常用算法,分别是监督学习之分类(决策树.临近取样.支持向量机.神经网络算法)监督学习之回归(线性回归.非线性回归)非监督学习(