UIScrollView滚动时使静态UIView粘滞
- 我有一个比设备高度长得多的滚动视图(图:单词)
- 在滚动视图的底部是一些底部内容(图:法国新闻)与不同的背景颜色。
- 为了分离底部的内容和单词,我创build了一个1pt高的UIView作为边界(图:红线)
- 我有一个button,位于设备的底部,滚动视图之外(滚动视图是
device.height - button.height
)。 此button的背景色与底部内容的背景色相匹配。
不同的背景颜色看起来很漂亮,没有将底部button从内容视图中分离出来,所以当底部内容不可见时,我想让边框变得粘稠,并且看起来坐在底部button的上方(图:红色线)。
小提示:我在IB中使用AutoLayout,但是我有一个为边界约束创build的IBOutlet,我可以很容易地在代码中进行操作。
这是一个工作的lib: https : //github.com/ericcastro/ECStretchableHeaderView
(它在示例中使用UItableView,但实现基于UIScrollview)
您必须通过更改逻辑来更新代码:这里视图在顶部,但是整个原则就在那里!
你可以创build两个边框。 第一个是滚动视图底部内容顶部的dynamic边框。 第二个是滚动视图之外button顶部的粘性边框。
当第一个边框可见时,应该隐藏第二个边框。 为了做到这一点,你应该注册一个UIScrollViewDelegate
。 实现方法scrollViewDidScroll(_:)
。 只要检查第一个边界是否在第二个边界之上。 这可以用这样的事情来完成:
if firstBorder.frame.origin.y < scrollView.contentOffset.y + scrollView.frame.height { // firstBorder is on the screen, hide the secondBorder... secondBorder.hidden = true } else { secondBorder.hidden = false }
这可能不是100%正确的,因为不清楚你的UIScrollView
是否在button上方结束,或者它们是否重叠。 如果边界太早或太晚隐藏,请调整它。
如果你的button是透明的,你也应该隐藏第一个边框,因为它可能在button下面。 然后,只需将firstBorder.hidden = false
和firstBorder.hidden = true
到代码中。
我会采取这些步骤:
- 把button放在
scrollView
之外的视图中。 - 把这个真棒的底部内容(我认为是Bender头部的图片)放在与button相同的视图中,并将其限制在顶部,左侧和右侧边缘。
- 将滚动视图的内容插图的底部尺寸设置为等于真棒底部内容视图的高度。 这将告诉滚动视图,滚动可滚动内容的实际末端下方的许多像素是可以的。
- 添加一个
UIScrollViewDelegate
到至less实现scrollViewDidScroll(_)
的滚动视图。 在这种方法中,检查滚动内容的最底部位置。 如果该位置位于步骤#3中设置的底部内容插图的某处,则拉伸或以其他方式重新定位垂直同样数量的真棒底部内容。
如果我有时间,我会抽出一个样本来做这件事。
至less有两个简单的解决scheme首先出现在我的脑海里。
关键是find交叉点 :
内容大小值,滚动视图上的红线从button下方出现或进入button下方。
选项1:在button顶部添加另一条红线,并在内容尺寸值接近交叉点时在scrollViewDidScroll中隐藏/显示(隐藏属性)
选项2:内容大小值是否接近交叉点删除约束,并将红线的超视图从滚动视图更改为button或相反。 为特定的超级视图重新添加约束。 显然你需要在代码中这样做。