很多商品详情界面都会用到UIScrollView悬停控件的效果,比如下面这款APP就使用了悬停Tab的效果, 效果如图:
效果分析以及实现:
导航栏会随着滚动改变透明度
监听UIScrollView的滚动改变NavigationBar的Alpha值,为了方便我使用了第三方库UINavigationController+JZExtension中的navigationBarBackgroundAlpha属性
选项卡滚动到导航栏底部会悬停
当选项卡滚动到导航栏底部时,再往下滚动就改变选项卡top约束的值,使它一直悬停在导航栏底部
Demo的控件层次
>UIScrollView
-->商品详情View
-->UIWebView
-->选项卡View
因为WebView要穿透选项卡,所以选项卡层级要在UIWebView之上
AutoLayout
AutoLayout下的UIScrollView使用方法
1.UIScrollView贴四条边(Storyboard下不用最外部的View,xib下最外部要再包一个View,View要贴四条边),(图1)
2.UIScrollView内部添加View贴UIscrollView四条边作为containerView,(图2)
3.containerView与最外部View创建等宽等高约束,(图3.1),再改变等高约束的优先级改为低优先级,(图3.2)
添加商品详情,选项卡,WebView约束
商品详情:top(0),left(0),right(0),bottom(0),height(400),注意顶部是要穿透NavigationBar
选项卡:left(0),right(0),bottom(0),height(44)
WebView:left(0),right(0),bottom(0),注意top的约束是(商品详情的高度+选项卡高度),height不确定,先预设600
顶部商品详情内容高度可变的话，WebView的top约束也需要在代码中改变
这部分比较简单,就不一一演示了
需要用到的约束有:
代码
联系方式
如果你喜欢这篇文章，可以继续关注我 ,欢迎交流。
点击这下载源代码。觉得不错的话麻烦点个Star
