网络编程

当前位置:永利402游戏网站-永利402com官方网站 > 网络编程 > 学学自定义流水布局

学学自定义流水布局

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-09-11 14:45

定时器效果:

2.1 实现滚动时候可以设置布局

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

手动拖拽的时候可以看到随着拖动的操作,图片有个放大的效果,以上就是所要实现的最终效果。

2.2 在滚动的过程中对图片进行缩放

离屏幕中心点越近的图片越大,离中心点越远的图片越小,这边只需要拿到具体的cell改变他的transform属性就可以。具体如何实现呢,需要以下的思路:

  • 先确定一个rect来获得这个rect的cell,rect的宽度和高度不用说肯定是collectionView的宽度和高度,但是坐标点是在变换的,因为collectionView会滚动,但是通过深入学习bounds我们可以知道滚动底层实现就是改变bounds,因此滚动时候设置的frame直接取collectionView的bounds就可以了
  • 拿到给定的范围的cell,这时候我们需要计算cell的缩放的大小,越靠近屏幕中间的则越大,离的越远则越小,为了设置动态缩放,我们需要计算cell中心点离屏幕中心点的位置,然后计算比例,在中心点就是正常尺寸,有偏移的就缩小一定程度。

图片 1

计算距离.png

通过上面这个图我们可以直观的理解,屏幕显示的范围在不停的变化,但是每次变化基本上都会包含2个cell,通过计算cell离中心点的距离,具体的计算就是cell的中心点横坐标减去collectionView的偏移的x,减去collectionView一半宽度就能够得到偏移量(要取绝对值,因为可能是负的)。

  • 然后计算百分比,这里得到的偏移量是cell的中心点离collectionView中心点距离,因此与collectionView的宽度一半进行相除,如果是0,则意味着2个中心点重合,这时候的缩放比例应该是最大的,如果为1则是最小,是负相关,因此用1来减去得到正相关,这样当在中心点位置就是1,距离最远就是0.但我们也不希望离中心点位置远的缩小为0,比中心点的小一部分尺寸就可以了,所以cellOffset / (self.collectionView.frame.size.width * 0.5) * 0.3这样离中心点距离为半个collectionView宽度的cell尺寸缩小0.7
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // ----1.先获取当前collectionView所在区域的cell
    NSArray *attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds];

    for (UICollectionViewLayoutAttributes *cellAttr in attrs) {

        // ----获取偏移量(取绝对值)
        CGFloat cellOffset = fabs(cellAttr.center.x - self.collectionView.contentOffset.x - self.collectionView.frame.size.width * 0.5);

        // ----计算百分比
        CGFloat perCent = 1 - cellOffset / (self.collectionView.frame.size.width * 0.5) * 0.3;

        cellAttr.transform = CGAffineTransformMakeScale(perCent, perCent);
    }

定时器效果

collectionView的系统的流水布局已经可以满足日常需要,但是如果你需要给滚动的时候加上动画,还是需要自定义流水布局。

图片 2

在网上看到别人用collectionView写的图片浏览器,可以缩放和定位功能,因此深入学习了一下。

- snapToPage { CGPoint pageOffset; pageOffset.x = [self pageOffsetForComponent:YES]; pageOffset.y = [self pageOffsetForComponent:NO]; CGPoint currentOffset = self.contentOffset; if (!CGPointEqualToPoint(pageOffset, currentOffset)) { _snapping = YES; [self setContentOffset:pageOffset animated:YES]; } _dragVelocity = CGPointZero; _dragDisplacement = CGPointZero;}

- pageOffsetForComponent:isX { if (((isX ? CGRectGetWidth(self.bounds) : CGRectGetHeight(self.bounds)) == 0) || ((isX ? self.contentSize.width : self.contentSize.height) == 0)) return 0; CGFloat pageLength = isX ? _pageWidth : _pageHeight; if (pageLength < FLT_EPSILON) pageLength = isX ? CGRectGetWidth(self.bounds) : CGRectGetHeight(self.bounds); pageLength *= self.zoomScale; CGFloat totalLength = isX ? self.contentSize.width : self.contentSize.height; CGFloat visibleLength = (isX ? CGRectGetWidth(self.bounds) : CGRectGetHeight(self.bounds)) * self.zoomScale; CGFloat currentOffset = isX ? self.contentOffset.x : self.contentOffset.y; CGFloat dragVelocity = isX ? _dragVelocity.x : _dragVelocity.y; CGFloat dragDisplacement = isX ? _dragDisplacement.x : _dragDisplacement.y; CGFloat newOffset; CGFloat index = currentOffset / pageLength; CGFloat lowerIndex = floorf; CGFloat upperIndex = ceilf; if (ABS(dragDisplacement) < DRAG_DISPLACEMENT_THRESHOLD || dragDisplacement * dragVelocity < 0) { if (index - lowerIndex > upperIndex - index) { index = upperIndex; } else { index = lowerIndex; } } else { if (dragVelocity > 0) { index = upperIndex; } else { index = lowerIndex; } } newOffset = pageLength * index; if (newOffset > totalLength - visibleLength) newOffset = totalLength - visibleLength; if (newOffset < 0) newOffset = 0; return newOffset;}

#pragma mark - ScrollView delegate- scrollViewWillBeginDragging:(UIScrollView *)scrollView { _dragDisplacement = scrollView.contentOffset; if (_delegateRespondsToWillBeginDragging) [_actualDelegate scrollViewWillBeginDragging:scrollView];}- scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:velocity targetContentOffset:(inout CGPoint *)targetContentOffset { if (_pagingEnabled) { *targetContentOffset = scrollView.contentOffset; _dragVelocity = velocity; _dragDisplacement = CGPointMake(scrollView.contentOffset.x - _dragDisplacement.x, scrollView.contentOffset.y - _dragDisplacement.y); } else { if (_delegateRespondsToWillEndDragging) [_actualDelegate scrollViewWillEndDragging:scrollView withVelocity:velocity targetContentOffset:targetContentOffset]; }}- scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:decelerate { if (!decelerate && _pagingEnabled) [self snapToPage]; if (_delegateRespondsToDidEndDragging) [_actualDelegate scrollViewDidEndDragging:scrollView willDecelerate:decelerate];}- scrollViewDidEndDecelerating:(UIScrollView *)scrollView { if (_pagingEnabled) [self snapToPage]; if (_delegateRespondsToDidEndDecelerating) [_actualDelegate scrollViewDidEndDecelerating:scrollView];}- scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { if (!_snapping && _pagingEnabled) { [self snapToPage]; } else { _snapping = NO; } if (_delegateRespondsToDidEndScrollingAnimation) [_actualDelegate scrollViewDidEndScrollingAnimation:scrollView];}- scrollViewDidEndZooming:(UIScrollView *)scrollView withView:view atScale:scale { if (_pagingEnabled) [self snapToPage]; if (_delegateRespondsToDidEndZooming) [_actualDelegate scrollViewDidEndZooming:scrollView withView:view atScale:scale];}

如何自定义流水布局

在最近公司项目需求,要求实现类似于腾讯视频轮播器的效果,另外需要加上缩放效果,先上实现的效果图

1.需要重写的方法

自定义流水布局只需要新建一个类,继承自UICollectionViewFlowLayout,然后重写它的系统方法。

和定制图片浏览器效果有关的5个系统方法:

  1. - (void)prepareLayout; 这个方法是在collectionView第一次显示或者刷新的时候会调用,默认这个方法是不做任何事情的,子类可以重写它来进行数据结构的设置或者计算任何需要执行的布局后的初始计算。

  2. - (CGSize)collectionViewContentSize;这个方法是用来计算collectionView的滚动范围,可以重写,也可以不重写。

  3. - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;这个方法的意思是你提供一个区域,然后返回这个区域包含的cell的属性。

  4. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;这个方法意思是在滚动时候是否可以重新布局,默认是NO,如果想要滚动时候产生缩放效果则必须设置为yes,这里invalidate意思是刷新。

  5. - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;这个方法是获得最终滚动的位置,因为在滚动时候有一个速率,苹果内部根据速率来计算缓冲,因此你快速滑动,会向后缓冲一段距离。

图片 3定时器看起来,没毛病,可是等拖拽的时候就懵逼了,因为一滑的快的话就有问题了。当滑到最后一张的时候因为代理方法的调用时间,所以有可能来不及设置回到第一张图片。图片 4后面由于种种原因就又回到了UICollectionView,在这里用的就是第二种方法完全自定义分页的宽度。

2.开始实现滚动时候缩放效果

可能看到这里,你会想到 UICollectionView,自定义布局,每次滑动结束的时候,将距离屏幕中心位置最近的Item 显示在中间,然后将显示在屏幕中的 Item 进行设置 transform属性。在一开始看到这个需求的时候,也没有考虑到这么多,认为一个UICollectionView就能搞定这个需求。可是当自己把自定义布局实现了,然后鼠标随手一拽,速度一块,发现有多个 Item 已经随着滚动过去了,这明显不能满足需求,如果将pageEnable 属性设置为 YES,虽然可以不让多个 Item 滚动过去,但是UICollectionViewcontentOffset又不正确,默认的分页宽度为UICollectionView的宽度。于是在网上找到方案:第一种是将 UIScrollView的宽度设置为我们想要的每页的偏移宽度,然后将UIScrollViewclipsToBounds设置为 NO,这样每次滑动就能达到我们想要的偏移量。第二种是完全自定义分页宽度。先说说第一种方法:在将UICollectionViewframe设置为想要的偏移量大小时,因为复用机制,每次滑出 collectionView 范围时,就被回收了,而需求是要显示三张图片,于是转战UIScrollView,暂时不实现缩放效果。一开始在scrollViewDidScroll:代理里去设置显示的图片,ScrollView各种不按常理去偏移,最后在scrollViewDidEndDecelerating:代理方法去实现图片的显示和偏移量。

2.3 设置滚动结束的停留位置

在滚动之后,最好的用户体验是自动停留在距离中心点最近的图片显示在中间,这样就需要用到了- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity这个方法,我们来分析下如何处理:

  • 因为我们知道有个缓冲,所以手指滑动时候,collectionView的偏移量和最终停留位置的坐标点不一致,这个方法返回的就是最终停留的坐标点,因此可以先调用super的这个方法,获得到最终停留点。
  • 根据最终的滚动停止的坐标,就可以得出最后滚动停止之后的区域,然后拿到该区域的cell这里要调用super的方法,因为我们已经重写了当前类的这个方法
  • 计算cell谁离中心点最近,然后把该cell设置为屏幕中心,因此要取出最小的的距离点。这里比较值的时候可能会有负的,因此要去绝对值
  • 然后用最终的偏移量加上这个距离中心点的距离,这样可以设置距离最近的图片显示在中信。通过打印发现可能会出现-0这种情况,导致卡顿,需要做个判断
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGPoint targetP = [super targetContentOffsetForProposedContentOffset:proposedContentOffset withScrollingVelocity:velocity];

    CGFloat collectionW = self.collectionView.frame.size.width;

    CGFloat collectionH = self.collectionView.frame.size.height;

    CGRect frame    = CGRectMake(targetP.x, 0, collectionW, collectionH);

    NSArray *attrs  = [super layoutAttributesForElementsInRect:frame];

    CGFloat minOffSetX = MAXFLOAT;

    for (UICollectionViewLayoutAttributes *attr in attrs) {

        // ----这里要减去最终偏移量的x!!!
        CGFloat cellOffset = attr.center.x - targetP.x - collectionW * 0.5;

        if (fabs(cellOffset) < fabs(minOffSetX)) {
            minOffSetX = cellOffset;
        }
    }

    targetP.x += minOffSetX;

    // ----拖动时候可能会卡顿,通过打印发现有负0,这种情况,因此做个判断
    if (targetP.x < 0) {
        targetP.x = 0;
    }

    return targetP;
}

图片 5

最后附上代码利用 ScrollView 实现分页效果利用 UICollectionView 实现分页效果

以上的代码都是在 网上 查找到的,最后实现了想要的效果。由于这里我用的是UICollcetionView,所以就直接自定义了一个GPCollectionView继承于UICollectionView,最后却发现UICollectionViewDelegate的方法始终不会调用,UIScrollViewDelegate的方法却能调用,在此希望大神们能解释一下。

手动拖拽效果

图片 6

本文由永利402游戏网站-永利402com官方网站发布于网络编程,转载请注明出处:学学自定义流水布局

关键词:

上一篇:网易新闻案例总结

下一篇:没有了