GeekBand.iOS-AutoLayout

2016/4/3 posted in  iOS学习笔记  

为了让iOS程序猿更简单更好地让自己的程序适应不同的屏幕分辨率,苹果推出了AutoLayout布局的方式。
在本文中引用了寒哥细谈之AutoLayout全解的一部分内容,希望可以对学习AutoLayout的同学们有所帮助。

什么是AutoLayout

  • AutoLayout是一种布局技术,专门用于布局UI界面。用来取代Frame布局无法适应屏幕分辨率多重多样的不足。
  • AutoLayout自iOS6开始引入,由于Xcode4的不给力,当时并没有获得大的推广
  • 在iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升

ps.苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能轻松的解决屏幕适配的问题

开始使用AutoLayout

自从Xcode6之后,你会看到我们新建一个Single Application,会发现一个ViewController的View非常大,跟任何一个iPhone/iPad的尺寸都不一样,这些都是假象、假象、假象。Apple 把尺寸抽象为了一个正方形,到真正的设备上才是真正的布局。

AutoLayout概念

  • Pin(相对处理) Pin
    1. 边缘距离。最上面的四个虚线表示某个View的距离上、下、左、右多少像素。参考位置一般为对应方向离得最近的View。
    2. 限制View的宽高属性值,或者在宽高中加入一次计算关系。
    3. 那个蓝色的Constrain To Margin 是iPhone6出现之后新增的。Apple 觉得更大的分辨率有点间距好看,默认为8,如果这个勾上了,这个View距离四周的值就变成了你输入的值+8。可以根据实际需求确定是否勾选。
  • Align(对齐处理) Align
    1. Leading Edges:左对齐
    2. Trailing Edges:右对齐
    3. Top Edges:上对齐
    4. Bottom Edges:下对齐
    5. Horizontal Centers:水平中心对齐
    6. Vertical Centers:竖向中心对齐
    7. Baselines:基线对齐
    8. Horizontal Center in Container:对齐容器中的水平中心
    9. Vertical Center in Container:对齐容器中的竖向中心

Autolayout使用

本单元中使用Demo对AutoLayout的各种约束进行讲解,讲解Demo主要来自文章开头提到的来源。AutoLayout的核心是参照,也就是基本上任何一个View都可以参照另一个View。

Demo0-准备

我们开始Demo前先想想我们在Frame时代,布局需要什么:

{
    original:{x,y}
    size:{width,height}
}

在iOS中布局是绝对定位的(大致这么理解吧)。所以我们需要某个View的X,Y,W,H。我们从基本的入门 ,我们无论添加多少约束,都是需要定位好某个View的X,Y,W,H。少了不行,多了更不行。

Demo1-某个View距离父View上下左右间距全部为20。

对该View添加如下约束:

这里有几条注意事项:
1.请注意我这里把距离下面的,也就是BottomLayoutGuide的约束改成了距离控制器的View,为什么?因为BottomLayoutGuide是晚于View加载的,如果参考这个,会造成进入页面会卡一下。尽量不要直接参考下面 TopLayoutGuide 则没事。
2.加完约束你会发现貌似并没有什么效果?不是的,屏幕中出现的黄色的线条 ,这是IB在提升我们你所添加的约束 。和真实的尺寸不一样,怎么修改?在Resolve Auto Layout Issue中选择Update Frame。参考动图。
动图:
demo1

Demo2-某个View距离在父View的左侧20,白色View,上20,宽高为100。

Demo2

Demo3-添加一个白色View,距上20,左20,宽高和demo2中的一致

demo3

Demo4-AspectRatio比例。假设某个假设某个View距离父View右上角20,20 宽高比2:1宽100。

demo4
AutoLayout的公式:第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant,注意比例是支持表达式的如2:3、relation是支持great than,less than.具体的值由系统自动计算。

Demo5-某个View距离在父View的右侧20,demo4中白色View上20,宽高和Demo4中的宽高一样,并且有对齐。

Demo5

参考资料

  1. 寒哥细谈之AutoLayout全解
  2. 相关资料