iOS高仿美團外賣店鋪主頁

weixin_33890499發表於2018-08-01

iOS

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

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

手勢衝突參考文章：iOS 巢狀UIScrollview的滑動衝突另一種解決方案 - 簡書

GitHub：https://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會有問題。）