iOS开发中3种UI跳变的处理

最近在使用豆瓣api仿写一个豆瓣同城的app,过程中遇到了3中界面的跳变,解决方式整理如下。

1. UIPageViewController的内容跳变

这里现象如图所示。

造成这种跳变的原因主要在于,作为UIPageViewController内容的Controller,其View的边界被设置为了父View的margin。如图所示。


滚动完成后,margin消失,内容View宽度扩展到没有margin的宽度,导致界面跳动。修复方法如下图所示,只需要在内容Controller中将leading和trailing设置为父View的leading和trailing,不包含margin即可。

修复后效果如图所示。

2.UITableViewController的Top Bars跳变

在实现一个简单的点击UITableViewController item展示详情的界面时,在top bar出出现了如下图的跳变,容易看出是由于被top bar覆盖区域从有内容,到没有内容导致其跳动。

这时UITableViewController关键属性设置如下:

而此时详情ViewController并没有勾选Under Top Bars这个选项。这里的Under Top Bars表示视图的上边界是否被Top Bars遮挡,出现UI跳变是因为UITableViewController的View绘制了Top Bars的背景,而详情页面没有。而由于勾选了Ajust Scroll View Insets,其内容会适应边界,不被Top Bars遮挡,视觉上和没有勾选Under Top Bars一样,下图是只勾选Under Top Bars,而不选择Ajust Scroll View Insets的界面,可以清楚的看到UITableView实际上已经上移到了Top Bars下方。

取消UITableViewController的这个选项后,跳变修复,效果如下图所示。

3.Hide Bottom Bar on Push

在从精选页面进入详情页面时,希望隐藏底部的Tab Bar,因此勾选了详情Controller的Hide Bottom Bar on Push选项。此时,进入详情界面时,底部出现黑色从有到无的跳变,效果如下图。

此时的详情View底部约束如下:

可以看出,详情View(这里是ScrollView)的底部是于Bottom Layout Guide的顶部对齐的,而在push过程中,由于隐藏了bottom bar,Bottom Layout Guide的顶部高度发生了变化(从bottom bar上方变为屏幕底部),因此详情View高度随之变化。

这里的修复方式是让详情View的底部始终与Bottom Layout Guide的底部对齐,如下图所示。

这样详情View的底部在任何时候都会绘制原来被bottom bar占有的区域,修复后效果如下图所示。