Autolayout学习(1)-了解Autoreszing

1. 为什么要有Autoreszing?

在Xcode6之前,如果定义了下面的一个布局,同时运行在不同尺寸设备下会显示不同的效果。

          (iPhone6-4.7inch)

        (iPhone5s-4inch)

可以看到,我们在4.7inch下的iPhone6上定义的布局跑在4inch下的iPhone5s上面完全错位了。为了解决诸如此类问题,当时苹果推出了autoreszing。

2. 如何使用Autoreszing?

很简单,看上图,我们的目的就是要求屏幕的四个角上的矩形框不管在任何情况下都贴紧屏幕。可以通过在storyboard中设置下列参数解决此问题。

选择storyboard上的第一个View,再选择右上角的尺子图标,点击Autoreszing右侧框中上面和左面的红线

然后选择第二个View,点击Autoreszing右侧框中上面和右面的红线:

依此类推,再选择第三个View,点击Autoreszing右侧框中下面和左面的红线,

依此类推,再选择第四个View,点击Autoreszing右侧框中下面和右面的红线:

全部操作完成后,再将该程序运行到4inch的iPhone5s设备上:

可以看到,这个时候四个矩形View都紧紧的贴在屏幕的四个角上。事实上,经过了上面的处理后,该程序运行在任何设备上的效果都会保持一致,这样就实现了我们想要的效果。

那中间的两条线有什么作用呢?再看下一个例子:

如图,我们在一个绿色的View(200*200)里面添加了一个紫色的View(100*100),现在我们有一个新的需求:当绿色的View的宽度或高度发生改变时,紫色View的宽度和高度也要跟随绿色View变化而变化。按照我们现有的做法肯定是不行的。我们将绿色View的View的尺寸修改为300*300;

很明显,绿色View的尺寸修改了,紫色View却毫无反应,如何让紫色View随着绿色View变化呢?选中紫色View,将中部的两条横线勾上,再将绿色View的宽高修改为300*300

运行:

可以看到,此时紫色View的宽度和高度已经可以随着绿色View的宽度和高度变化了。

3. Autoreszing的作用是什么?

autoreszing作用其实是为了做屏幕适配,通过勾选不同方向上的线条可以对某个控件进行不同的约束。主要有以下两点:

? 周围四条线的作用:代表此控件到四条边上的距离是固定的。

? 内部两条线的作用:代表此控件的宽度和高度是否要随着父控件的宽度和高度变化而变化。

时间: 2024-11-04 10:33:29

Autolayout学习(1)-了解Autoreszing的相关文章

sizeClass和autolayout学习资源整理

sizeClass和autolayout,看来不得不开始放弃frame的写法,收集点资料集中学习下 sizeClass苹果官方文档:  https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/_index.html#//apple_ref/doc/uid/TP40014436 autolayout苹果官方文档: https://developer.apple.com/library/ios/reci

Autolayout学习笔记

知识点一: 1.布局思维 传统布局思路中,一个view在哪里有多大,那就写清楚它的坐标位置和宽高就定了,平时用CGRect和CGPoint这两种模型就足够了,而且它一定非常听你的话,写的是多少,它绝对就是多少:但是autolayout的思路却变化了,或者说改进了,它囊括了传统frame布局思路,除了可以告诉view的坐标和宽高,它更提供了一种相对的概念,比如: 1)view相对于屏幕视图左边5点,右边10点,上面15点,下面20点,如果屏幕的长宽比例发生了改变(比如从3.5寸的320:480变成

autolayout学习笔记_2

一个在控制面板获取autolayout的_autolayoutTrace的小技巧 add the debugging code to ViewController.m: @interface UIWindow (AutoLayoutDebug) + (UIWindow *)keyWindow; - (NSString *)_autolayoutTrace; @end And: - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:

Autolayout 约束类方法的理解(学习笔记二)

随apple大屏手机的问世,屏幕适配问题被堆到风口浪尖,对于代码画UI的同学无疑是个噩梦.在上班闲暇之余,学习了autolayout:autolayout从iOS6开始使用,因为各种坑,只有一些advanced coder们所用,但现在autolayout今非昔比了.学习的必要性也越发强烈. autolayout也可以用代码实现,apple可爱的工程师开发了一个可视化语言VFL(Visual Format Language),这里不解释VFL的语法,但是要解释一个约束的类方法,个人觉得这对理解a

iOS 8 AutoLayout 及SizeClass(三) 使用详解 好多值得学习及研究的地方

一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化,纯粹的hard code方式UI布局将会走向死角,而autoresizing方式也有其局限性,所以无论如何autolayout都将成为UI布局的重要方式. 前两篇以发烧友心态对iOS8界面布局的主要元素size class和autolayout进行了探索,发现要完全掌握autolayout需要大量

Xcode6下学习autolayout 二

现在联系下autolayout 创建三个大小相同label距离底部20,间距个20 使用pin工具栏添加等大小,间距. 步骤1:按住shift,选中三个label 步骤2:添加约束 添加完成后的效果如下: 为了固定后添加的两个label,需要添加对齐约束 步骤3:添加顶部(底部)对齐约束 添加完成后的效果: 别着急,在添加左右间距约束就好了 步骤4:添加左右间距20 好的,现在跑起来看看效果 目前针对iPhone的autolayout我暂时能做到的差不多就这些了,关于sizeclass多种屏幕还

一步一步学习Swift之(三):巧用AutoLayout布局

一些初学者经常在使用autoLayout时,做得效果不太理想,经常会出现界面错乱的情况. 本文章用一个小实例说明autoLayout的使用 非常的简单,只要记住 规则就可以使界面适屏布局,适配各种iphone手机的屏幕 1.新建一个swift项目(以Single View Application模板新建项目) 将Main.storyboard中的默认的ViewController 设为iPhone 4-inch 尺寸(也就是iphone 5s的屏幕大小) 视频演示地址:http://v.youk

iOS自动布局学习(UIView+AutoLayout)

自动布局虽然在iOS6的时候已经推出,不过由于各个原因并没有被开发组广泛使用.一方面是大家的app支持版本都是低于iOS6的,另一方面来说是Xcode支持木有现在这么好.以前由于iPhone设备相对固定,所以在纯代码,纯坐标的布局下很流行,不过现在随着iPhone6发布,如果还要写一大堆乱七八糟的绝对坐标去适配,那工作量和维护成本是很大的. 下面的一些基础直接拿小伙伴分享整理的吧,之后向大家推荐一个开源的库,对AutoLayout进行了封装,用起来很简单也高效. 1.AutoLayout是什么?

iOS学习之自动布局-Autolayout

Autolayout: 最重要的两个概念: 约束:对控件位置和大小的限定条件 参照:对控件设置的约束是相对于哪一个视图而言的 自动布局的核心计算公式: obj1.property1 =(obj2.property2 * multiplier)+ constant value 解释:obj1的property1属性等于obj2的property2属性乘以multiplier(系数)再加constant(常量); 约束的优先级: 约束的priority属性表示约束的优先级,取值区间为[0,1000]