普京网址 5

我们所说的要实现瀑布流就是要实现它的不整洁普京网址,只需设置代理和样式

瀑布流 (基于UICollectionView),uicollection瀑布流

普京网址 1

 

 

 

====2016年3月21日更新====
修改一处私下认可值的BUG,能够供自个儿开始展览(BWaterflowLayout
能够看作框架灵活应用)

基于UICollectionView的瀑布流
自定义UICollectionViewLayout达成cell的布局属性

[Objective-C] 查看源文件 复制代码 ?

1 2 3 4 5 6 7 8 /**瀑布流的列数*/ - (CGFloat)columnCountInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**每一列之间的间距*/ - (CGFloat)columnMarginInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**每一行之间的间距*/ - (CGFloat)rowMarginInWaterflowLayout:(BWaterflowLayout *)waterflowLayout; /**cell边缘的间距*/ - (UIEdgeInsets)edgeInsetsInWaterflowLayout:(BWaterflowLayout *)waterflowLayout;

    直接下载代码:

(基于UICollectionView),uicollection瀑布流
====二零一四年四月11日更新====
修改一处私下认可值的BUG,能够供自个儿开始展览(BWaterflowLayout 能够当…

代码

上边是贯彻的代码部分(不提供demo了 很简短)

自家在讲授中简介。


//
//  ViewController.m
//  CX-瀑布流UIcollectionView实现
//
//  Created by ma c on 16/4/8.
//  Copyright © 2016年 bjsxt. All rights reserved.
//

#import "ViewController.h"
#import "CXCollectionViewCell.h"
#import "CXCollectionViewLayout.h"

static NSString * identifier = @"cellID";

@interface ViewController ()<UICollectionViewDataSource>
//所要展示的UICollectionView
@property (nonatomic, strong) UICollectionView * collectionView;

@end

@implementation ViewController

#pragma mark - <懒加载>
- (UICollectionView *)collectionView {
    if (!_collectionView) {
        //初始化我们自定义的flowLayout
        CXCollectionViewLayout * flowLayout = [[CXCollectionViewLayout alloc]init];
        //初始化collectionView
        _collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
        //设置数据源(collectionView的命根子)
        _collectionView.dataSource = self;
        //注册我们自定义的cell
        [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([CXCollectionViewCell class]) bundle:nil] forCellWithReuseIdentifier:identifier];
    }
    return _collectionView;
}


#pragma mark - <life>

- (void)viewDidLoad {
    [super viewDidLoad];
    //在self.view上添加---
    [self.view addSubview:self.collectionView];
}
#pragma mark - <UICollectionViewDataSource>
//这里返回的是item的个数 返回100
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 100;
}
//这里返回的是cell 我们可以在这里进行一些简单的操作
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    CXCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    //为了瀑布流的实现细节我们添加的Label

    cell.label.text = [NSString stringWithFormat:@"%zd",indexPath.item];
    //cell的背景色
    cell.backgroundColor = [UIColor orangeColor];

    return cell;
}

@end

//
//  CXCollectionViewLayout.m
//  CX-瀑布流UIcollectionView实现
//
//  Created by ma c on 16/4/8.
//  Copyright © 2016年 bjsxt. All rights reserved.
//

#import "CXCollectionViewLayout.h"

//瀑布流的列数
static NSInteger CXcolumnCount = 3;
//瀑布流的内边距
static UIEdgeInsets CXdefaultEdgeInsets = {20,15,10,15};
//cell的列间距
static NSInteger CXcolumnMagin = 10;
//cell的行间距
static NSInteger CXrowMagin = 10;

@interface CXCollectionViewLayout ()

//存放所有cell 的布局属性
@property (nonatomic, strong) NSMutableArray * CXattrsArray;
//缩放所有列的高度
@property (nonatomic, strong) NSMutableArray * CXcolumnHeights;

@end

@implementation CXCollectionViewLayout

#pragma mark - <懒加载>
- (NSMutableArray *)CXattrsArray{
    if (!_CXattrsArray) {
        _CXattrsArray = [NSMutableArray array];
    }
    return _CXattrsArray;
}

- (NSMutableArray *)CXcolumnHeights{
    if (!_CXcolumnHeights) {
        _CXcolumnHeights = [NSMutableArray array];
    }
    return _CXcolumnHeights;
}
#pragma mark - <准备布局>
//准备布局(布局前自动执行)
- (void) prepareLayout{
    //重写此方法一定要记得super
    [super prepareLayout];

    //在实际操作中我们的数据并不会固定不变的,因此我们每次布局前最好要清空之前存储的属性
    //清空存放所有列的高度
    //清空存放所有cell的不去属性
    [self.CXcolumnHeights removeAllObjects];
    [self.CXattrsArray removeAllObjects];
    //首先为第一行的cell附高度
    for (NSInteger i = 0; i < CXcolumnCount; i ++) {
        //数组里只能存放对象
        [self.CXcolumnHeights addObject:@(CXdefaultEdgeInsets.top)];
    }
    //下面开始创建每一个cell的布局属性 并且添加到存储cell布局属性的数组中
    //cell总个数 因为这里只要一个section
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i ++) {
        // 创建位置 即indexPath
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        //获取indexPath对应的cell布局属性
        UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        //把获取到的布局属性添加到数组中
        [self.CXattrsArray addObject:attributes];
    }
    //准备布局的工作到这里就结束了
}
//返回所有cell布局属性 及整体cell 的排布
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    return self.CXattrsArray;
}
//返回cell 的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    //创建布局属性
    UICollectionViewLayoutAttributes * CXattributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    //获取collectionView 的宽
    CGFloat collectionViewWidth = self.collectionView.frame.size.width;
    //下面的一部分是获取cell的frame(布局属性)
    CGFloat width;
    CGFloat height;
    CGFloat X;
    CGFloat Y;
    //获取width
    width = (collectionViewWidth - CXdefaultEdgeInsets.left - CXdefaultEdgeInsets.right - (CXcolumnCount - 1) * CXcolumnMagin) / CXcolumnCount;
    //获取height
    //在实际开发中heigh并不是真正的随机 而是根据数据来决定height 在这里展示初步的介绍其原理 因此采用大于100小于150的随机数
    height = 100 + arc4random_uniform(50);
    //获取X (瀑布流的实现重点就在cell的X,Y值获取)
    //设置一个列数的中间变量
    NSInteger tempColumn = 0;
    //设置高度小的中间变量 在这里我们把第0列的高度给他,这样可以减少循环次数,提高效率
    CGFloat minColumnHeight = [self.CXcolumnHeights[0] doubleValue];
    for (NSInteger i = 1; i < CXcolumnCount; i ++) {
        if (minColumnHeight > [self.CXcolumnHeights[i] doubleValue]) {
            minColumnHeight = [self.CXcolumnHeights[i] doubleValue];
            tempColumn = i;
        }
    }
    X = CXdefaultEdgeInsets.left + (width + CXcolumnMagin) * tempColumn;
    //获取Y
    Y = minColumnHeight;
    if (Y != CXdefaultEdgeInsets.top) {
        Y += CXrowMagin;
    }
    //设置cell的frame
    CXattributes.frame = CGRectMake(X, Y, width, height);
    //更新高度最矮的那列的高度
    self.CXcolumnHeights[tempColumn] = @(CGRectGetMaxY(CXattributes.frame));

    return CXattributes;
}
//返回collegeView的Content的大小
- (CGSize)collectionViewContentSize{
    //虽说返回的是大小,但是我们这里主要的是height
    CGFloat maxColumnHeight = [self.CXcolumnHeights[0] doubleValue];
    for (NSInteger i = 1; i < CXcolumnCount; i++) {

        CGFloat columnHeight = [self.CXcolumnHeights[i] doubleValue];

        if (maxColumnHeight < columnHeight) {
            maxColumnHeight = columnHeight;
        }
    }
    return CGSizeMake(0, maxColumnHeight + CXdefaultEdgeInsets.bottom);

}

@end

到此结束瀑布流的落到实处也就死亡了。

在这里表达几点值得注意的地点。

  • 瀑布流中的cell排布顺势是依赖当下列的万丈有关的(譬喻:假若当前第三列是最短的,不过按平日景况下cell应该排在第一列,那么那一年,新的cell会排在第三列,那是为着幸免某一列高度特别长或某一列的可观特别短)
  • 在实际应用中无独有偶cell的分寸是基于数量的来拍卖的
  • UIcollectionView的content的万丈是不分明的,由此大家要依据内容设定中度。
  • 当提到到刷新的时候大家要专注cell的布局属性是还是不是在新数据来临前清空了。

瀑布流UICollectionView兑现,tableview完毕瀑布流 IOS
瀑布流UICollectionView完毕在落实瀑布流以前先来探视瀑布流的雏形(此格局的雏形 UICol…

只要你是iOS开采者,只怕对本篇文章感兴趣,请关切作者,后续会更新越来越多相关小说!敬请期待!

起头化仅三行代码,只需安装代理和样式,item的深浅、头脚视图的深浅、行列数以及间距都足以在对应样式的代理方法中自定义,然后设置为UICollectionView的活动流水布局样式,并整合UICollectionView的用法使用,详细情形看示例

UICollectionView基础


  • UICollectionView与UITableView有多数形似的地点,如
    • 都经过数据源提供数据
    • 都通过代理试行有关的事件
    • 都足以自定义cell,且涉及到cell的任用
    • 都无冕自UIScrollView,具备滚动效应
  • UICollectionView的特性
    • 须要有三个UICollectionViewLayout类(平常是UICollectionViewFlowLayout类)或其子类对象,来支配cell的布局
    • 能够兑现UICollectionViewLayout的子类,来定制UICollectionView的轮转方向以及cell的布局
  • UICollectionViewLayout的子类UICollectionViewFlowLayout
    • UICollectionViewFlowLayout即流水布局
    • 流水布局UICollectionView的最常用的一种布局格局

兑现效果与利益

普京网址 2

Objective-C

普京网址 3栅格布局样式普京网址 4赞.gif

自定义布局


  • 自定义布局须求贯彻UICollectionViewLayout的子类
  • 自定义布局常用方法

    • 早先化布局

      - (void)prepareLayout
      {
          //通常在该方法中完成布局的初始化操作
      }
      
    • 当尺寸更动时,是或不是更新布局

      - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
      {
          //默认返回YES
      }
      
    • 布局UICollectionView的元素

      - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
      {
          //该方法需要返回rect区域中所有元素布局属性的数组
      }
      - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
      {
          //该方法返回indexPath位置的元素的布局属性
      }
      
    • 修改UICollectionView截止滚动是的偏移量

      - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
      {
          //返回值是,UICollectionView最终停留的点
      }
      

在写代码前先鲜明一下落到实处观念。

  • 亟待哪些???
    • 先是大家须求规定瀑布流的突显风格
    • 然后依据规定好的品格举办一体化设计
    • 终极经过细节的管理完善代码
      • 咱俩须求什么样的风格???
        • 作者们需求的是兑现将地点图片中的布局改造为不等高的机能
        • 说的俗一点便是像名字一模二样,像瀑布流水同样
      • 总体该如何统一盘算???
        • 完整应用与地点图片同样的宏图情势,每一个模块都是三个cell
        • 有限支撑最上边一行的cell的y值同样(雅观)
        • 有限支撑不不会冒出一列极度长,一列极其短的职能
      • 起始细节有怎么着???
        • 因为各种cell的height分裂,所以大家要思量放置的顺序应该是何等
        • 从简代码(那是各类门类必须注意的)

2.贯彻CustomeCollectionViewLayoutDelegate中的方法必要在UICollectionView的选择调节器中落到实处自定义布局中的代理方法来安装布局属性,大家那时候定了四个必须兑现的措施。
你可以透过这几个方法去设定cell的列数,Cell的外地距,Cell的一丝一毫中度,Cell的最大高度,如下所示:

  • 前言
    :近多少个月向来在忙公司的ChinaDaily项目,未有收取时间来写简书,今后算是算是告一段落了,收取时间来更一篇

  • 落到实处:首倘诺重写父类的多少个涉及布局属性的格局,在相应的布局属性方法中依照供给自定义视图布局属性新闻。详细的情况看示例

示例


  • 落到实处效果与利益

    普京网址 5

  • 完结思路

    • 通过UICollectionView实现
    • 自定义布局,即横向流水布局和圆形普通布局
    • 透过UICollectionView的代办方法,当点击cell时,将其除去
    • 经过监听UIView的触摸事件,当点解调控器的view时改换布局
  • 实现步骤

    • 自定横向流水布局

      • 开端化布局

        - (void)prepareLayout
        {
            [super prepareLayout];
            //设置滚动方向
            self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
            //设置内边距
            CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
            self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
        }
        
      • 点名当尺寸改变时,更新布局

        - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
        {
            return YES;
        }
        
      • 安装富有因素的布局属性

        - (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
        {
            //获取rect区域中所有元素的布局属性
            NSArray *array = [super layoutAttributesForElementsInRect:rect];
        
            //获取UICollectionView的中点,以contentView的左上角为原点
            CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
        
            //重置rect区域中所有元素的布局属性,即基于他们距离UICollectionView的中点的剧烈,改变其大小
            for (UICollectionViewLayoutAttributes *attribute in array)
            {
                //获取距离中点的距离
                CGFloat delta = ABS(attribute.center.x - centerX);
                //计算缩放比例
                CGFloat scale = 1 - delta / self.collectionView.bounds.size.width;
                //设置布局属性
                attribute.transform = CGAffineTransformMakeScale(scale, scale);
            }
        
            //返回所有元素的布局属性
            return [array copy];
        }
        
      • 设置UICollectionView甘休滚动是的偏移量,使其为与主题点

        - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
        {
            //计算最终显示的矩形框
            CGRect rect;
            rect.origin.x = proposedContentOffset.x;
            rect.origin.y = 0;
            rect.size = self.collectionView.frame.size;
        
            //获取最终显示在矩形框中的元素的布局属性
            NSArray *array = [super layoutAttributesForElementsInRect:rect];
        
            //获取UICollectionView的中点,以contentView的左上角为原点
            CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
        
            //获取所有元素到中点的最短距离
            CGFloat minDelta = MAXFLOAT;
            for (UICollectionViewLayoutAttributes *attribute in array)
            {
                CGFloat delta = attribute.center.x - centerX;
                if (ABS(minDelta) > ABS(delta))
                {
                    minDelta = delta;
                }
            }
        
            //改变UICollectionView的偏移量
            proposedContentOffset.x += minDelta;
            return proposedContentOffset;
        }
        
    • 自定义圆形普通布局

      • 概念成员属性,保存全部的布局属性

        @property (nonatomic, strong) NSMutableArray *attrsArray;
        
      • 懒加载,初始化attrsArray

        - (NSMutableArray *)attrsArray
        {
            if (_attrsArray == nil)
            {
                _attrsArray = [NSMutableArray array];
            }
            return _attrsArray;
        }
        
      • 初叶化布局

        - (void)prepareLayout
        {
            [super prepareLayout];
        
            //移除所有旧的布局属性
            [self.attrsArray removeAllObjects];
        
            //获取元素的个数
            NSInteger count = [self.collectionView numberOfItemsInSection:0];
            //布局所有的元素
            for (NSInteger i = 0; i<count; i++)
            {
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
                //设置并获取indexPath位置元素的布局属性
                UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
                //将indexPath位置元素的布局属性添加到所有布局属性数组中
                [self.attrsArray addObject:attrs];
            }
        }
        
      • 布局indexPath地点的要素

        - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
        {
            //获取元素的个数
            NSInteger count = [self.collectionView numberOfItemsInSection:0];
        
            /**设置圆心布局*/
            //设置圆形的半径
            CGFloat radius = 70;
            //圆心的位置
            CGFloat oX = self.collectionView.frame.size.width * 0.5;
            CGFloat oY = self.collectionView.frame.size.height * 0.5;
            //获取indexPath位置的元素的布局属性
            UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
            //设置尺寸
            attrs.size = CGSizeMake(50, 50);
            //设置位置
            if (count == 1)
            {
                attrs.center = CGPointMake(oX, oY);
            }
            else
            {
                CGFloat angle = (2 * M_PI / count) * indexPath.item;
                CGFloat centerX = oX + radius * sin(angle);
                CGFloat centerY = oY + radius * cos(angle);
                attrs.center = CGPointMake(centerX, centerY);
            }
            //返回indexPath位置元素的布局属性
            return attrs;
        }
        
      • 布局钦定区域内部存款和储蓄器有的因素

        - (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
        {
            //返回所有元素的布局属性
            return self.attrsArray;
        }
        
    • 通过xib自定义ce ll

      • 设置成员属性,保存cell内部的图片

        /**图片名字*/
        @property (nonatomic, copy) NSString *imageName;
        
      • 初始化cell

        - (void)awakeFromNib
        {
            //通过Layer设置边框
            self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
            self.imageView.layer.borderWidth = 6;
            self.imageView.layer.cornerRadius = 3;
        }
        
      • 设置cell内imageView的image属性

        - (void)setImageName:(NSString *)imageName
        {
            _imageName = [imageName copy];
            self.imageView.image = [UIImage imageNamed:imageName];
        }
        
    • 加载图片能源

      • 经过分子属性,保存全体的图片名

        /**所有的图片*/
        @property (nonatomic, strong) NSMutableArray *imageNames;
        
      • 懒加载,早先化图片名数组

        - (NSMutableArray *)imageNames
        {
            if (_imageNames == nil)
            {
                NSMutableArray *imageNames = [NSMutableArray array];
                for (NSInteger i = 0; i<20; i++)
                {
                    NSString *imageName = [NSString stringWithFormat:@"%zd", i + 1];
                    [imageNames addObject:imageName];
                }
                _imageNames = imageNames;
            }
            return _imageNames;
        }
        
    • 创建UICollectionView

      • 经过成员属性保存UICollectionView对象,以便更动布局

        @property (nonatomic, weak) UICollectionView *collectionView;
        
      • 始建并安装collectionView

        - (void)setupCollectionView
        {
            //设置frame
            CGFloat collectionViewW = self.view.bounds.size.width;
            CGFloat collectionViewH = 200;
            CGRect frame = CGRectMake(0, 150, collectionViewW, collectionViewH);
        
            //创建布局
            LYPCircleLayout *layout = [[LYPCircleLayout alloc] init];
        
            //创建collectionView
            UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
            self.collectionView = collectionView;
        
            //设置collectionView的数据源和代理
            collectionView.dataSource = self;
            collectionView.delegate = self;
        
            //添加collectionView到控制器的view中
            [self.view addSubview:collectionView];
        }
        
    • 达成UICollectionView的数据源方法

      • 注册cell

        /**设置重用表示*/
        static NSString *const ID = @"photo";
        - (void)viewDidLoad
        {
            [super viewDidLoad];
        
            [self setupCollectionView];
        
            //注册cell
            [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
        }
        
      • 安装成分的个数

        - (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
        {
            return self.imageNames.count;
        }
        
      • 设置各样成分的质量

        - (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
        {
            //根据重用标示从缓存池中取出cell,若缓存池中没有,则自动创建
            LYPPhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
            //设置cell的imageName属性
            cell.imageName = self.imageNames[indexPath.item];
        
            //返回cell
            return cell;
        }
        
    • 兑现UICollectionView的代办方法,达成点击有些元素将其除去功能

      - (void)collectionView:(nonnull UICollectionView *)collectionView didSelectItemAtIndexPath:(nonnull NSIndexPath *)indexPath
      {
          //将图片名从数组中移除
          [self.imageNames removeObjectAtIndex:indexPath.item];
          //删除collectionView中的indexPath位置的元素
          [self.collectionView deleteItemsAtIndexPaths:@[indexPath]];
      }
      
    • 监听调整器view的点击,更改布局

      - (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event
      {
          //判断当前布局的种类
          if ([self.collectionView.collectionViewLayout isKindOfClass:[LYPLineLayout class]])
          {
              //流水布局,切换至圆形布局
              [self.collectionView setCollectionViewLayout:[[LYPCircleLayout alloc] init] animated:YES];
          } else
          {
              //圆形布局,切换至流水布局
              LYPLineLayout *layout = [[LYPLineLayout alloc] init];
              //设置元素的尺寸,若不设置,将使用自动计算尺寸
              layout.itemSize = CGSizeMake(130, 130);
              [self.collectionView setCollectionViewLayout:layout animated:YES];  
          }
      }
      

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章