iOS仿抖音短視頻

iOS仿抖音—左右滑動(dòng)切換效果
iOS仿抖音—上下滑動(dòng)播放視頻
iOS仿抖音—評論視圖滑動(dòng)消失
iOS仿抖音—加載點(diǎn)贊動(dòng)畫效果
iOS仿抖音—播放視圖滑動(dòng)隱藏

前言

這是仿抖音短視頻的第三篇—評論視圖滑動(dòng)消失，先來看下效果圖：

comment.gif

說明

通過觀察可以發(fā)現(xiàn)抖音的評論視圖是從底部彈出的，包括頂部視圖和UITableView視圖，當(dāng)UITableView滑動(dòng)到最頂部時(shí)，整體視圖可以滑動(dòng)消失，特別需要注意的有以下三點(diǎn)：
1、當(dāng)手指慢慢滑動(dòng)的時(shí)候，松手后視圖不消失
2、當(dāng)手指快速滑動(dòng)的時(shí)候，松手后視圖消失
3、當(dāng)手指點(diǎn)擊上面的空白區(qū)域或關(guān)閉按鈕，視圖消失
經(jīng)過分析可以知道評論視圖最底部是一個(gè)透明的UIView，并且添加了UITapGestureRecognizer和UIPanGestureRecognizer來分別處理點(diǎn)擊和滑動(dòng)。下面來說說具體的實(shí)現(xiàn)：

1、添加手勢并設(shè)置代理

// 添加點(diǎn)擊手勢
self.tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
self.tapGesture.delegate = self;
[self addGestureRecognizer:self.tapGesture];
       
// 添加滑動(dòng)手勢
self.panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];
self.panGesture.delegate = self;
[self addGestureRecognizer:self.panGesture];

2、手勢代理處理

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
    if (gestureRecognizer == self.panGesture) {
        UIView *touchView = touch.view;
        while (touchView != nil) {
            if ([touchView isKindOfClass:[UIScrollView class]]) {
                self.scrollView = (UIScrollView *)touchView;
                self.isDragScrollView = YES;
                break;
            }else if (touchView == self.contentView) {
                self.isDragScrollView = NO;
                break;
            }
            touchView = (UIView *)[touchView nextResponder];
        }
    }
    return YES;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    if (gestureRecognizer == self.tapGesture) {
        CGPoint point = [gestureRecognizer locationInView:self.contentView];
        if ([self.contentView.layer containsPoint:point] && gestureRecognizer.view == self) {
            return NO;
        }
    }else if (gestureRecognizer == self.panGesture) {
        return YES;
    }
    return YES;
}

// 是否與其他手勢共存
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    if (gestureRecognizer == self.panGesture) {
        if ([otherGestureRecognizer isKindOfClass:NSClassFromString(@"UIScrollViewPanGestureRecognizer")] || [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
            if ([otherGestureRecognizer.view isKindOfClass:[UIScrollView class]]) {
                return YES;
            }
        }
    }
    return NO;
}

3、滑動(dòng)手勢處理

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGesture {
    CGPoint translation = [panGesture translationInView:self.contentView];
    if (self.isDragScrollView) {
        // 當(dāng)UIScrollView在最頂部時(shí)，處理視圖的滑動(dòng)
        if (self.scrollView.contentOffset.y <= 0) {
            if (translation.y > 0) { // 向下拖拽
                self.scrollView.contentOffset = CGPointZero;
                self.scrollView.panGestureRecognizer.enabled = NO;
                self.isDragScrollView = NO;
                
                CGRect contentFrame = self.contentView.frame;
                contentFrame.origin.y += translation.y;
                self.contentView.frame = contentFrame;
            }
        }
    }else {
        CGFloat contentM = (self.frame.size.height - self.contentView.frame.size.height);
        
        if (translation.y > 0) { // 向下拖拽
            CGRect contentFrame = self.contentView.frame;
            contentFrame.origin.y += translation.y;
            self.contentView.frame = contentFrame;
        }else if (translation.y < 0 && self.contentView.frame.origin.y > contentM) { // 向上拖拽
            CGRect contentFrame = self.contentView.frame;
            contentFrame.origin.y = MAX((self.contentView.frame.origin.y + translation.y), contentM);
            self.contentView.frame = contentFrame;
        }
    }
    
    [panGesture setTranslation:CGPointZero inView:self.contentView];
    
    if (panGesture.state == UIGestureRecognizerStateEnded) {
        CGPoint velocity = [panGesture velocityInView:self.contentView];
        
        self.scrollView.panGestureRecognizer.enabled = YES;
        
        // 結(jié)束時(shí)的速度>0 滑動(dòng)距離> 5 且UIScrollView滑動(dòng)到最頂部
        if (velocity.y > 0 && self.lastTransitionY > 5 && !self.isDragScrollView) {
            [self dismiss];
        }else {
            [self show];
        }
    }
    
    self.lastTransitionY = translation.y;
}

最后

通過上面的步驟，基本上就實(shí)現(xiàn)了抖音的評論視圖效果，當(dāng)然還有一些細(xì)節(jié)需要處理，具體可以看github上的demoGKDYVideo，如果覺得不錯(cuò)，還請來個(gè)star!