Autolayout

  • 近来Autolayout已经丰富有力了,很多公司都在运用这么些意义,接下去自己就来分别介绍多少个Autolayout达成格局。
  • Autolayout的贯彻有众多样,苹果原API,之后的VFL,storyboard,第三方梅森ry,每种抽出来都是一篇长达文章,我会分开写,然后依次发布出来,大家能够接纳自己想要的措施来察看
  • 在此从前,我先提议自己对Autolayout的计算,那个统计将促成全文,帮忙大家掌握Autolayout的拉长规律
    • Autolayout里有三个词,约束参照
    • 要想体现一个控件,要求五个东西,位置尺寸
    • 加上封锁不宜过多,当添加的约束足以抒发该控件的位置尺寸,就足足了
    • 约束就算对控件的分寸或者地点举行封锁,参照即使以某个控件的任务展开约束,其实那两边没有强烈的独家,它们都得以对控件的位置尺寸起到功效。
    • 有着控件,都逃不开位置尺寸,Autolayout就是拿来干那么些用的,所以我背后的例证都以UIView为例

苹果代码落成Autolayout

  • 先让大家先河上学用Autolayout代码来成功一个控件的位置尺寸的安装吧
  • 自己要在界面左下方放置一个宽高各为50的新民主主义革命View,它离左侧缘与上边缘的距离都为20
  • 往日先介绍一个方法

/**
 *  这个是系统默认添加约束的方法,它是NSLayoutConstraint的类方法
 *
 *  @param view1      传入想要添加约束的控件
 *  @param attr1      传入想要添加约束的方向,这个枚举值有很多,可以自己看看
 *  @param relation   传入与约束值的关系,大于,等于还是小于
 *  @param view2      传入被参照对象
 *  @param attr2      传入被参照对象所被参照的方向,如顶部,左边,右边等等
 *  @param multiplier 传入想要的间距倍数关系
 *  @param c          传入最终的差值
 *
 *  @return NSLayoutConstraint对象
 */
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c

//一部分NSLayoutAttribute枚举值
 NSLayoutAttributeLeft = 1,//控件左边
    NSLayoutAttributeRight,//控件右边
    NSLayoutAttributeTop,
    NSLayoutAttributeBottom,
    NSLayoutAttributeLeading,//控件左边
    NSLayoutAttributeTrailing,//控件右边
    NSLayoutAttributeWidth,//控件的宽
    NSLayoutAttributeHeight,//控件的高
    NSLayoutAttributeCenterX,//竖直方向中点
    NSLayoutAttributeCenterY,//水平方向中点
  • 其一措施的参数我很想用形象的语言讲述出来,可是依旧想不出,越多须求我们从上边的代码中传播的参数去体会

//创建redView
UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

//创建redView第一个约束,相对self.view的左边缘间距20
    NSLayoutConstraint * redLeftLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeftMargin relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0f constant:20.0];
//只有在没有参照控件的情况下,约束才加到自身,不然加到父控件上
    [self.view addConstraint:redLeftLc];
//创建redView第二个约束,相对self。view的底边缘间距20
    NSLayoutConstraint *redBottomLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottomMargin multiplier:1.0f constant:-20];//由于是redview相对self.view往上减20,所以是-20
//添加约束
    [self.view addConstraint:redBottomLc];
//创建redView第三个约束,设置自身宽,宽可以参照其他控件设置,比如是self.view宽的一半,则应该这样写
/*
[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.5f constant:0.0];
*/
//这里直接设置自身宽为50
    NSLayoutConstraint * redWLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0f constant:50.0f];
//由于没有参照物,所以约束添加于自身身上
    [redView addConstraint:redWLc];
//创建最后一个约束,自身的高
    NSLayoutConstraint * redHLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0f constant:50];
//由于没有参照物,所以约束添加于自身身上
    [redView addConstraint:redHLc];

//这时请大家想一下,我只需要设置redView与self.view的位置关系,再确定自己的宽高,不就就完成了位置与尺寸这两个必须条件了么?

效果图1

  • 接下去大家继续增加必要,在黄色方块的入手放一个离它20间距,离self.view尾部也间距20,宽高相等的粉红色方块
  • 我就用代码以及注释来介绍那一个新方块怎么加吧

//先创建一个一个蓝色的view添加到视图上,剩下的就是用autolayout来设置它的“frame”了
UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    self.blueView = blueView;
//创建第一个约束,左边间距,由于是想要与红色有20的间距,那么参照参数“toItem”就应该填redView
   NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeRight multiplier:1.0f constant:20.0f];
   //与其他控件发生约束,所以约束添加到父控件上
    [self.view addConstraint:blueLeft];
//现在我们已经可以确定自己水平方向的位置了,还差垂直方向的位置,现在我们来创建第二个约束,参照物依然是红色方块,需求是要离self.view底部20间距,这不是正好和红色一样么,那么我们可以直接与红色方块底部对齐就行了
    NSLayoutConstraint *blueBottom = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];//与红色方块底部对齐,倍数1.0f.差值0.0f
    //与其他控件发生约束,所以约束添加到父控件上
    [self.view addConstraint:blueBottom];
//剩下两个约束差不多,我就一并描述了,它们都以redView为参照,与其等宽等高
    NSLayoutConstraint *blueW = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0.0f];
    [self.view addConstraint:blueW];

    NSLayoutConstraint *blueH = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1.0f constant:0.0f];
    [self.view addConstraint:blueH];
  • 接下去看看效果图
新添蓝色方块
  • 实则Autolayout的想想相当不难,刚初步使用的时候绝不想着马上到位,最好一个控件一个控件的达成依靠,分别满意其地方与尺寸的须要,借使一下子多少个控件一起弄的话,你得思路格外明显,往往大家犯错是犯在约束添多了,而不是添少了

  • 就像上边的事例,很多个人会在装置了与青色等高档宽后,还同时去添加顶部对齐与底部对齐,那样中度就再一次设置了,他会忽视了,上下同时对齐不仅予以了僵直地方,也给予了中度,所以思路必须清楚!

autolayout动画

  • 最终大家在原来这些例子上做个小动画吧,让大家探听一下,autolayout是怎么办动画的,哈哈
  • 须要:我将在藏蓝色方块的左边再加个同样大小的色情方块,然后,需要点击屏幕,然后黑色方块被移除,蓝色方块替代紫色方块的岗位
  • 恰好那一个事例可以再讲一个autolayout的知识点:优先级(priority)
  • 好了,先添加黄色方块吧

//一如往常,先创建黄色View
UIView *yellowV = [[UIView alloc]init];
    yellowV.backgroundColor = [UIColor yellowColor];
    yellowV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:yellowV];
//开始创建约束,第一个约束是什么呢?一看就知道是左间距约束啦
    NSLayoutConstraint *yellowLeft = [NSLayoutConstraint constraintWithItem:yellowV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0f constant:20];
    //与其他控件发生约束,所以约束添加到父控件上
    [self.view addConstraint:yellowLeft];
//添加底部约束
    NSLayoutConstraint *yellowBottom = [NSLayoutConstraint constraintWithItem:yellowV attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-20];
    //与其他控件发生约束,所以约束添加到父控件上
    [self.view addConstraint:yellowBottom];
//这里我直接设置宽高约束了,就省事不加参照控件了
    NSLayoutConstraint *yellowW = [NSLayoutConstraint constraintWithItem:yellowV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0f constant:50.0f];
    [yellowV addConstraint:yellowW];

    NSLayoutConstraint *yellowH = [NSLayoutConstraint constraintWithItem:yellowV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0f constant:50.0f];
    [yellowV addConstraint:yellowH];
  • 好,现在色情方块已经添加上去了
新添黄色方块
  • 接下去自己再粉色View添加一个约束,这一个约束涉及到优先级,我们留意看代码了哈

//对黄色View添加约束,约束黄色view与红色View的间距为20
    NSLayoutConstraint *yellowAnotherLeft = [NSLayoutConstraint constraintWithItem:yellowV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeRight multiplier:1.0f constant:20];
    UILayoutPriority priority = 250;//设置优先级
    yellowAnotherLeft.priority = priority;
    //与其他控件发生约束,所以约束添加到父控件上
    [self.view addConstraint:yellowAnotherLeft];
  • 也许大家应该看到些端倪了,我在前面已经给紫色View添加了对黑色View间距位20的view,现在又给青色view对革命View添加一个间距20的封锁,那很备受瞩目是不能出现的气象,藏蓝色View怎么可能同时到位这七个约束呢,用术语来说就是约束冲突,可是大家留意看那段代码

UILayoutPriority priority = 250;//设置优先级
  • 我给yellowAnotherLeft以此约束添加了优先级,优先级的范围是0~1000,数字越大,优先级越高,在不安装的情景下默许为1000
  • 那表达了,我最终添加的那一个约束的先期级是低的,那些约束唯有在它的争辨约束被抹掉后,它才能兑现
  • 也就是说,我把粉红色view移除后,黄色View相对于青色View左间距20以此约束就不树立了,那么蓝色view会自动的成为与黄色View间距20
去除蓝色方块
  • 后天大家领悟优先级是哪些情状了吧
  • 好了,让大家最终加几行代码,来完成这一个动画吧!

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//先把蓝色方块从父视图上移除
    [self.blueView removeFromSuperview];
//动画更新界面
    [UIView animateWithDuration:1.0f animations:^{
        [self.view layoutIfNeeded];
    }];
}
  • autolayout的动画片就是那样达成的,将操作代码走完后,再让动画块去立异界面,动画就出来了

  • ok,动画已经落到实处啊,由于自身不会弄动画图片,所以不得已放效果图上来,借使有会的读者,请务必赐教!我也会去问问看身边的大神们

  • 今日到底把Masonry写完了,花了累累刻钟,Storyboard版本的文章我打算不更了,因为自身看齐了写得很好的storyboard实现Autolayout文章,看得自身无地自容啊~~

  • 不顾,希望大家能把那几个知识点学好!

VFL(Visual Format Language)实现Autolayout
Masonry实现Autolayout(推荐)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图