自定義UICollectionViewFlowLayout

在學(xué)習(xí)collectionView的時(shí)候最重要的是每一個(gè)cell位置布局.每一個(gè)cell的布局完全有一個(gè)類來控制UICollectionViewLayout 就是這個(gè)類.然而我們用的做多是他的子類UICollectionViewFlowLayout.流氏布局.
下面這個(gè)demo是在流氏布局的基礎(chǔ)上重寫得到的

下面是控制器.h

//
//  ViewController.h
//  照片流水CollectionView
//
//   Created by 3D on 16/7/15.
//  Copyright ? 2016年 3D. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController :  UIViewController
@end

下面是控制器.m

 //
 //  ViewController.m
 //  照片流水CollectionView
 //
 //  Created by 3D on 16/7/15.
 //  Copyright ? 2016年 3D. All rights reserved.
 //

 #import "ViewController.h"
 #import "liushuiLayout.h"
 #import "testCollectionViewCell.h"
 @interface ViewController ()    <UICollectionViewDataSource,UICollectionViewDelegate>
 @property(nonatomic,strong)UICollectionView *collectionView;
 @end

@implementation ViewController

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 20;
}

  // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
testCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

cell.imageName = @"2";
cell.lableName = [NSString stringWithFormat:@"%ld",indexPath.item];
return cell;
}

-(UICollectionView *)collectionView{
if (!_collectionView) {
    _collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:[[liushuiLayout alloc]init]];
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    [_collectionView registerClass:[testCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}
return _collectionView;
}

 - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view addSubview:self.collectionView];
 }

 - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be  recreated.
}

@end

下面是重寫的cell.h

#import <UIKit/UIKit.h>

@interface testCollectionViewCell :     UICollectionViewCell

@property(nonatomic,strong)NSString *lableName;
@property(nonatomic,strong)NSString *imageName;
@end

下面是重寫cell.m

#import "testCollectionViewCell.h"

@interface testCollectionViewCell ()
@property(nonatomic,strong)UIImageView *imageView;
@property(nonatomic,strong)UILabel *lable;
@end

@implementation testCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
    UIImageView *imageView = [[UIImageView alloc]init];
    self.backgroundView = imageView;
    self.imageView = imageView;
    
    UILabel *lable = [[UILabel alloc]init];
    self.lable = lable;
    self.lable.textAlignment = NSTextAlignmentCenter;
    self.lable.backgroundColor = [UIColor grayColor];
    self.lable.textColor = [UIColor greenColor];
    self.lable.frame = CGRectMake(0, 0, 50, 50);
    [self.imageView addSubview:self.lable];
    
}
return self;
}

-(void)setImageName:(NSString *)imageName{
_imageName = imageName;
self.imageView.image = [UIImage imageNamed:_imageName];
}

-(void)setLableName:(NSString *)lableName{
_lableName = lableName;
self.lable.text = _lableName;
}
@end

靈魂布局.h

#import <UIKit/UIKit.h>

@interface liushuiLayout : UICollectionViewFlowLayout
@end

靈魂布局.m

#import "liushuiLayout.h"

@interface liushuiLayout ()
@property(nonatomic,strong)NSMutableArray *arr;
@end


@implementation liushuiLayout

//保存所有的布局項(xiàng)
- (NSMutableArray *)arr {
if(_arr == nil) {
    _arr = [[NSMutableArray alloc] init];
}
return _arr;
}

-(instancetype)init{
if (self = [super init]) {
    NSLog(@"000000");
    self.itemSize = CGSizeMake(120, 120);
    self.minimumInteritemSpacing = 500;
    self.minimumLineSpacing = 2;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
}
return self;
}

-(void)prepareLayout{
[super prepareLayout];
//如果布局是死的 就是每個(gè)cell的frem是不變的,就在這里面布局 找到規(guī)律改變每一個(gè) attrs的fream就好了
//    NSInteger count =   [self.collectionView numberOfItemsInSection:0];
//    for (int i = 0; i < count; i++) {
 //        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//        UICollectionViewLayoutAttributes *attrs = [self  layoutAttributesForItemAtIndexPath:indexPath];
//        
//        [self.arr addObject:attrs];
//    }

//   self.itemSize = CGSizeMake(120, 120);
 //  self.minimumInteritemSpacing = 500;
//   self.minimumLineSpacing = 2;
  // self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
}

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


-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//獲得當(dāng)前屏幕上所有的Attrs
NSArray <UICollectionViewLayoutAttributes*> *arrayAttrs = [super layoutAttributesForElementsInRect:rect];
  //計(jì)算可見范圍內(nèi) collectionView 在屏幕中的 中心點(diǎn)位置.
CGFloat centerX = self.collectionView.frame.size.width/2.0 + self.collectionView.contentOffset.x;
//
for (UICollectionViewLayoutAttributes *attr in arrayAttrs) {
   //屏幕中 cell的中心點(diǎn)距離屏幕的中心點(diǎn)的距離 (可知道這個(gè)距離最小是0 最大是self.collectionView.frame.size.width/2)
    CGFloat distance = ABS(attr.center.x - centerX);
    //根據(jù)cell 距離中心點(diǎn)的這個(gè)動(dòng)態(tài) 變化的距離制造一個(gè)縮放比例.

    CGFloat scale = 1 - distance / (self.collectionView.frame.size.width /2.0);
    
    //當(dāng)?shù)竭_(dá)邊界的時(shí)候 scale = 0 當(dāng)時(shí)到達(dá)中心的時(shí)候 scale = 1;
    attr.transform = CGAffineTransformMakeScale(scale, scale);
}

return arrayAttrs;
}

/**
* 這個(gè)方法的返回值蛤吓,就決定了collectionView停止?jié)L動(dòng)時(shí)的偏移量
*/

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{

// 得到顯示在屏幕上的 那塊區(qū)域的坐標(biāo)和大小
CGRect rect = CGRectZero;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;

// 得到還沒有 縮放前的 attr
NSArray <UICollectionViewLayoutAttributes*> *arrayAttrs = [super layoutAttributesForElementsInRect:rect];
//計(jì)算可見范圍[屏幕上 collectionView中心點(diǎn)的x的坐標(biāo)
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;

//這只是一個(gè) 很大的數(shù)字
CGFloat minDistance = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attr in arrayAttrs) {
    //便利算出 每一個(gè)attr的中心點(diǎn)距離 centerX的距離并得到最小距離
    if (ABS(minDistance) > ABS(attr.center.x - centerX)) {
        
        minDistance  = attr.center.x - centerX; //
    }
}
//修改 原來的偏移量
proposedContentOffset.x += minDistance;
return proposedContentOffset;
}
@end

配合這一張圖來理解 靈魂布局.m
黑色框框代表屏幕
紅色框框代表collectionView的內(nèi)容視圖.

8B1CF3FE-6ED1-46E4-A94A-2A2F904B6BF5.png

效果圖

2016-07-16 22_04_27.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末那先,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子毅人,更是在濱河造成了極大的恐慌德绿,老刑警劉巖舷手,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件眉尸,死亡現(xiàn)場(chǎng)離奇詭異秒紧,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)透乾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門洪燥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人续徽,你說我怎么就攤上這事∏自瑁” “怎么了钦扭?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)床绪。 經(jīng)常有香客問我客情,道長(zhǎng)其弊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任膀斋,我火速辦了婚禮梭伐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘仰担。我一直安慰自己糊识,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布摔蓝。 她就那樣靜靜地躺著赂苗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贮尉。 梳的紋絲不亂的頭發(fā)上拌滋,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音猜谚,去河邊找鬼败砂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛魏铅,可吹牛的內(nèi)容都是我干的昌犹。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼沦零,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼祭隔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起路操,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤疾渴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后屯仗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搞坝,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年魁袜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了桩撮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡峰弹,死狀恐怖店量,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鞠呈,我是刑警寧澤融师,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站蚁吝,受9級(jí)特大地震影響旱爆,放射性物質(zhì)發(fā)生泄漏舀射。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一怀伦、第九天 我趴在偏房一處隱蔽的房頂上張望脆烟。 院中可真熱鬧,春花似錦房待、人聲如沸邢羔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽张抄。三九已至,卻和暖如春洼怔,著一層夾襖步出監(jiān)牢的瞬間署惯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工镣隶, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留极谊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓安岂,卻偏偏與公主長(zhǎng)得像轻猖,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子域那,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348

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