UICollectionView之自定义Layout

最新推荐文章于 2022-04-26 10:36:51 发布
最新推荐文章于 2022-04-26 10:36:51 发布
阅读量130 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Jordandan/p/5048160.html
版权

#import <UIKit/UIKit.h>

 

@interface WQViewController : UIViewController

- (id)initWithFrame:(CGRect)frame;

@end

#import "WQViewController.h"

#import "WQCollectionViewController.h"

#import "WQCollectionViewCircleLayout.h"

 

@interface WQViewController ()

 

@end

 

@implementation WQViewController

 

- (id)initWithFrame:(CGRect)frame {

    if (self == [super init]) {

        self.view.frame = frame;

        self.view.backgroundColor = [UIColor yellowColor];

    }

    return self;

}

 

- (void)viewDidLoad {

    [super viewDidLoad];

    

    WQCollectionViewCircleLayout *circleLayout = [[WQCollectionViewCircleLayout alloc] init];

    WQCollectionViewController *collectionVC = [[WQCollectionViewController alloc] initWithCollectionViewLayout:circleLayout];

    [self addChildViewController:collectionVC];

    [self.view addSubview:collectionVC.collectionView];

}

 

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 

@end

~~~~~~~~~~~~~~~~~~~~~~~

#import <UIKit/UIKit.h>

 

@interface WQCollectionViewController : UICollectionViewController

 

@end

#import "WQCollectionViewController.h"

#import "WQCollectionViewCircleLayout.h"

#import "WQCollectionViewCell.h"

 

@interface WQCollectionViewController ()

 

@property (assign, nonatomic) NSInteger     cellCount;

 

@end

 

@implementation WQCollectionViewController

 

static NSString * const reuseIdentifier = @"Cell";

 

- (void)viewDidLoad {

    [super viewDidLoad];

    _cellCount = 8;

    

    self.collectionView.frame = [UIScreen mainScreen].bounds;

    self.collectionView.backgroundColor = [UIColor whiteColor];

    

    [self.collectionView registerClass:[WQCollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];

    

    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];

    [self.collectionView addGestureRecognizer:tapGesture];

}

#pragma mark - UITapGesture

 

- (void)handleTapGesture:(UITapGestureRecognizer *)sender {

    if (sender.state == UIGestureRecognizerStateEnded) {

        CGPoint initiailPinchPoint = [sender locationInView:self.collectionView];

        NSIndexPath *tapCellPath = [self.collectionView indexPathForItemAtPoint:initiailPinchPoint];

        if (tapCellPath != nil) {

            

            [self.collectionView performBatchUpdates:^{

                self.cellCount = self.cellCount - 1;

                [self.collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:tapCellPath]];

            } completion:^(BOOL finished) {

                [self.collectionView reloadData];

            }];

        } else {

            [self.collectionView performBatchUpdates:^{

                self.cellCount = self.cellCount + 1;

                [self.collectionView insertItemsAtIndexPaths:[NSArray arrayWithObject:[NSIndexPath indexPathForItem:(random()%self.cellCount) inSection:0]]];

            } completion:^(BOOL finished) {

                [self.collectionView reloadData];

            }];

        }

    }

}

 

 

#pragma mark <UICollectionViewDataSource>

 

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 1;

}

 

 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return _cellCount;

}

 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    WQCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

    [cell updateAppreanceAccrodingToItem:indexPath.item];

    cell.contentView.backgroundColor = [UIColor redColor];

    cell.contentView.layer.cornerRadius = 20;

    cell.contentView.layer.masksToBounds = YES;

    

//    UILabel *lbl = [[UILabel alloc] init];

//    lbl.center = cell.contentView.center;

//    lbl.text = [NSString stringWithFormat:@"%ld", indexPath.item];

//    [lbl sizeToFit];

//    [cell.contentView addSubview:lbl];

//    

    return cell;

}

 

#pragma mark <UICollectionViewDelegate>

 

/*

// Uncomment this method to specify if the specified item should be highlighted during tracking

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {

return YES;

}

*/

 

/*

// Uncomment this method to specify if the specified item should be selected

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    return YES;

}

*/

 

/*

// Uncomment these methods to specify if an action menu should be displayed for the specified item, and react to actions performed on the item

- (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath {

return NO;

}

 

- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender {

return NO;

}

 

- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender {

 

}

*/

 

@end

 

~~~~~~~~~~~~~~~~~~~~~~~~

#import <UIKit/UIKit.h>

 

@interface WQCollectionViewCell : UICollectionViewCell

 

- (void)updateAppreanceAccrodingToItem:(NSInteger)item;

 

@end

#import "WQCollectionViewCell.h"

 

@interface WQCollectionViewCell ()

 

@property(strong, nonatomic)UILabel               *lbl;

 

@end

 

@implementation WQCollectionViewCell

 

-(void)prepareForReuse {

    _lbl.text = nil;

}

 

- (void)updateAppreanceAccrodingToItem:(NSInteger)item {

    self.lbl.text = [NSString stringWithFormat:@"%ld", item];

    [self addSubview:self.lbl];

}

 

- (UILabel *)lbl {

    if (_lbl == nil) {

        _lbl = [[UILabel alloc] init];

        [_lbl setFont:[UIFont systemFontOfSize:12.0f]];

        _lbl.textAlignment = NSTextAlignmentCenter;

        _lbl.frame = CGRectMake(10, 10, 20, 20);

    }

    return _lbl;

}

 

@end

~~~~~~~~~~~~~~~~~~~~~自定义layout

#import <UIKit/UIKit.h>

 

@interface WQCollectionViewCircleLayout : UICollectionViewLayout

 

@end

#define ITEM_SIZE           40.0f

 

#import "WQCollectionViewCircleLayout.h"

 

@interface WQCollectionViewCircleLayout ()

 

@property(assign, nonatomic) NSInteger           cellCount;

@property(assign, nonatomic) CGPoint             center;

@property(assign, nonatomic) CGFloat             radius;

@property(strong, nonatomic) NSMutableArray      *indexPathToAnimation;

 

@end

 

@implementation WQCollectionViewCircleLayout

 

- (void)prepareLayout {

    [super prepareLayout];

    

    CGSize size = self.collectionView.frame.size;

    _cellCount = [self.collectionView numberOfItemsInSection:0];

    _center = CGPointMake(size.width/2.0f, size.height/2.0f);

//    _radius = MIN(size.width/2.5f, size.height/2.5f);

    _radius = 120;

}

 

- (CGSize)collectionViewContentSize {

    return self.collectionView.frame.size;

}

 

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

    NSMutableArray *attributes = [NSMutableArray array];

    for (int i = 0; i < _cellCount; i ++) {

        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];

    }

    return attributes;

}

 

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {

    CGRect oldBounds = self.collectionView.bounds;

    if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds) || CGRectGetHeight(newBounds) != CGRectGetWidth(oldBounds)) {

        return YES;

    }

    return NO;

}

 

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    layoutAttributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);

    layoutAttributes.center = CGPointMake(_center.x + _radius * cosf(2*indexPath.item*M_PI / _cellCount), _center.y + _radius * sinf(2*indexPath.item*M_PI / _cellCount));

    NSLog(@"%@", NSStringFromCGRect(layoutAttributes.frame));

    return layoutAttributes;

}

 

-(void)prepareForCollectionViewUpdates:(NSArray<UICollectionViewUpdateItem *> *)updateItems {

    [super prepareForCollectionViewUpdates:updateItems];

    

    NSMutableArray *attrsArray = [NSMutableArray array];

    for (UICollectionViewUpdateItem *updateItem in updateItems) {

        switch (updateItem.updateAction) {

            case UICollectionUpdateActionInsert:

            {

                NSIndexPath *itemIndex = updateItem.indexPathAfterUpdate;

                [attrsArray addObject:itemIndex];

            }

                break;

            case UICollectionUpdateActionDelete:

            {

                NSIndexPath *itemIndex = updateItem.indexPathBeforeUpdate;

                [attrsArray addObject:itemIndex];

            }

                break;

            case UICollectionUpdateActionMove:

            {

                NSIndexPath *itemIndexBeforeUpdate = updateItem.indexPathBeforeUpdate;

                NSIndexPath *itemIndexAfterUpdate = updateItem.indexPathAfterUpdate;

                [attrsArray addObject:itemIndexBeforeUpdate];

                [attrsArray addObject:itemIndexAfterUpdate];

            }

                break;

            case UICollectionUpdateActionReload:

                

                break;

            case UICollectionUpdateActionNone:

                

                break;

            default:

                break;

        }

    }

    _indexPathToAnimation = attrsArray;

}

 

-(UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {

    UICollectionViewLayoutAttributes *layoutAttr = [self layoutAttributesForItemAtIndexPath:itemIndexPath];

    if ([_indexPathToAnimation containsObject:itemIndexPath]) {

        layoutAttr.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.2, 0.2), M_PI);

        layoutAttr.center = CGPointMake(self.collectionView.center.x, self.collectionView.bounds.size.height);

//        layoutAttr.center = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMidY(self.collectionView.bounds));

        [self.indexPathToAnimation removeObject:itemIndexPath];

    }

    return layoutAttr;

}

 

@end

 

~~~~~~~~~~~~~实现效果：

转载于:https://www.cnblogs.com/Jordandan/p/5048160.html

aijian9025
关注
UICollectionView自定义layout
小丑鱼
07-14 234
在使用UICollectionView的过程中，可能会遇到这样的场景：在UICollectionView frame改变的过程中，对应的UICollectionViewCell也要做对应的改变，可能是跟随父view bounds改变而更改，也有可能是做一些天马行空的动画效果。
UICollectionView Layout自定义 Layout布局
九天揽月
06-24 1358
当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时，我们就可以考虑自定义layout。所以，了解并学习一下自定义Layout是很有必要。其实可以分三个步骤：覆写prepareLayout方法，并在里面事先就计算好必要的布局信息并存储起来。基于prepareLayout方法中的布局信息，使用collectionViewContentSize方法返回UICol...
自定义UICollectionViewLayout
Sheffi
08-18 857
UICollectionView 首先从collectionView说起，collectionView由三个部分构成： Cells Supplementary Views 追加视图 （类似Header或者Footer） Decoration Views 装饰视图 （用作背景展示） 一方面，collectionView和tableview一样，由提供数据的UICollectionViewDataSo
UICollectionView之自定义布局
枯木园
01-09 6665
如果有以下需求才使用自定义布局： 1.想要的布局不是栅格或者线性的，或者需要在不止一个方向滚动。 2.频繁需要更改cell的位置，更改流布局还不如自定义一个时。 自定义布局的难点在于计算布局中每个item的位置，如果有了位置，就很简单了。 继承UICollectionViewLayout      需要实现的核心任务： 1.指定滚动区域的尺寸 2.为布
UICollectionView自定义Layout教程
小小桐的专栏
02-25 2768
UICollectionView自定义Layout
iOS开发进阶 - 自定义UICollectionViewLayout实现瀑布流布局
W_C__L的博客
12-21 7361
最近项目中需要用到瀑布流的效果，但是用UICollectionViewFlowLayout又达不到效果，自己动手写了一个瀑布流的layout，下面是我的心路路程 先先上效果图与demo地址：因为是用UICollectionView来实现瀑布流的，决定继承UICollectionViewLayout来自定义一个layout来实现一个简单瀑布流的布局，下面是需要重写的方法： 重写这个属性得出UIColl
iOS UICollectionView 自定义section HeaderView
一了百-了的博客
11-20 1792
iOS UICollectionView 自定义section HeaderView 首先自定义一个view 继承于 UICollectionReusableView，在自定义headerview中创建自己需要的ui 如：label， button，因为UICollectionReusableView 创建的时候不走init所以，这里使用懒加载。 .h // // HeaderReusableView.h // TestBaseView // // Created by 金英杰 on 2020/11/
【iOS】UICollectionView自定义Layout之蜂窝布局
杜子兮@CSDN
09-02 5569
网上的UICollectionView的Layout布局，其cell的形状多为矩形和圆形。 本篇博文将正六边形作为cell的基本形状，为您展现独特的蜂窝布局效果及实现源码。 帮助您让自己的App脱颖而出，更加与众不同。
UICollectView自定义Layout布局
qq_14850691的博客
11-02 432
关于UICollectView自定义Layout布局，首先需要定义类继承UICollectionViewFlowLayout，需要重写的方法：//collectview第一次布局的时候调用 //collectView刷新（reload）的时候会再次调用 //子类必须要调用[super prepareLayout] - (void)prepareLayout; //根据指定rect，返回该rect区
UICollectionView:使用 UICollectionView 和 UICollectionViewFlow Layout 的一个简单的类似 pinterest 的布局
07-01
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let availableWidth = collectionView.frame....
自定义UICollectionViewFlowLayout和UICollectionViewLayout的两个例子.zip
09-24
自定义UICollectionViewFlowLayout和UICollectionViewLayout的两个例子.zip,自定义UICollectionViewFlowLayout和UICollectionViewLayout的两个例子，并提供开发教程供初学者学习
iOS开发高级分享 — 窥探UICollectionViewController(一)
Jul7day的博客
09-27 309
一. CollectionViewController简介 UICollectionViewController说白了就是一个UIViewController + UICollectionView = UICollectionViewController。 这一点和UITableViewController是一样一样的。 1.继承关系 由上图可知，UICollectionViewControll...
记一次实现自定义UICollectionViewLayout
liubo的博客
04-26 1231
自定义UICollectionViewLayout 流程 一 在 prepareLayout 创建布局属性 //创建layout类，继承于系统类 UICollectionViewFlowLayout @interface TPShareCollectionViewFlowLayout : UICollectionViewFlowLayout @end /// 重写 prepareLayout 方法，并在该方法里面创建布局属性 - (void)prepareLayout { [super prep
iOS UICollectionView自定义流水布局
lg767201403的博客
05-24 3155
UICollectionViewFlowLayout 1：直接设置FlowLayout对象 创建UICollectionViewLayout对象，通过设置UICollectionViewLayout对象属性的值可以设置item的基本布局，包括大小，间距，内边距等。 UICollectionViewFlowLayout *flowLayout = [[UICollectionView...
简单快捷自定义UICollectionViewLayout布局
weixin_42857581的博客
07-05 471
Demo下载：ZBSimpleCollectionViewLayout 我们继承UICollectionViewLayout可以实现很多自定义布局。 介绍 ZBSimpleCollectionViewLayout也继承UICollectionViewLayout实现了三种流式布局：普通流式布局 、一拖N布局、瀑布流布局，三种可以单独使用也可以混合使用。 typedef NS_ENUM(NSInteger, ZBCollectionViewLayoutType) { /// 普通流式布局 ZB
UICollectionView自定义Layout之蜂窝布局
飞翔的熊blabla
02-21 1393
网上的UICollectionView的Layout布局，其cell的形状多为矩形和圆形。 本篇博文将正六边形作为cell的基本形状，为您展现独特的蜂窝布局效果及实现源码。 帮助您让自己的App脱颖而出，更加与众不同。     实现效果图：   核心源代码：   自定义Layout   // // HoneyCombLayou
自定义视差 UICollectionViewLayout 教程
kmyhy的专栏
09-05 1784
原文：Custom UICollectionViewLayout Tutorial With Parallax 作者：Paride Broggi 译者：kmyhy 注意: 本教程使用 Xcode 9.0 和 Swift 4。 UICollectionView 从 iOS 6 开始出现，在 iOS 10 中得到了改进，它是 iOS app 中用于自定义并以动画方式呈现数据集合的
UICollectionView自定义布局
兰亭白菜
05-26 1179
这个和 UItableView 在用法上大体上差不多这里只说明一下 UICollectionView 的布局。demo 一. UICollectionViewFlowLayout布局方式：    这种布局方式是一种线性布局，他会先按照你设置的要求铺慢一行，当不满足指定条件的时候，会换行。   我们可以通过 UICollectionViewDelegateFlowLayout 代理
Swift -- UICollectionViewLayout自定义，满足你不同的布局需要
SoftwareDoger的博客
06-13 1774
项目中需要用到UICollectionView的地方非常多，这样我们常常要写满足不同布局需要的cell的布局方式，比如在一个BaseVC中，我们设置代理数据源什么的，然后在ViewDidLoad中开始写一堆的布局代码，这样显的VC中的代码很乱，我们也没有一个清晰的认识，我常会单独创建一个继承自UICollectionViewLayout的类FamilyFlowLayout，代码如下： import UIKit class FamilyFlowLayout: UICollectionViewLa...
UICollectionView Layout自定义 Layout布局
weixin_34191734的博客
12-26 176
from: http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时，我们就可以考虑自定义layout。 所以，了解并学习一下自定义Layout是很有必要。 其实可以分三个步骤： 覆写prepareLayout方法，并在里面事先就计算好必要的布局信息并存储起来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值