iOS仿奇鱼旅行/淘宝/京东水平拖动查看详情效果

先看效果图

demo.gif

思路:
1.在cell里面嵌套UICollectionView
2.监听scrollView的水平滚动x值
3.水平滚动实时绘制贝塞尔曲线

枚举,后面用到

typedef NS_ENUM(NSInteger, LMRefreshState) {
    LMRefreshStateNormal = 0,    //查看更多
    LMRefreshStatePulling = 1,   // 释放查看
};

1.核心代码

//创建贝塞尔曲线
-(CGPathRef)createBezierPath:(CGFloat)amount{
    UIBezierPath *verticalLine = [UIBezierPath bezierPath];

    if (amount != 0) {
        CGPoint topPoint1 = CGPointMake(self.myCollectionView.contentOffset.x+SCREENWIDTH-amount,15*scaleRates);
        CGPoint topPoint2 = CGPointMake(self.myCollectionView.contentOffset.x+SCREENWIDTH, 15*scaleRates);
        CGPoint bottomPoint3 = CGPointMake(self.myCollectionView.contentOffset.x+SCREENWIDTH, 200*scaleRates);
        CGPoint midControlPoint = CGPointMake(self.myCollectionView.contentOffset.x+SCREENWIDTH-amount*2, 200*scaleRates/2);
        // NSLog(@"%@",NSStringFromCGPoint(midControlPoint));
        CGPoint bottomPoint = CGPointMake(self.myCollectionView.contentOffset.x+SCREENWIDTH-amount, 200*scaleRates);
        
        [verticalLine moveToPoint:topPoint1];
        [verticalLine addLineToPoint:topPoint2];
        [verticalLine addLineToPoint:bottomPoint3];
        [verticalLine addLineToPoint:bottomPoint];
        [verticalLine closePath];
        [verticalLine addQuadCurveToPoint:bottomPoint controlPoint:midControlPoint];
        NSString *loadMoreString = @"查\n看\n更\n多";
        CGSize size = [Helper sizeWithText:loadMoreString font:self.loadMoreLabel.font maxW:10];
        //  NSLog(@"%f",amount);
        self.loadMoreLabel.frame = CGRectMake(self.myCollectionView.contentOffset.x+SCREENWIDTH-amount/2,200*scaleRates/2 - (size.height+35)/2, size.width, 200*scaleRates);
        self.refreshState = LMRefreshStateNormal;
        if(amount>30){
            self.refreshState = LMRefreshStatePulling;
            loadMoreString = @"释\n放\n查\n看";
        }
        self.loadMoreLabel.text = loadMoreString;
    }

    return [verticalLine CGPath];
}

2.监听scrollView水平滚动

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    self.contenOffsetX = scrollView.contentOffset.x;
  //  DLog(@"%f",scrollView.contentOffset.x);
    self.refreshState = LMRefreshStateNormal;
    if (_topicModel.goods_info.count <=2) {
        return;
    }
    
    if(scrollView.contentOffset.x+SCREENWIDTH > _myCollectionView.contentSize.width){
        NSLog(@"zouzouzou");
        if (self.shapeLayer == nil) {
            self.shapeLayer = [CAShapeLayer layer];
            [self.myCollectionView.layer addSublayer:self.shapeLayer];
            self.shapeLayer.fillColor = ViewBackGroudColor.CGColor;
            self.shapeLayer.strokeColor = ViewBackGroudColor.CGColor;
            
            self.loadMoreLabel = [UILabel label];
            self.loadMoreLabel.numberOfLines = 0;
            self.loadMoreLabel.font = [UIFont systemFontOfSize:10];
            [self.myCollectionView addSubview:self.loadMoreLabel];
        }
        self.shapeLayer.path = [self createBezierPath:((scrollView.contentOffset.x+SCREENWIDTH) -_myCollectionView.contentSize.width)*scaleWidthRates];
    }else {
        self.shapeLayer.strokeColor = [UIColor clearColor].CGColor;
        [self.shapeLayer removeFromSuperlayer];
        self.shapeLayer = nil;
        self.loadMoreLabel.text = nil;
        [self.loadMoreLabel removeFromSuperview];
    }
}

3.监听scrollView开始减速

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    if(self.refreshState == LMRefreshStatePulling){ // 跳转对应的控制器
        if (self.delegate && [self.delegate respondsToSelector:@selector(jumpToThemeVCPassByTadId:)]) {
            [self.delegate jumpToThemeVCPassByTadId:_topicModel.ta_id];
        }
    }
}

欢迎大家使用奇鱼旅行app,使用过程中出现什么问题,欢迎大家提出宝贵的意见!

奇鱼旅行官方微博：奇鱼旅行
奇鱼旅行官网：www.qy-trip.com

奇鱼旅行是一个以精品旅宿预订为核心的旅行app，更走心的个性化住宿，还比酒店便宜50%；2017新用户注册即可获得500元住宿券。
奇鱼旅行目前拥有近10000套房源，提供民宿、客栈、度假别墅、精品酒店、房车、游艇、露营帐篷…等非标准、个性化住宿预订服务，以覆盖“三五好友彻夜Party、闺蜜小聚、家庭出游、工作出差、情侣度假、深度旅行…”等各类出行住宿需求为目标。
年轻不指年龄，更是一种生活态度与方式。奇鱼旅行服务于每一位有态度、追求深度旅行的“年轻人”，连接房东和用户，共享“有趣好玩”的旅行体验。