如何使用autolayout的UIView加入动画

hi,all:

在经过了一番犹豫之后，我决定将我自己做的这个小APP的源代码发布给大家：

其出发点是和大家一起学习iOS开发，仅供学习參考之用。

之前代码是托管与gitlab

上的。今天我将其pull到github上来了，大家能够自行下载：git clone git@github.com:lihux/twentyThousandTomatoes.git没有安装git或者不会用的童鞋。

请猛戳github地址：https://github.com/lihux/twentyThousandTomatoes，进去之后选

择download zip下载就可以。

当我们对一个UIView使用了autolayout自己主动布局之后。也就意味着我们放弃了

传统的通过设置view的frame等方式手动的改动、确定这个view的位置、尺寸属性。

甚至从某种程度上讲，我们应该忘记view的frame属性：它的确定不再取决于我

（手动的直接修改），而是通过我们在storyboard或者code中提供的约束条件

（constraints），通过一个自己主动布局引擎（苹果为autolayout採用的是Cassowary

布局引擎，參考文档：点击打开链接），计算出这个view的frame。因此我们能够

觉得使用了autolayout的view的frame属性是一个仅仅读的属性。

在代码里觉得的修改

这个view的frame并不能对这个view的frame产生真正的效果（事实也确实如此）。

如今问题就来了，在曾经我们常常通过对一个view的frame的改动产生view移动

的动画效果，那么在使用了autolayout的view世界中我们该怎样实现同样的效果呢？

答案是。我们“将计就计”，通过改变这个view上的某个约束constraint然后在uiview的

animation block中触发layout来实现。

一、预期效果

以下我们以一个简单的样例来进行具体的说明：



如上图所看到的。整个界面都使用了autolayout，如今我们想实现这样一个效果：

当我们点击显示生日的button的时候，整个view向上滑动，同一时候向上推出一个日期

选取器（date picker）。类似于点击textfield。弹出键盘后整个界面为了避免被遮

住而向上移动的效果。

选取完毕日期后点击生日日期button或者完毕button整个view向

下缩回，同一时候date picker向下滑出可视范围。

二、实现细节

首先来看一眼storyboard中view的层级结构：例如以下图所看到的，从图中我们能够

看到。整个view的布局相当简单。就两级：根view和我们的date picker view，其

中date picker view包括了一个完毕button和系统的date picker。这种话。要实现

整个view和date picker view同一时候上移的效果，我们仅仅须要对根view和date picker

view同一时候做动画就可以。



考虑怎样实现根view的动画效果，这里我们能够巧妙的通过改动根view的

bounds属性来实现根view的上移效果。注意这里我们须要明确view的bounds属性

和frame属性的差别，前者是相对于当前view的本地坐标系而言的。而后者则是相

对于当前view的父view的坐标系而言的。

简单的讲，frame决定了一个view相对于父view的position和size信息。而

bounds则决定了当前view展示的内容相对于本地坐标系的位置。

这里我们将view

自身的可视内容和subviews能够看做一页纸上的内容信息，而view本身可以看成

是一枚放于纸上的放大镜，放大镜的大小不一定是和纸（content size）同样大小

的。bounds属性的作用就是确定这枚放大镜相对于纸的位置：一个bounds =

（0, 200, 300, 300）就意味着我们要将这枚放大镜向纸的下方移动200个points,但

放大镜相对于父view的位置仍是保持不变的，这样给我们的效果就是这个view（显

示的内容）向上移动了200个points.



修改bounds的origin属性并不会修改这个view的frame，通过这样的展示内容的

移动给我们产生一种view向上移动了的幻觉。如上图中。“哪个位置...”为成为我们

放大镜中看到的第一行。

根view上移动画的效果攻克了，以下我们再来看日期选取器date picker。在

storyboard中对其添加的约束例如以下：定高207、trailing/leading/top相对于super

view (根view)的位置。



确定date picker view y轴方向上下移动的约束显然是top约束。点开top约束，

能够看到该约束的具体内容：


一个约束能够描写叙述为：firstItem.attributeA = secondItem.attributeB * multipler

+ constant。

结合上图我们能够得出date picker view的top约束为

datePickerView.Top = topLayoutGuide.bottom * 1 + 400


我们能够通过改动这里的constant值来改动这个top约束以达到预期效果，事实

上通过改动而不是删除旧的constraint再加入新的constraint也正是苹果所推荐的，

在NSLayoutConstraint.h头文件里有例如以下说明：



这样。date picker view的上下移动就能够通过获取并改动其top约束来实现。

须要注意的是在代码中获取datepicker view的top约束实际上是要在其父view的

constraints数组中查找。这是由于每一个view的constraints数组中保存的实际上是

layout 子view所需的约束的集合。

我们还要定义个辅助BOOL变量，已推断date picker view是否以弹出：

<span style="font-size:18px;">@property (nonatomic, assign) BOOL hasShowPickerView;</span>

接下来定义一个辅助函数，用于查找date picker view的top约束并改动其

constant属性为给定的值：

- (void)replacePickerContainerViewTopConstraintWithConstant:(CGFloat)constant
{
for (NSLayoutConstraint *constraint in self.pickerContainerView.superview.constraints) {
if (constraint.firstItem == self.pickerContainerView && constraint.firstAttribute == NSLayoutAttributeTop) {
constraint.constant = constant;
}
}
}

代码里我们在picker container view （即文中的date picker view）的

superview的constraints属性中查找，假设发现firstItem和firstAttribute属性各自是

date picker view和top，则该constraint即为目标约束，然后改动其constant属性。

在view首次被载入的时候我们想确保date picker view 处于整个view的最底部即隐

藏的状态，因而我们在viewcontroller的viewDidLoad方法中调用辅助方法改动一下

date picker view的top约束：

<span style="font-size:18px;">[self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];</span>

在首次点击birthday button的时候动画改动根view的bounds和date picker

view的top constraint。注意上移gap的计算。

再次点击birthday button的时候将根

view的bounds恢复到正常值，date picker view的top constraint也恢复到viewDidLoad

中设置的值：

<span style="font-size:18px;">- (IBAction)didTapOnBirthdayButton:(id)sender
{
self.hasShowPickerView = !self.hasShowPickerView;
if (self.hasShowPickerView) {
CGRect birthdayButtonFrame = self.birthdayButton.frame;
birthdayButtonFrame = [self.view convertRect:birthdayButtonFrame fromView:self.birthdayButton.superview];
CGFloat birthdayButtonYOffset = birthdayButtonFrame.origin.y + birthdayButtonFrame.size.height;
CGFloat gap = birthdayButtonYOffset - (self.view.frame.size.height - self.pickerContainerView.frame.size.height);
CGRect bounds = self.view.bounds;
if (gap > 0) {
bounds.origin.y = gap;
} else {
gap = 0;
}
[self replacePickerContainerViewTopConstraintWithConstant:birthdayButtonYOffset];
[UIView animateWithDuration:0.25 animations:^{
self.view.bounds = bounds;
[self.view layoutIfNeeded];
}];
} else {
[self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];
CGRect bounds = self.view.bounds;
bounds.origin.y = 0;
[UIView animateWithDuration:0.25 animations:^{
self.view.bounds = bounds;
[self.view layoutIfNeeded];
}];
}
}
</span>

上述代码中的[self.view layoutIfNeed]去掉也是没问题的。可能比較费解的是

根view.bounds.origin.y的上移gap的计算以及top constraint的constant值的计算。

关键实在真正理解view的frame和bounds的意义。

至此程序达到了预期的效果。以下的gif图展示了动画效果。

1.竖屏：



2.横屏：

三、小结

在使用autolayout之前我们敲代码控制界面的构成就好比是开一辆手动挡的汽

车，尽管频繁换挡（改动frame）非常繁琐。却也非常享受那种能够全然控制汽车档位的

自由感。使用了autolayout之后则一下子升级为了自己主动挡汽车，切换档位的活不再由

我们直接操作。而仅仅能通过油门（constraints）的大小来间接的改变汽车的档位。

在

自己主动挡汽车里，我们必需要放弃直接控制档位的想法。那是不可能的了，我们必需要

学会通过熟练掌握脚下的油门和刹车来控制车速。在习惯了自己主动挡之后。相信大家也

一样可以得心应手的做自己想做的事情。