1. 程式人生 > >iOS開發 仿陌陌首頁上拉下拉效果

iOS開發 仿陌陌首頁上拉下拉效果

  • 這幾天產品小弟說要把首頁做成像陌陌的首頁,作為一個程式設計師本來是想剁了他的,但是考慮到最近工作不好找,就忍了的。。。

陌陌首頁分析:

陌陌操作圖.gif

陌陌首頁長這樣

  • 往上推的時候明顯感覺是下面的蓋住了上面的,所以可以分成幾個圖層,上面的在最下面的圖層,下面的tableview在上層。

  • 其中主要的問題就是 下面的tableview的滑動手勢 和 頁面的滑動衝突,所以就是依靠pan手勢,
    思路就是 :在某個區域範圍裡面,禁止掉tableview的滑動,超出之後,禁止掉Pan手勢;

  • 手勢的兩個代理方法

// 在手勢衝突時候呼叫,預設返回NO表示預設不能同時識別兩個手勢
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer;

//在手勢想要從UIGestureRecognizerStatePossible狀態變化的時候呼叫,返回NO則表示手勢狀態是UIGestureRecognizerStateFailed
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer;

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
   if ((pan.state == UIGestureRecognizerStateEnded) && (frame.origin.y == level2)) {
  .....................................................................
}
}
  • 在手勢的代理方法裡面禁掉tableview的滑動,然後對pan進行手勢的監控,判斷手勢滑動結束並且不在互動範圍裡面的時候禁掉手勢, 放開tableview的滑動。

效果圖見下面

 

效果圖.gif

具體Demo見github連結 下載就能執行
https://github.com/1784777348ly/MOMOHomePage

 



作者:沒穿秋褲
連結:https://www.jianshu.com/p/d0211078fd77
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。