初識(shí)UICollectionViewFlowLayout

最常見(jiàn)的是網(wǎng)上有很多商城中的瀑布流列表展示和高大上圖片瀏覽中會(huì)用到自定義的UICollectionViewFlowLayout,前者是屏幕上根據(jù)需求展示不同大小的UICollectionViewCell兩列或者三列粉私,錯(cuò)落排列顽腾,后者是展現(xiàn)出一種圖片立體環(huán)繞視覺(jué),前方圖片總是居中顯示诺核,兩側(cè)圖片比例要小抄肖,隨著顯現(xiàn)或者消失做放大或者縮小處理
最近,在實(shí)際項(xiàng)目中遇到一種類似后者圖片瀏覽的那種效果窖杀,但是每個(gè)UICollectionViewCell等大顯示漓摩,不做放大縮小處理。因?yàn)橹傲私膺^(guò)這種效果實(shí)現(xiàn)的大概機(jī)制入客,所以管毙,開(kāi)始以為會(huì)比較簡(jiǎn)單,可以后來(lái)發(fā)現(xiàn)自己錯(cuò)了桌硫,我先從網(wǎng)上找了demo夭咬,貼一下主要代碼,每個(gè)方法的作用我都加了備注
//重新設(shè)置collectionView的contentOffset,也就是每個(gè)cell的x值鞍泉,proposedContentOffset是實(shí)際按照設(shè)置的layout布局的偏移量皱埠,該方法重新設(shè)置實(shí)際需要的偏移量,當(dāng)然要根據(jù)collectionView的寬度咖驮,layout設(shè)置的itemSize以及sectionInsets等
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    proposedContentOffset.y = 0.0;
    if (_isPagingEnabled) {
        proposedContentOffset.x = [self PageMove:proposedContentOffset];
    }else{
        proposedContentOffset.x = [self SMove:proposedContentOffset velocity:velocity];
    }
    return proposedContentOffset;
}

//內(nèi)部參數(shù)根據(jù)自己實(shí)際需要設(shè)置边器,這就需要你的知識(shí)了
-(CGFloat)PageMove:(CGPoint)proposedContentOffset{
    CGFloat set_x =  proposedContentOffset.x;
    
    if (set_x > _move_x) {
        _move_x += SCREENWITH - 15 * 2;
    }else if(set_x < _move_x){
        _move_x -= SCREENWITH - 15 * 2;
    }
    set_x = _move_x;
    return set_x;
}

-(CGFloat)SMove:(CGPoint)proposedContentOffset velocity :(CGPoint)velocity{
    
    CGFloat offSetAdjustment = MAXFLOAT;
    CGFloat horizontalCenter = (CGFloat) (proposedContentOffset.x + (self.collectionView.bounds.size.width / 2.0));
    
    CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
    
    NSArray *array = [self layoutAttributesForElementsInRect:targetRect];
    
    UICollectionViewLayoutAttributes *currentAttributes;
    
    for (UICollectionViewLayoutAttributes *layoutAttributes in array)
    {
        if(layoutAttributes.representedElementCategory == UICollectionElementCategoryCell)
        {
            CGFloat itemHorizontalCenter = layoutAttributes.center.x;
            if (ABS(itemHorizontalCenter - horizontalCenter) <  ABS(offSetAdjustment))
            {
                currentAttributes   = layoutAttributes;
                offSetAdjustment    = itemHorizontalCenter - horizontalCenter;
            }
        }
    }
    
    CGFloat nextOffset          = proposedContentOffset.x + offSetAdjustment;
    
    proposedContentOffset.x     = nextOffset;
    
    CGFloat deltaX              = proposedContentOffset.x - self.collectionView.contentOffset.x;
    CGFloat velX                = velocity.x;
    
    if(deltaX == 0.0 || velX == 0 || (velX >  0.0  &&  deltaX >  0.0) || (velX <  0.0 &&  deltaX <  0.0)) {
        
    } else if(velocity.x >  0.0) {
        for (UICollectionViewLayoutAttributes *layoutAttributes in array)
        {
            if(layoutAttributes.representedElementCategory == UICollectionElementCategoryCell)
            {
                CGFloat itemHorizontalCenter = layoutAttributes.center.x;
                if (itemHorizontalCenter >  proposedContentOffset.x) {
                    proposedContentOffset.x = nextOffset + (currentAttributes.frame.size.width / 2) + (layoutAttributes.frame.size.width / 2);
                    break;
                }
            }
        }
    } else if(velocity.x <=  0.0) {
        for (UICollectionViewLayoutAttributes *layoutAttributes in array)
        {
            if(layoutAttributes.representedElementCategory == UICollectionElementCategoryCell)
            {
                CGFloat itemHorizontalCenter = layoutAttributes.center.x;
                if (itemHorizontalCenter >  proposedContentOffset.x) {
                    proposedContentOffset.x = nextOffset - ((currentAttributes.frame.size.width / 2) + (layoutAttributes.frame.size.width / 2));
                    break;
                }
            }
        }
    }
    
    if (proposedContentOffset.x == -0.0) {
        proposedContentOffset.x = 0.0;
        
    }
    return proposedContentOffset.x;
    
}

-(void)setPagingEnabled:(BOOL)isPagingEnabled{
    _isPagingEnabled = isPagingEnabled;
}


static CGFloat const ActiveDistance = 350;
static CGFloat const ScaleFactor = 0.05;

//重寫該方法,返回需要的每個(gè)Cell的布局托修,在系統(tǒng)的基礎(chǔ)上做出需要的效果忘巧,這里就用大了放大縮小
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    //    CGRect visibleRect;
    //    visibleRect.origin = self.collectionView.contentOffset;
    //    visibleRect.size = self.collectionView.bounds.size;
    //
    //    for (UICollectionViewLayoutAttributes* attributes in array) {
    //        CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
    //        CGFloat normalizedDistance = distance / ActiveDistance;
    //        CGFloat zoom = 1 + ScaleFactor*(1 - ABS(normalizedDistance));
    //        attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0);
    //        attributes.zIndex = 1;
    //    }
    return array;
}

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

如上代碼,我開(kāi)始只是把放大縮小的效果注釋了睦刃,其實(shí)這個(gè)方法可以不要砚嘴,因?yàn)槲也恍枰獙?duì)cell做特殊處理,我以為居中顯示且沒(méi)有放大縮小,可是偏移量根本不是我想要的际长,為什么耸采,因?yàn)? (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity是需要根據(jù)自己設(shè)置的collectionView的寬度和itemSize等變量自己去計(jì)算這個(gè)偏移量的
我貌似在說(shuō)廢話。工育。虾宇。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市如绸,隨后出現(xiàn)的幾起案子嘱朽,更是在濱河造成了極大的恐慌,老刑警劉巖怔接,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搪泳,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡扼脐,警方通過(guò)查閱死者的電腦和手機(jī)岸军,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瓦侮,“玉大人凛膏,你說(shuō)我怎么就攤上這事≡嘤埽” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵台谍,是天一觀的道長(zhǎng)须喂。 經(jīng)常有香客問(wèn)我,道長(zhǎng)趁蕊,這世上最難降的妖魔是什么坞生? 我笑而不...
    開(kāi)封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮掷伙,結(jié)果婚禮上是己,老公的妹妹穿的比我還像新娘。我一直安慰自己任柜,他們只是感情好卒废,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著宙地,像睡著了一般摔认。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宅粥,一...
    開(kāi)封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天参袱,我揣著相機(jī)與錄音,去河邊找鬼。 笑死抹蚀,一個(gè)胖子當(dāng)著我的面吹牛剿牺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播环壤,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼晒来,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了镐捧?” 一聲冷哼從身側(cè)響起潜索,我...
    開(kāi)封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎懂酱,沒(méi)想到半個(gè)月后竹习,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡列牺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年整陌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞎领。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡泌辫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出九默,到底是詐尸還是另有隱情震放,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布驼修,位于F島的核電站殿遂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏乙各。R本人自食惡果不足惜墨礁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望耳峦。 院中可真熱鬧恩静,春花似錦、人聲如沸蹲坷。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)循签。三九已至轻掩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間懦底,已是汗流浹背唇牧。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工罕扎, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丐重。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓腔召,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親扮惦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子臀蛛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

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