美文网首页
CollectionView画廊效果

CollectionView画廊效果

作者: wenju | 来源:发表于2021-08-04 14:22 被阅读0次

以下代码直接添加到自定义的FlowLayout中即可

//画廊效果
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

        let targetRect = CGRect(x: proposedContentOffset.x, y: 0.0, width:  self.collectionView!.bounds.size.width, height: self.collectionView!.bounds.size.height)
        // 目标区域中包含的cell
        let attriArray = super.layoutAttributesForElements(in: targetRect)! as [UICollectionViewLayoutAttributes]
        // collectionView落在屏幕中点的x坐标
        let horizontalCenterX = proposedContentOffset.x + (self.collectionView!.bounds.width / 2.0)
        var offsetAdjustment = CGFloat(MAXFLOAT)
        for layoutAttributes in attriArray {
            let itemHorizontalCenterX = layoutAttributes.center.x
            // 找出离中心点最近的
            if(abs(itemHorizontalCenterX-horizontalCenterX) < abs(offsetAdjustment)) {
                offsetAdjustment = itemHorizontalCenterX-horizontalCenterX
            }
        }

        //返回collectionView最终停留的位置
        return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
    }

    let ActiveDistance : CGFloat = 400 //垂直缩放除以系数
    let ScaleFactor : CGFloat = 0.25     //缩放系数  越大缩放越大

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        let array = super.layoutAttributesForElements(in: rect)
        var visibleRect = CGRect()
        visibleRect.origin = self.collectionView!.contentOffset
        visibleRect.size = self.collectionView!.bounds.size

        for attributes in array! {
            let distance = visibleRect.midX - attributes.center.x
            let normalizedDistance = abs(distance / ActiveDistance)
            let zoom = 1 - ScaleFactor * normalizedDistance
            attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0)
        }
        return array
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        //滑动放大缩小  需要实时刷新layout
        return true
    }

相关文章

  • CollectionView画廊效果

    以下代码直接添加到自定义的FlowLayout中即可

  • collectionView 实现画廊效果

    效果 标题是collectionView,但其实这篇文章说的是自定义FlowLayout的事? 大家都知道coll...

  • 遇到的小问题

    collectionView没有反弹效果,设置_collectionView.alwaysBounceVertic...

  • 画廊效果

    这两天研究画廊效果,在github 上发现一个还不错的开源项目,集成了一下,下面来看下效果 下面看下集成过程首先在...

  • 27

    运行效果: 给控件添加collectionView 给collectionView设置约束 上下左右为0 设置数据...

  • iOS-CollectionView流水布局

    使用CollectionView 的流水布局来实现以下效果 首先我们需要初始化collectionView,步骤与...

  • scrollToItemAtIndexPath调用无效

    这两天做一个效果:tableview中包着一个collectionview ,collectionview的cel...

  • ViewPager切换动画

    1. 3D画廊效果 2.相互连接显示效果 3.水滴指示器效果 4.动态设置是否可滚动效果 1. 3D画廊效果 关键...

  • 点击事件处理

    想要实现的效果点击CollectionCell走func collectionView(_ collectionV...

  • 有用的库

    画廊效果implementation'github.hellocsl:GalleryLayoutManager:1...

网友评论

      本文标题:CollectionView画廊效果

      本文链接:https://www.haomeiwen.com/subject/nyjuvltx.html