炫酷的UIcollectionlayout

原文// github: https://github.com/jasnig
// 簡書: http://www.reibang.com/p/b84f4dd96d0c

![48BA7E311AC1141EBF92C6BE38007BF3.jpg](http://upload-images.jianshu.io/upload_images/1402122-b15c3da976aac86e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

實現(xiàn)代碼

class LineLayout: UICollectionViewFlowLayout {
    // 用來緩存布局
    private var layoutAttributes: [UICollectionViewLayoutAttributes] = []
    var contentOffsetBeginX:CGFloat = 0.0
    
    override func prepare() {
        super.prepare()
        scrollDirection = .horizontal
        self.minimumLineSpacing = 10
        self.minimumInteritemSpacing = 10
        let Insetwith = UIScreen.main.bounds.size.width / 2 - itemSize.width / 2
        
        self.sectionInset = UIEdgeInsets.init(top: 0, left: Insetwith, bottom: 0, right: Insetwith)
        
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        layoutAttributes = []
        let superLayoutAttributes = super.layoutAttributesForElements(in: rect)!
        
        let collectionViewCenterX = collectionView!.bounds.width * 0.5
        
        superLayoutAttributes.forEach { (attributes) in
    
            let copyLayout = attributes.copy() as! UICollectionViewLayoutAttributes
            // 和中心點的橫向距離差
            let deltaX = fabs( copyLayout.center.x - collectionView!.contentOffset.x - collectionViewCenterX)
            // 計算屏幕內(nèi)的cell的transform
                let precent = 1.0 -  (deltaX * 0.1) / collectionViewCenterX
                copyLayout.alpha = precent
                var transform = CATransform3DIdentity
                transform = CATransform3DScale(transform, precent, precent, 1)
                copyLayout.transform3D = transform
                copyLayout.alpha = 1 - (deltaX * 0.5)/collectionViewCenterX
                copyLayout.zIndex = 1
            layoutAttributes.append(copyLayout)
        }
        return layoutAttributes
    }
    /** 返回true將會標記collectionView的data為 'dirty'
     * collectionView檢測到 'dirty'標記時會在下一個周期中更新布局
     * 滾動的時候實時更新布局
     */
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
    
    // 此方法已經(jīng)在父類UICollectionViewFlowLayout中
    // 已經(jīng)實現(xiàn)了志群,即阻肿,父類中這個方法已經(jīng)能夠產(chǎn)生出一堆
    // 決定item如何顯示的attributes對象了
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        let distance = proposedContentOffset.x - contentOffsetBeginX
        var contentFrame:CGRect = CGRect.init()
        if distance > self.itemSize.width / 2 {
            contentFrame.origin = CGPoint.init(x: contentOffsetBeginX + self.itemSize.width, y: proposedContentOffset.y)
        }else if distance < -self.itemSize.width / 2{
            contentFrame.origin = CGPoint.init(x: contentOffsetBeginX - self.itemSize.width, y: proposedContentOffset.y)
        }else{
            contentFrame.origin = CGPoint.init(x: contentOffsetBeginX  , y: proposedContentOffset.y)
        }
        contentFrame.size = (self.collectionView?.frame.size)!
        let array = self.layoutAttributesForElements(in: contentFrame)
        var maiCenterX = CGFloat.greatestFiniteMagnitude
        let collectionViewCenterX = contentFrame.origin.x + (self.collectionView?.frame.size.width)! * 0.5
        array?.forEach({ (attrs) in
            if abs(attrs.center.x - collectionViewCenterX) < abs(maiCenterX){
                maiCenterX = attrs.center.x - collectionViewCenterX
            }
        })
        return  CGPoint.init(x: contentFrame.origin.x + maiCenterX, y: proposedContentOffset.y)
    }
}

簡單使用

  let layout = LineLayout()
   layout.itemSize = CGSize(width: 250.0, height: 400.0)
   collectionView?.collectionViewLayout = layout

  override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        layout.contentOffsetBeginX = scrollView.contentOffset.x
    }

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昼捍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子骗随,更是在濱河造成了極大的恐慌芦倒,老刑警劉巖艺挪,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異兵扬,居然都是意外死亡麻裳,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門器钟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掂器,“玉大人,你說我怎么就攤上這事俱箱。” “怎么了灭必?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵狞谱,是天一觀的道長。 經(jīng)常有香客問我禁漓,道長跟衅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任播歼,我火速辦了婚禮伶跷,結果婚禮上,老公的妹妹穿的比我還像新娘秘狞。我一直安慰自己叭莫,他們只是感情好,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布烁试。 她就那樣靜靜地躺著雇初,像睡著了一般。 火紅的嫁衣襯著肌膚如雪减响。 梳的紋絲不亂的頭發(fā)上靖诗,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天郭怪,我揣著相機與錄音,去河邊找鬼刊橘。 笑死鄙才,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的促绵。 我是一名探鬼主播攒庵,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼绞愚!你這毒婦竟也來了叙甸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤位衩,失蹤者是張志新(化名)和其女友劉穎裆蒸,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糖驴,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡僚祷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了贮缕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辙谜。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖感昼,靈堂內(nèi)的尸體忽然破棺而出装哆,到底是詐尸還是另有隱情,我是刑警寧澤定嗓,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布蜕琴,位于F島的核電站,受9級特大地震影響宵溅,放射性物質發(fā)生泄漏凌简。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一恃逻、第九天 我趴在偏房一處隱蔽的房頂上張望雏搂。 院中可真熱鬧,春花似錦寇损、人聲如沸凸郑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽线椰。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間憨愉,已是汗流浹背烦绳。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留配紫,地道東北人径密。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像躺孝,于是被迫代替她去往敵國和親享扔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,734評論 25 707
  • afinalAfinal是一個android的ioc植袍,orm框架 https://github.com/yangf...
    passiontim閱讀 15,406評論 2 45
  • 浮動概述 CSS浮動由屬性值float來體現(xiàn)惧眠,通過浮動可以實現(xiàn)文字環(huán)繞的效果 浮動特點 先看下面示例 圖片未設置浮...
    田田kyle閱讀 411評論 0 0
  • 【同讀一本書】 2016-12-28-115 《管理的覺醒》 【原文】 稽核造就的是一種企業(yè)文化,企業(yè)氛圍于个,它靠氛...
    楊平的閱讀 329評論 2 0
  • 天色漸漸暗下來 耳機里的聲音依舊 心情低落就像下雨淋了水 沒有穿透迷霧的陽光 不斷去切換聊天的界面 依舊是什么都沒...
    萌龍在天閱讀 100評論 0 0