一个UICollectionView自定义layout的实现
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) NSMutableArray *letterArray; @end
#import "AppDelegate.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.letterArray = [NSMutableArray array]; for(int i=0; i<26; i++) { [self.letterArray addObject:[NSString stringWithFormat:@"%C",(unichar)(65+i)]]; } return YES; }
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @end
#import "ViewController.h" #import "AppDelegate.h" #import "CollectionViewDataSource.h" #import "DraggableCircleLayout.h" #import "LSCollectionViewHelper.h" @interface ViewController () { UICollectionView *collectionView; CollectionViewDataSource *cvDataSource; } @end @implementation ViewController - (IBAction)ChangeLayoutClickHandler:(id)sender { if([collectionView.collectionViewLayout isKindOfClass:[CircleLayout class]]) { UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; collectionView.collectionViewLayout = layout; } else { CircleLayout *layout = [[CircleLayout alloc] init]; collectionView.collectionViewLayout = layout; } } - (IBAction)BatchUploadClickHandler:(id)sender { //这里有个细节需要注意，最好是将删除操作放在添加操作前面，因为无论你顺序如何，始终都会先执行删除操作。 //如果代码顺序是先添加后删除，但实际执行顺序是先删除后添加，可能会因为索引不对影响代码逻辑。 [collectionView performBatchUpdates:^{ NSMutableArray *letterArray = [self getLetterArray]; //删除四个元素 NSIndexPath *path1 = [NSIndexPath indexPathForItem:0 inSection:0]; NSIndexPath *path2 = [NSIndexPath indexPathForItem:1 inSection:0]; NSIndexPath *path3 = [NSIndexPath indexPathForItem:2 inSection:0]; NSIndexPath *path4 = [NSIndexPath indexPathForItem:3 inSection:0]; NSIndexSet *indexSet = [NSIndexSet indexSetWithIndexesInRange:NSMakeRange(0,4)]; [indexSet enumerateIndexesUsingBlock:^(NSUInteger idx, BOOL *stop){ NSLog(@"%lu", (unsigned long)idx); }]; [letterArray removeObjectsAtIndexes:indexSet]; NSArray *array = [NSArray arrayWithObjects:path1, path2, path3, path4, nil]; [collectionView deleteItemsAtIndexPaths:array]; //添加一个元素 [letterArray addObject:@"1"]; [collectionView insertItemsAtIndexPaths:[NSArray arrayWithObject:[NSIndexPath indexPathForItem:letterArray.count-1 inSection:0]]]; } completion:nil]; } - (void)viewDidLoad { [super viewDidLoad]; // UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; // CircleLayout *layout = [[CircleLayout alloc] init]; DraggableCircleLayout *layout = [[DraggableCircleLayout alloc] init]; collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(10, 50, 300, 400) collectionViewLayout:layout]; collectionView.backgroundColor = [UIColor grayColor]; collectionView.draggable = YES; [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"LetterCell"]; [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:@"FirstSupplementary" withReuseIdentifier:@"ReuseID"]; [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:@"SecondSupplementary" withReuseIdentifier:@"ReuseID"]; cvDataSource = [CollectionViewDataSource alloc]; collectionView.dataSource = cvDataSource; collectionView.delegate = cvDataSource; [self.view addSubview:collectionView]; UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureHandler:)]; [collectionView addGestureRecognizer:tapRecognizer]; } - (void)tapGestureHandler:(UITapGestureRecognizer *)sender { CGPoint point = [sender locationInView:collectionView]; NSIndexPath *tappedCellPath = [collectionView indexPathForItemAtPoint:point]; NSMutableArray *letterArray = [self getLetterArray]; if(tappedCellPath) { //删除点击的cell [letterArray removeObjectAtIndex:tappedCellPath.item]; [collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:tappedCellPath]]; } else { //如果点击空白处，在末尾添加一个随机小写字母 unichar asciiX = (unichar)[self getRandomNumber:97 to:97+26]; [letterArray addObject:[NSString stringWithFormat:@"%C",asciiX]]; NSIndexPath *path = [NSIndexPath indexPathForItem:letterArray.count-1 inSection:0]; [collectionView insertItemsAtIndexPaths:[NSArray arrayWithObject:path]]; } } - (NSMutableArray *)getLetterArray { AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; return appDelegate.letterArray; } - (int)getRandomNumber:(int)from to:(int)to { return (int)(from + (arc4random() % (to-from))); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
#import <UIKit/UIKit.h> #import "UICollectionView+Draggable.h" @interface CollectionViewDataSource : NSObject<UICollectionViewDataSource_Draggable, UICollectionViewDelegate> @end
#import <Foundation/Foundation.h> #import "AppDelegate.h" #import "CollectionViewDataSource.h" @implementation CollectionViewDataSource - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return [self getLetterArray].count; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LetterCell" forIndexPath:indexPath]; //先移除可重用cell里面的子元素(否则会出现新旧交叠) [cell.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)]; cell.backgroundColor = [UIColor yellowColor]; UILabel *label = [[UILabel alloc] init]; label.text = [[self getLetterArray] objectAtIndex:indexPath.row]; label.font = [UIFont systemFontOfSize:12]; [label sizeToFit]; label.center = CGPointMake(cell.bounds.size.width/2, cell.bounds.size.height/2); [cell addSubview:label]; return cell; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"ReuseID" forIndexPath:indexPath]; view.backgroundColor = [UIColor greenColor]; UILabel *label = [[UILabel alloc] init]; label.text = kind; label.font = [UIFont systemFontOfSize:24]; [label sizeToFit]; label.center = CGPointMake(view.bounds.size.width/2, view.bounds.size.height/2); [view addSubview:label]; return view; } - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"你选择了"); // [self.myArray removeObjectAtIndex:indexPath.row]; // // [collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]]; } - (BOOL)collectionView:(LSCollectionViewHelper *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"canMoveItemAtIndexPath"); return YES; } - (void)collectionView:(LSCollectionViewHelper *)collectionView moveItemAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath { NSLog(@"moveItemAtIndexPath"); NSMutableArray *data = [self getLetterArray]; NSNumber *index = [data objectAtIndex:fromIndexPath.item]; [data removeObjectAtIndex:fromIndexPath.item]; [data insertObject:index atIndex:toIndexPath.item]; } - (NSMutableArray *)getLetterArray { AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; return appDelegate.letterArray; } @end
#import <UIKit/UIKit.h> @interface MyCollectionReusableView : UICollectionReusableView @end
#import "MyCollectionReusableView.h" @implementation MyCollectionReusableView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor orangeColor]; UILabel *label = [[UILabel alloc] init]; label.text = @"Decoration View"; label.font = [UIFont systemFontOfSize:18]; [label sizeToFit]; label.center = CGPointMake(frame.size.width/2, frame.size.height/2); [self addSubview:label]; } return self; } @end
#import <UIKit/UIKit.h> @interface CircleLayout : UICollectionViewLayout @end
#import "AppDelegate.h" #import "CircleLayout.h" #import "CollectionViewDataSource.h" #import "MyCollectionReusableView.h" @interface CircleLayout() { CGSize cvSize; CGPoint cvCenter; CGFloat radius; NSInteger cellCount; } @property (strong, nonatomic) NSMutableArray *indexPathsToAnimate; @end @implementation CircleLayout - (void)prepareLayout { [super prepareLayout]; [self registerClass:[MyCollectionReusableView class] forDecorationViewOfKind:@"MyDecoration"]; cvSize = self.collectionView.frame.size; cellCount = [self.collectionView numberOfItemsInSection:0]; cvCenter = CGPointMake(cvSize.width / 2.0, cvSize.height / 2.0); radius = MIN(cvSize.width, cvSize.height) / 2.5; } - (CGSize)collectionViewContentSize { return self.collectionView.bounds.size; } - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSMutableArray *array = [NSMutableArray array]; //add cells for (int i=0; i<cellCount; i++) { NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0]; UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath]; [array addObject:attributes]; } //add first supplementaryView NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0]; UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:@"FirstSupplementary" atIndexPath:indexPath]; [array addObject:attributes]; //add second supplementaryView attributes = [self layoutAttributesForSupplementaryViewOfKind:@"SecondSupplementary" atIndexPath:indexPath]; [array addObject:attributes]; //add decorationView attributes = [self layoutAttributesForDecorationViewOfKind:@"MyDecoration" atIndexPath:indexPath]; [array addObject:attributes]; return array; } - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; attributes.size = CGSizeMake(20, 20); attributes.center = CGPointMake(cvCenter.x + radius * cosf(2 * indexPath.item * M_PI / cellCount), cvCenter.y + radius * sinf(2 * indexPath.item * M_PI / cellCount)); return attributes; } - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath]; attributes.size = CGSizeMake(260, 40); if([elementKind isEqual:@"FirstSupplementary"]) { attributes.center = CGPointMake(cvSize.width/2, 40); } else { attributes.center = CGPointMake(cvSize.width/2, cvSize.height-40); } return attributes; } - (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:elementKind withIndexPath:indexPath]; attributes.size = CGSizeMake(140, 40); attributes.center = CGPointMake(cvSize.width/2, cvSize.height/2); return attributes; } //当边界更改时是否更新布局 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { CGRect oldBounds = self.collectionView.bounds; if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds)) { return YES; } return NO; } //通知布局，collection view里有元素即将改变，这里可以收集改变的元素indexPath和action类型。 -(void)prepareForCollectionViewUpdates:(NSArray *)updateItems { [super prepareForCollectionViewUpdates:updateItems]; NSMutableArray *indexPaths = [NSMutableArray array]; for(UICollectionViewUpdateItem *updateItem in updateItems) { //UICollectionUpdateActionInsert, //UICollectionUpdateActionDelete, //UICollectionUpdateActionReload, //UICollectionUpdateActionMove, //UICollectionUpdateActionNone NSLog(@"before index:%d,after index:%d,action:%d", updateItem.indexPathBeforeUpdate.row,updateItem.indexPathAfterUpdate.row,updateItem.updateAction); switch (updateItem.updateAction) { case UICollectionUpdateActionInsert: [indexPaths addObject:updateItem.indexPathAfterUpdate]; break; case UICollectionUpdateActionDelete: [indexPaths addObject:updateItem.indexPathBeforeUpdate]; break; case UICollectionUpdateActionMove: [indexPaths addObject:updateItem.indexPathBeforeUpdate]; [indexPaths addObject:updateItem.indexPathAfterUpdate]; break; default: NSLog(@"unhandled case: %@", updateItem); break; } } self.indexPathsToAnimate = indexPaths; } //当一个元素被插入collection view时，返回它的初始布局，这里可以加入一些动画效果。 - (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath { UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:itemIndexPath]; if([self.indexPathsToAnimate containsObject:itemIndexPath]) { attr.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(10,10),M_PI); attr.center = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMidY(self.collectionView.bounds)); [self.indexPathsToAnimate removeObject:itemIndexPath]; } return attr; } - (NSArray *)getLetterArray { AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; return appDelegate.letterArray; } @end
#import "CircleLayout.h" #import "UICollectionViewLayout_Warpable.h" @interface DraggableCircleLayout : CircleLayout <UICollectionViewLayout_Warpable> @property (readonly, nonatomic) LSCollectionViewLayoutHelper *layoutHelper; @end
#import "DraggableCircleLayout.h" #import "LSCollectionViewLayoutHelper.h" @interface DraggableCircleLayout() { LSCollectionViewLayoutHelper *_layoutHelper; } @end @implementation DraggableCircleLayout - (LSCollectionViewLayoutHelper *)layoutHelper { if(_layoutHelper == nil) { _layoutHelper = [[LSCollectionViewLayoutHelper alloc] initWithCollectionViewLayout:self]; } return _layoutHelper; } - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { return [self.layoutHelper modifiedLayoutAttributesForElements:[super layoutAttributesForElementsInRect:rect]]; } @end
