模仿扇貝英語(yǔ)每日一句——圖片查看器

模仿扇貝英語(yǔ)的每日一句所做的圖片查看器,通過(guò)CollectionView + 自定義FlowLayout制作。
效果圖:

圖片查看器

主要通過(guò)重寫(xiě)了override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? 這個(gè)方法

 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
  
        let array = NSArray(array: super.layoutAttributesForElements(in: rect)!, copyItems:true) as! [UICollectionViewLayoutAttributes]
        //可視r(shí)ect
        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對(duì)屏幕中心的距離
            let distance = attributes.center.x - visibleRect.midX
            
            if distance > 0  && distance <= visibleRect.width && index != 0{
                
                if newScroll {
                    scrollState = isRight ? .right : .left
                    newScroll = false
                }
                
                //右滑動(dòng) || 右滑未完成 && 左滑完成
                if scling <= 0.7 && scrollState == .right {
                    scling = 0.7
                }

                //滑動(dòng)是否完成
                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
                //調(diào)整層級(jí)關(guān)系
                attributes.zIndex = -1
                
                break
            }
           
        }
        oldOffsetX = self.collectionView!.contentOffset.x
        return array
    }

在編寫(xiě)的過(guò)程中主要遇到的問(wèn)題為,當(dāng)左滑一半右滑的處理和右滑一半左滑的處理,嘗試了很多辦法才得以解決。最后附上demo地址
https://github.com/px123zx/PictureViewer

如果對(duì)該demo有什么好的意見(jiàn)或者建議請(qǐng)與我聯(lián)系,謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容