现在的位置: 首页 > 综合 > 正文

IOS 升级78 AutoLayout 概述 (一)

2018年05月26日 ⁄ 综合 ⁄ 共 3255字 ⁄ 字号 评论关闭

*高手绕路 基础教程

一、概述
     AutoLayout翻译过来就是自动布局。是apple在ios6中引入的但是很不幸在xcode6之前中并不是很好用。所以并不是很多人喜欢用他。但是到了xcode6+支持好了很多,大家开始关注到这块,并且使用classSize 与 AL 作为布局的主要方式。(其实主要是坑爹的6 与6+的宽度)。

完全没有基础的可以看下:
Auto Layout Help:https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/_index.html#//apple_ref/doc/uid/TP40014226


二、基础
     计算方法-不管什么布局底层肯定是算出来的 只是如何算罢了
     so我们找到:
     

     此系统头文件下有一段这样的代码



是的所有的关键就是:
     

firstItem.firstAttribute {==,<=,>=}secondItem.secondAttribute
*multiplier
+constant

     
 各个元素就是字面上的意思(不懂的youdao吧) 那我们来看看各个枚举吧

依旧在NSLayoutConstraint目录下

NSLayoutAttribute  
view的哪个属性
 

NSLayoutRelation
判断关系 (大于或等于、小于或等于、等于)

NSLayoutFormatOptions


布局格式,这个只会在vsl中用到其他时候不用管 vsl中会讲到。


     核心

firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant

 敲代码前,我们分析下这个等式(不等式)到底能干嘛

首先除了view相关的有两个变量 multiplier 与常量 constant 
首先通过multiplier 我们可以看出可以首先比例关系(如view 跟随界面长度,宽度放大缩小)
通过 constant  我们可以实现padding(边距)关系。
另外我们还看到 firstAttribute 中有Top,left,bottom,……等 可以实现 align关系
centerX,Y 居中关系 width height 长宽比例等
and so on

 
2.1代码方式
     代码方式一般来说并不是大家喜欢选择的方式,一般都是sb做好al,使用时枚举下view的constraint 然后修改。
     但是总有会用到的时候吧~~ so先介绍下代码方式。
     关于约束写多少呢?相信大家都是理科生 你自己写的约束 你自己试试能不能画出唯一解 如果不能 电脑也不行啊亲。
     代码方式分为: 基础代码模式,vfl(visual format language),Masonry(种第三方包git:https://github.com/Masonry/Masonry)

2.1.1 基础代码模式
          

简单的分析下
UIView 的contrains相关主要集中在
@interface UIView (UIConstraintBasedLayoutInstallingConstraints) (add remove)
@interface UIView (UIConstraintBasedLayoutCoreMethods)  (upadte)
@interface UIView (UIConstraintBasedCompatibility)  (设置是否自动转换的)
@interface UIView (UIConstraintBasedLayoutLayering) (没怎么用过 aligh相关)
可能还有吧不过几乎不用

那么看看吧
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:_pLView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:100.0f]];

老是说这句我还真没什么好说的了。
如果真要说,那么就像frame一样自己位于什么位置实际上是通过x,y在父View的bounds上的位置。
那么constraints 的位置关系是add给父View的。只有宽度关系在是自己的constraints。
另外就注意一下 自己写al的view要关闭  TranslatesAutoresizingMaskIntoConstraints

那么写成怎样才能正确布局呢? 
根据你的写的能唯一算出页面位置。


Demo编码如下

结果呢:
模拟器上没有任何红色View

出了什么问题呢?

系统默认情况下是开启自动转换为AL的那么需要手编的时候 要关闭此view的自动
    [_pLView setTranslatesAutoresizingMaskIntoConstraints:YES];

中间代码如上
运行结果:


2.1.2 VFL(visual format language)
     

简单分析下:
Visual Format Language  视觉格式语言  apple给的一套 快速生成多条constraints的语言
官方文档:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html

代码(实现跟上面一样的效果):

是不是 代码量少了很多有没有!

ok继续分析下把
核心方法
其实这没什么用只是设置一个都是conrtains的数组。

这个方法是根据闯入的FormatString 生成n个constraint 放入数组中
期中参数metrics 是常量字典 views是相关的界面数据 此处不能使用.语法

此处有一段宏 

根据宏定义 是生成 key为传入字符的 传入值为值的 字典。。。有点绕口

根据原理 我们修改

一样可以正常执行

再搞笑下


简单的总结下
views的dictionary存储的也就是StringFormat中所有 需要view对象的 ex:[_view]  中括号内部值的键 通过这个键来获得对象
同理
metrics 中存储的是常量的键值。-常量-

另:不推荐 NSDictionaryOfVariableBindings()以外的方法。

         
 2.1.3 Masonry

git地址:https://github.com/Masonry/Masonry
第三方包,更方便解决了代码写布局的问题
pod 'Masonry'
(不知道pod的:http://nshipster.cn/cocoapods/)
目前笔者在转的方向
代码(实现同样效果) 代码量相对VFL并不是很多但是更容易理解了

另外 改善了系统AL 警告or报错信息的对新手不友好的问题(难读,懂VFL还好点) 如下图


待完成(二)-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


     界面模式:
     


三、动画

四、autoLayout与transForm

五、小技巧

六、部分应用场景
          -scollView
          -4分
          -边距控制
          -权限失效问题
          -与父宽度保持一致性or处于父的某个位置

抱歉!评论已关闭.