很多商品詳情界面都會用到UIScrollView懸腿藜控件的效果,比如下面這款A(yù)PP就使用了懸停Tab的效果, 效果如圖:
參考了崢吖和曉風(fēng)沐晨兩篇文章,用比較簡便的方式實現(xiàn)了一下效果,下圖是效果
效果分析以及實現(xiàn):
導(dǎo)航欄會隨著滾動改變透明度
監(jiān)聽UIScrollView的滾動改變NavigationBar的Alpha值,為了方便我使用了第三方庫UINavigationController+JZExtension中的navigationBarBackgroundAlpha屬性
選項卡滾動到導(dǎo)航欄底部會懸停
當(dāng)選項卡滾動到導(dǎo)航欄底部時,再往下滾動就改變選項卡top約束的值,使它一直懸停在導(dǎo)航欄底部
Demo的控件層次
>UIScrollView
-->商品詳情View
-->UIWebView
-->選項卡View
因為WebView要穿透選項卡,所以選項卡層級要在UIWebView之上
AutoLayout
AutoLayout下的UIScrollView使用方法
1.UIScrollView貼四條邊(Storyboard下不用最外部的View,xib下最外部要再包一個View,View要貼四條邊),(圖1)
2.UIScrollView內(nèi)部添加View貼UIscrollView四條邊作為containerView,(圖2)
3.containerView與最外部View創(chuàng)建等寬等高約束,(圖3.1),再改變等高約束的優(yōu)先級改為低優(yōu)先級,(圖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不確定,先預(yù)設(shè)600
頂部商品詳情內(nèi)容高度可變的話逊彭，WebView的top約束也需要在代碼中改變
這部分比較簡單,就不一一演示了
需要用到的約束有:
代碼
聯(lián)系方式
如果你喜歡這篇文章沉衣，可以繼續(xù)關(guān)注我 ?,歡迎交流。
點擊這下載源代碼轩缤。覺得不錯的話麻煩點個Star
