iOS高仿美團外賣店鋪主頁

高仿美團外賣的店鋪主頁(包括下拉動畫效果,解決各種手勢問題,并且cell有列表樣式,九宮格樣式,卡片樣式),各種動畫效果縱享絲滑,因為寫的比較急,還待優化.!

解決UIScrollView嵌套UIScrollView、UITableview或者UIcollectionView的問題,結合手勢和仿動力學UIKit Dynamic實現自定義scollView效果。

手勢沖突參考文章:iOS 嵌套UIScrollview的滑動沖突另一種解決方案 - 簡書

GitHubhttps://github.com/chikang/CKMeiTuanShopView

UIAttachmentBehavior:附著行為

UICollisionBehavior:碰撞行為

UIGravityBehavior:重力行為

UIDynamicItemBehavior:動態元素行為

UIPushBehavior:推行為

UISnapBehavior:吸附行為

上述的各種行為可單獨使用,也可以組合使用更復雜的動畫效果。


高仿美團外賣GIF

需求核心問題就一個,如何優雅的解決:當內容還未到最大可顯示范圍時,列表里的內容不能滾動;當內容顯示到最大的時候,如何不斷開當前滾動手勢,繼續滾動列表里的內容。

#原理

為內容承載視圖添加一個UIPanGestureRecognizer,成為其delegate,并讓shouldRecognizeSimultaneouslyWithOtherGestureRecognizer方法返回true;如此一來,內容承載視圖與列表視圖的滾動手勢可以同時響應了。接著,我們需要處理好當內容承載視圖未顯示到最大值(_maxOffset_Y)時,列表視圖(UITableView、UICollectionView)的contentOffset.y會被強制設置為0,營造一種列表內容未滾動的假象;當內容承載視圖滾動到最大的時候,就放開對列表視圖的滾動限制,并且通過仿動力學UIKit Dynamic實現自定義scollView效果.

1:手勢問題,可參考??的文章,解釋的很詳細,包括手勢問題,以及如何實現自定義scrollView效果,模擬scrollView的回彈速度,阻尼效果等等.

2:tableview和collectionView都繼承于scrollview,把父視圖scrollview內容承載視圖,在內容承載視圖上添加tableview或collectionView,計算父視圖scrollview(內容承載視圖)向上滑動與導航條無縫對接需要的最大偏移量_maxOffset_Y,再根據偏移量是否大于_maxOffset_Y,來判斷是父視圖scrollview(內容承載視圖)在進行偏移,還是子視圖scrollview在進行偏移,從而設置scrollview.contentOffset.

3:根據scrollview的代理方法scrollViewDidScroll,來監聽scrollview的偏移量,來實現頭部的動畫效果以及導航條的動畫效果。

4:判斷向下滑動偏移量是否大于設定好的距離(70),來讓整個商品列表平移向下消失,展示店鋪活動優惠券視圖。通過滑動手勢,從底部向上滑動或者點擊導航條的返回按鈕,讓商品列表平移向上動畫展示出來。

5:實現二級聯動效果,根據父視圖scrollview(內容承載視圖)的偏移量來計算左側菜單menuTableView的高度,實現動態高度,達到跟美團外賣一樣的效果.

6:添加橫向scrollview,實現可以橫向滑動。

7:實現評價列表上拉加載效果,解決與自定義scrollview偏移量沖突問題。(使用MJRefresh會有問題。)

點擊左側cell,右側滾到到對應的section
左側tableview滑動,左側滾動到對應的行
【商家店鋪列表樣式】tot

【商家店鋪卡片樣式】
【商家店鋪九宮格樣式】


評價頁面
【店鋪活動】
【類似QQ菜單視圖】
【商家店鋪信息】
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。