美文网首页首页投稿(暂停使用,暂停投稿)iOS Developer
模仿扇贝英语每日一句——图片查看器

模仿扇贝英语每日一句——图片查看器

作者: Paxton_ | 来源:发表于2017-06-26 16:46 被阅读88次
    模仿扇贝英语的每日一句所做的图片查看器,通过CollectionView + 自定义FlowLayout制作。
    效果图:
    图片查看器
    主要通过重写了override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? 这个方法
     override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
      
            let array = NSArray(array: super.layoutAttributesForElements(in: rect)!, copyItems:true) as! [UICollectionViewLayoutAttributes]
            //可视rect
            var visibleRect = CGRect()
            visibleRect.origin = self.collectionView!.contentOffset
            visibleRect.size = self.collectionView!.bounds.size
            
            //是否右滑
            let isRight = self.collectionView!.contentOffset.x - oldOffsetX < 0 ? true : false
            //缩放比例
            var scling: CGFloat = self.collectionView!.contentOffset.x.truncatingRemainder(dividingBy: self.collectionView!.bounds.width) / collectionView!.bounds.width
            //透明比例
            let alphaScling = scling
            for (index,attributes) in array.enumerated(){
                //cell对屏幕中心的距离
                let distance = attributes.center.x - visibleRect.midX
                
                if distance > 0  && distance <= visibleRect.width && index != 0{
                    
                    if newScroll {
                        scrollState = isRight ? .right : .left
                        newScroll = false
                    }
                    
                    //右滑动 || 右滑未完成 && 左滑完成
                    if scling <= 0.7 && scrollState == .right {
                        scling = 0.7
                    }
    
                    //滑动是否完成
                    if distance == visibleRect.width {
                        newScroll = true
                    }
                    
                    attributes.center = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
                    attributes.transform = attributes.transform.scaledBy(x: scling, y: scling)
                    attributes.alpha = alphaScling
                    //调整层级关系
                    attributes.zIndex = -1
                    
                    break
                }
               
            }
            oldOffsetX = self.collectionView!.contentOffset.x
            return array
        }
    

    在编写的过程中主要遇到的问题为,当左滑一半右滑的处理和右滑一半左滑的处理,尝试了很多办法才得以解决。最后附上demo地址
    https://github.com/px123zx/PictureViewer

    如果对该demo有什么好的意见或者建议请与我联系,谢谢

    相关文章

      网友评论

        本文标题:模仿扇贝英语每日一句——图片查看器

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