CardView

CardView

使用UIColletionView来实现卡片的效果

效果图

步骤

• 自定义UICollectionViewFlowLayout
• 创建collectionView所需要的cell
• 给cell创建上滑、下滑手势

实现代码

以下是三个步骤的实现代码

自定义UICollationViewFlowLayout

在collectionView滑动的时候会根cell据距离中心线的距离计算出cell的缩放倍数

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
    for (UICollectionViewLayoutAttributes *attributes in arr) {
        CGFloat distance = fabs(attributes.center.x - centerX);
        CGFloat apartScale = distance/self.collectionView.bounds.size.width;
        CGFloat scale = fabs(cos(apartScale * M_PI/4));
        attributes.transform = CGAffineTransformMakeScale(1.0, scale);
        attributes.alpha = scale;
    }
    return arr;
}

这个方法要返回YES 在布局发生变化时，布局对象会被询问以提供新的布局。

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES;
}

给cell添加手势 并实现打开关闭的效果

- (void)swipUp:(UISwipeGestureRecognizer *)swipUp{

    [UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.8 initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.bottomView.transform = CGAffineTransformMakeScale(1.05, 1.1);
        self.upView.frame = CGRectMake(self.upView.frame.origin.x, self.upView.frame.origin.y - 100, self.upView.frame.size.width, self.upView.frame.size.height);
    }completion:^(BOOL finished) {
        [self.upView addGestureRecognizer:self.swipDown];
        [self.upView removeGestureRecognizer:self.swipUp];
        //blcok返回的bool表示当前collectionview是否可以滑动
        self.scollBlcok(NO);
    }];

}

- (void)swipDown:(UISwipeGestureRecognizer *)swipDown{
    [UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.8 initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    self.bottomView.transform = CGAffineTransformMakeScale(1.0, 1.0);
    self.upView.frame = CGRectMake(self.upView.frame.origin.x, self.upView.frame.origin.y + 100, self.upView.frame.size.width, self.upView.frame.size.height);
    } completion:^(BOOL finished) {
        [self.upView addGestureRecognizer:self.swipUp];
        [self.upView removeGestureRecognizer:self.swipDown];
        //blcok返回的bool表示当前collectionview是否可以滑动
        self.scollBlcok(YES);
    }];
}

实现scrollView的代理方法 计算手势的滑动方向，如果滑动距离太小，则不会被反转到下一页

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    _endContentOffSet_X = scrollView.contentOffset.x;
    
    CGFloat dragMin_X = [UIScreen mainScreen].bounds.size.width / 4.0; // 滑动不足o屏幕的四分之一 不换页
    if (_endContentOffSet_X > _startContentOffSet_X &&
        (fabs(_endContentOffSet_X - _startContentOffSet_X) > dragMin_X)) {
        //向右滑动
        _currentIndex += 1;
        _currentIndex = (_currentIndex > _dataArr.count - 1) ? (_dataArr.count - 1) : _currentIndex;
    }else if(_endContentOffSet_X < _startContentOffSet_X &&
             (fabs(_endContentOffSet_X - _startContentOffSet_X) > dragMin_X)){
        //向左滑动
        _currentIndex -= 1;
        _currentIndex = (_currentIndex < 0) ? 0 : _currentIndex;
    }
    //在主线程调用会有问题
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:self.currentIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
        self.imageView.image = [UIImage imageNamed:self.dataArr[self.currentIndex]];
    });
    
}

demo请移步[GitHub]