通过自动布局使用UIScrollView中的顶部布局指南

Jon*_*eon 7 interface-builder uiscrollview ios autolayout

我想Top Layout GuideUIScrollView直通自动布局中使用.没有UIScrollView自动布局可以很好地使用Top Layout Guide. 在此输入图像描述

但是当我嵌入UIButtonUIScrollView,它没有. 在此输入图像描述

我知道那是因为UIScrollView与层次结构级别不同Top Layout Guide.但我认为解决这个问题可能有一个很好的解决方案.

alg*_*gal 18

你很困惑.这有点违反直觉,但顶部和底部布局指南与配置UIScrollView无关,因此其可滚动内容将覆盖半透明导航栏,这是您尝试实现的效果.

该怎么办

鉴于您在第二张图片中显示的视图层次结构,这是您在iOS8上需要做的事情:

  1. 配置视图控制器,以便选中"在顶栏下扩展边缘"(在代码中,使用edgesForExtendedLayout).这将确保视图控制器布置其根视图,以便它使导航栏重叠.

  2. 配置滚动视图约束,以使滚动视图的上边缘与其超视图的上边缘具有零偏移,而不是顶部布局指南的零间距.这将确保集合视图填充根视图,从而也会使导航栏重叠,这对于滚动视图的内容能够在导航栏下滚动是必需的.(IB可能会打击你.请参阅下面的脚注.)

  3. 那么现在你如何确保滚动视图知道导航栏的位置,以便(例如)它并不总是将其内容放在导航栏下?答案与布局指南无关.在视图控制器中,选中"调整滚动视图插图"(或代码中automaticallyAdjustsScrollViewInsets)框.这将使视图控制器自动调整滚动视图的contentInset属性,以便滚动视图适当地定位其内容.

这会奏效.

这是怎么回事

那为什么这是答案呢?为什么这么混乱?

坦率地说,它很容易混淆,因为顶部和底部布局指南显着地呈现给我们作为传达关于半透明叠加元素的布局信息的元素.但是,它们并不是唯一的"半透明感"布局机制.它们仅与"普通"子视图的定位直接相关,即不是视图控制器的根视图,而不是UIScrollView中的内容.

滚动视图(或类似UICollectionView和UITableView的一个子类)中的内容将始终定位在涉及滚动视图本身,受样性质更复杂的方式contentInset,contentOffset等等.(真的,如果滚动视图布局是一件简单的事,为什么Apple会在过去四年中有专门的WWDC会话来滚动视图布局?!)

总而言之,正如上面的步骤所示,管理布局的三种不同的半透明感知机制如下:

  1. "延伸边缘"确定视图控制器是否定位其根视图以使其位于导航栏下方.

  2. 布局指南提供了一个指标,用于指示"主要"内容区域的位置,并考虑半透明条形图.您可以将这些与自动布局一起使用来定位普通视图,使它们不会重叠.或者您可以访问代码中的数值.

  3. 滚动视图插入是确保滚动视图的内容可以重叠但不总是重叠的正确方法.该automaticallyAdjustsScrollViewInsets视图控制器属性可以自动为你在简单的情况下做到这一点.(据推测,此属性只会使视图控制器contentInset根据它通过布局指南公开的相同值更新滚动视图.因此,如果您需要自己管理插图,那就是您将如何操作.)

战斗IB的布局指南狂热

关于"与IB战斗"的脚注:

不幸的是,当您尝试将滚动视图边缘约束到其超视图边缘时,Interface Builder可能会对您不利.如果从滚动视图到超级视图进行按住Ctrl键拖动,当它弹出可能的约束菜单以在这些视图之间添加时,它可能会尝试让您根据视图控制器的布局指南约束滚动视图.这是因为当superview是根视图时,IB盲目地更喜欢布局指南到superview边缘.但是当你使用scrollview时,这是错误的.

为什么?例如,假设您接受布局指南的约束.然后,您将在滚动视图上最终得到一个顶级约束,将其限制为topLayoutGuide-64.0.-64.0是一个硬编码值,用于补偿导航栏的精确高度.那么当一个晴天导航栏不等于64pt时会发生什么?或者当您完全关闭导航栏时?或者想在没有导航栏的情况下重新使用此场景?答:然后你会得到一个破碎的布局.

那么如何强制IB将滚动视图中的约束添加到其超视图的边缘,而不是布局指南?据我所知,答案是你不能通过在视图之间进行ctrl-drag来正确地在IB中添加该约束.

相反,您需要选择视图,然后使用画布底部的"Pin"控件.这是一个看起来像大都市H的中间有一个方框.在"引脚"弹出对话框的顶部,显示超视图空间约束的小图部分,您可以使用文本字段旁边的下拉控件来配置空间约束是否绑定布局指南或超级视图.如下所示:

Pin对话框,用于约束布局指南与视图

Github链接到演示项目:https://github.com/algal/ScrollViewUnderlapDemo

  • 为了对抗IB的布局指南狂热,您只需移动顶部布局指南上方的视图(实际上介于0和topLayoutGuide.length之间)并使用http://i.fantattitude.me/1j添加约束,每次都适合我! (2认同)

uje*_*ell 0

添加间距约束时,Xcode 不会显示与视图具有负距离的项目。看来您在UIScrollView和之间添加了垂直空间约束UIView。删除该约束,将滚动视图移至下方 ,并在和Top Layout Guide之间添加新的垂直空间约束。UIScrollViewTop Layout Guide