Autolayout经验分享

原创 2015年02月27日 14:05:43

Autolayout经验分享

前言

首先要用Autolayout约束视图,你可以抛弃坐标系了。但并不意味着会更加方便.虽然AutoLayout可以适配不同的屏幕但是我觉得也不是很方便,有时候为了约束一个视图甚至要DEBUG很长时间(除非你很熟悉了该怎么用代码写),代码写也不下数七八行,仅仅只是一个视图而已,如果多个视图都需要约束,代码量可想而知。废话不多说开始吧

为了简化约束使用,本人自己封装了一套约束助手,可以大大简化约束的添加和使用(点击查看)

Autolayout的3个核心概念

1.参照

即你使用哪个视图作为参照来确定你想要的效果

2.约束

这个就不用多说了

3.核心公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

1.>先说明代码约束视图

对一个对象使用自动布局分为以下步骤

1.拿到视图对象(废话,不拿到对象约束个毛线)

2.设置视图 `view.translatesAutoresizingMaskIntoConstraints=NO`

3.将视图添加到父视图,一个视图没有父视图用autolayout绝对会崩,因为父视图都木有鬼知道这个视图怎么相对其他视图确定位置
这三个都是准备步骤,木有技术含量。

4.用代码写约束(这最重要的)

5.添加你用代码写的约束到作用视图上去,使用UIView的方法[self.view addConstraint:](单个约束)
[self.view addConstraints:](多个约束)(这里的作用视图待会给你解释清楚)

作用视图说明

在添加时要注意目标view需要遵循以下规则

1.对于两个同层级view之间的约束关系,添加到它们的父view上
2.对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
3.对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
(这里引用李明杰老师的)

2.>代码说明

    对上面的第4点说明,我们该怎样用代码获得约束呢?
    首先“约束”也是对象
    用来表征该对象的类是NSLayoutConstraint
    这下你应该明白了,我们应该用NSLayoutConstraint来创建并得到约束
    并且我们经常只用以下两种方法,其他方法你可以先不考虑。

    方法1: 
         + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
    看返回值就知道这个数组里面装着多个约束  添加到对应的view应该用view 的addConstraints:方法
    format :VFL语句
    opts :约束类型
    metrics :VFL语句中用到的具体数值
    views :VFL语句中用到的控件

    方法2:
         +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
    view1 :      要约束的控件
    attr1 :      约束的类型(做怎样的约束)
    relation :   与参照控件之间的关系
    view2 :      参照的控件
    attr2 :      约束的类型(做怎样的约束)
    multiplier : 乘数
    c :          常量 (该常量可以更改)
    这个方法是用来返回单个约束
    不要看上面两个方法参数那么多就懵了,苹果设计API都是有依据的。其实理解还是比较自然的。

Tips:

   要想用Autolayout正确约束视图,你必须自己想想你该怎样约束这个视图让其确定一个位置,如果你给出的代码约束不明确就会出问题。什么是不明确的代码约束呢?比如,我约束了一个视图的长度height和宽度width然后又约束了该视图的左边left距离父视图左边一定距离,显然这个时候符合该视图的位置有无数种因为无法确定竖直方向的位置 ,想要修正就要添加一个能再竖直方向上确定位置的约束,比如该视图的顶部距离父视图的顶部多少,或者该视图的底部距离父视图的底部多少.
总结:你必须给出能够明确该视图位置的约束,少一个都不行,但有些控件可以不用给出width和height约束.
    例如UILabel,你只给出label的顶部,左边的约束就行了,因为label内部文本知道自己的宽和高是多少.UIButton,和UILabel一样.UIImageView,同样你可以只给出两个约束(顶部和左边 或者 右边和底部等等),因为imageView的内部你设置了image属性就等于告诉了imageView的宽和高,但是在StoryBoard和XIB中会有警告⚠️,你得设置占位图片来消除,不然你直接给出宽和高也行.
代码展示
    这里有一个控制器视图为self.view

         //按步骤开始准备工作
         UIView   *blueView=[[UIView alloc] init] ;
         blueView.translatesAutoresizingMaskIntoConstraints=NO;
         [self.view addSubview:blueView];

         //开始写约束  (leftConstraint)   "blueView""左边"  = "self.view""左边""1倍" +"20"
         //知道下面这句代码里面7个参数分别是什么了吧
         //这就是按照核心计算公式来写的

         NSLayoutConstrsint *leftConstraint=[NSLayoutConstrsint constraintWithItem:blueView  attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem: self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
         NSLayoutConstrsint *rightConstraint=[NSLayoutConstrsint constraintWithItem:blueView  attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem: self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
         NSLayoutConstrsint *topConstraint=[NSLayoutConstrsint constraintWithItem:blueView  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem: self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
         NSLayoutConstrsint *bottomConstraint=[NSLayoutConstrsint constraintWithItem:blueView  attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem: self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-20];
         [self.view addConstraint:leftConstraint];
         [self.view addConstraint:rightConstraint];
         [self.view addConstraint:topConstraint];
         [self.view addConstraint:bottomConstraint];

刚好8行代码

动画部分

  在修改了约束之后,只要执行下面代码,就能做动画效果
  [UIView animateWithDuration:1.0 animations:^{
       [添加了约束的view layoutIfNeeded];
  }];

Autolayout及VFL经验分享

来源:MoZiXiong的博客 Autolayout,开始于iOS6.0   一.什么时候用autolayout比较适合   1.不负责任的骑墙派说法:app...
  • xianghuibeijing
  • xianghuibeijing
  • 2013-11-13 17:03:49
  • 1552

CALayer的autolayout

autolayout不适用于layer 这里是这么解决的:重写view的layerClass,view使用auto layout,调用view的layoutSubviews重新绘制layer的边界 ...
  • lqzitongyezu
  • lqzitongyezu
  • 2016-08-31 15:25:34
  • 901

Android开发——适配终结者AutoLayout

0. 前言  相信Android开发者对于适配问题都比较苦恼,如果有一个库可以完成如下功能,那一定是非常爽的,即直接对比着设计师给我们的设计图(针对某个分辨率),直接把px属性写在xml布局文件里,然...
  • SEU_Calvin
  • SEU_Calvin
  • 2017-03-31 22:04:10
  • 2652

iOS-AutoLayout还不会,你就累到死

花时间写了个Demo,包含比较全面从UIView,UILabel,UIImageView的自适应到UITextView,UITableView,UICollectionView,UIScrollVie...
  • qq_29909323
  • qq_29909323
  • 2017-08-15 09:59:43
  • 1026

AutoLayout进阶篇

来自Leo的原创博客,转载请著名出处我的StackOverflow前言AutoLayout用来布局已经不是什么新鲜事了,我之前也写过三篇入门的文章 IB 自动生成 IB拖拽 代码实现 当然,实际开发中...
  • Hello_Hwc
  • Hello_Hwc
  • 2016-06-04 15:30:33
  • 10556

AndroidAutoLayout

效果图 最大幅度解决适配问题,并且最大化方便开发者。 so,看下用法: 你没有看错,拿到设计稿,在布局文件里面直接填写对应的px即可,px:这里的px并非是Googl...
  • l970859633
  • l970859633
  • 2016-06-03 09:41:14
  • 3993

Autolayout的本质原理

Auto Layout 的本质原理 Auto Layout 的本质是用一些约束条件对元素进行约束,从而让他们显示在我们想让他们显示的地方。 约束主要分为以下几种(欢迎补充): 相对于...
  • BianHuanShiZhe
  • BianHuanShiZhe
  • 2015-04-26 22:38:08
  • 1158

ios开发autolayout之代码实现Autolayout使用总结

ios开发autolayout之代码实现Autolayout使用总结 1.理论部分 demo示例1: UIView *blueView = [[UIView...
  • sunnyboy9
  • sunnyboy9
  • 2016-04-12 13:07:30
  • 1154

iOS autolayout性能问题, uitableview的优化

autolayout被使用的越来越多,很多时候,我们只是在使用,但是却没有去关心使用的东西给我们带来的影响。      在自己的项目中,动态高度的问题,在iPhone6上,有稍微卡顿的感觉,用上了各...
  • qwe462127821
  • qwe462127821
  • 2015-04-16 22:54:33
  • 815
收藏助手
不良信息举报
您举报文章:Autolayout经验分享
举报原因:
原因补充:

(最多只允许输入30个字)