GeekBand - iOS开发实战第三周笔记

本周主要总结一下 autolayout 相关的知识点。
本来打算把CollectionView的相关知识点总结一下，但是时间不够了。最后有个CollectionView的还没做完的Demo，等全部做完后再总结一下。

iOS View 的坐标系详解

frame bounds center 解释

• frame : 描述当前视图在其父视图中的位置和大小
• bounds : 描述当前视图在其自身坐标系系统中的位置和大小
• center : 描述当前视图的中心点在其父视图中的位置

iOS坐标系系统

iOS以左上角为坐标原点（0，0），以原点右侧为X轴正方向，原点下侧为Y轴正方向。如图所示。

iOS坐标系

iOS采用CGPointMake、CGSize、CGRect等产生相应的点，大小。

frame、bounds的区别和联系

frame和bounds都可以用来描述视图的大小和位置，但是两者不完全一样。如下图所示。

iOS定位

frame通常用来设置视图的大小和位置，使用center来改变视图的位置，bounds使用一般较少。frame指的是该view在父view坐标系系统中的位置和大小，而bounds指的是该view在本身坐标系中的位置和大小（参照点是本身的坐标系系统），bounds其实是设置了该view左上角的坐标，默认左上角为（0，0），如果改变了bounds，左上角的坐标不再是（0，0），子视图的位置也要改变。可以参考这篇文章，讲解的很详细。UIview坐标系

iOS AutoLayout

iOS常用的布局方式：

• 代码布局，在layoutSubviws的时候调整每个元素的位置、大小来实现UI的布局
• UIViewAutoresizing通过设置一系列的开关来决定每个view的父view发生变化时如何处理
• AutoLayout

点和像素的关系

• 在非retina屏幕中1个点由1x1个像素组成
• 在retina屏幕中1个点由2x2个像素组成
• 在iPhone6s Plus中1个点由3x3个像素组成

Autoresizing

Autoresizing的核心用法就是6条线。

Atuoresizing

• 上下左右四条红线分别表示此视图距离父视图的上下左右的约束
• 中间两条上下交叉的线表示，此视图的高度和宽度是否随着父视图的变化而变化

InterfaceBuiler上AutoLayout工具

界面右下角有四个按钮，分别是

• Stack: 把view放到StackView中，用于等间隔分布
• Align: 设置View和View之间如何对齐，左对齐还是右对齐
• Pin: 设置固定View的位置
• Resolve Auto Layout Issues: 解决Autolayout中出现的问题

Pin Menu主要用来设置view和其他view之间的关系，上下左右之间的绝对距离，宽度和高度。

PinMenu

Align Menu主要用来设置两个View之间是如何对齐的。

Align Menu

baseline是在文字排版时候使用，可以让文字底线对齐。

Resolve Auto Layout Issues 提供在约束和 Interface Builder 中所显示的 View 布局不一致时一些解决工具。

Xcode界面右边的 Size Inspector 的功能

再选中一个 NSLayoutConstraint对象后，可以看到

AutoLayout 的核心公式
第一个 Item 的属性 = （<= / >=）第二个 Item 的属性 * Multipliter + constant

很好用的AutoLayout的第三方库，用代码来布局。

• oc用 Masonry Github地址：Masonry
• swift 用 SnapKit Github地址：SnapKit

CollectionView 待完成的Demo

Github地址：CollectionView Demo

CollectionView Demo