很多商品详情界面都会用到UIScrollView悬停控件的效果,比如下面这款APP就使用了悬停Tab的效果, 效果如图:

1.gif

参考了峥吖和晓风沐晨两篇文章,用比较简便的方式实现了一下效果,下图是效果

---

2.gif

效果分析以及实现:

导航栏会随着滚动改变透明度

监听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)

图1 图2 图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约束也需要在代码中改变

这部分比较简单,就不一一演示了

图4

需要用到的约束有:

图5

---

代码

---

联系方式

如果你喜欢这篇文章，可以继续关注我  ,欢迎交流。

点击这下载源代码。觉得不错的话麻烦点个Star