A,ZJCollectionViewSummaryThe origin of the

The project has a high utilization rate of collectionView, so I spent two weeks in my free time to summarize collectionView, and named it ZJCollectionViewSummary and published it on Github. If IT is useful, I will give it a star.

two, ZJCollectionViewSummaryThe function of the

1, basic usage summary (relatively simple, just code implementation, look at the code)

  1. Add a headerView to the CollectionView
  2. Add/remove cells and sections to the CollectionView
  3. Multiple selection of cells in the CollectionView

2. Advanced usage (extracted frame)

  1. Realize picture rotation
  2. CollectionView adds the right index
  3. CollectionView Drag cells to reorder
  4. Common layouts include horizontal/vertical slide scaling, horizontal/vertical flow layout, ring layout, and grid layout. (The latter two things are commonly taken online).

3. Schematic diagram, introduction and related usage of each function

3.1. Basic usage: both are UI level or data refresh interface

3.1.1 add headerView to CollectionView

Set up the

layout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 120);
Copy the code

This is done by simply adding the headerView to the collectionView. That is:

 [_collectionView addSubview:self.headerView];
Copy the code

You can also implement proxy groups in the form of implementation to add headerView. If only a group of this is better to make the code simple, easy to view.

3.1.2 Adding/deleting cells and Sections to CollectionView

Both operate on the array refresh interface. It’s nothing.

3.1.3 Multiple selection of cells in CollectionView

Create two arrays, one for the data source _listArray and one for the selected data selectedArray. The page is refreshed only when you select all or incomplete. The current cell is refreshed only when you select All.

Core code:

ZJMultiSelectCollectionViewCell *cell = (ZJMultiSelectCollectionViewCell *)[_collectionView cellForItemAtIndexPath:indexPath];
NSDictionary *dict = _listArray[indexPath.row];
if ([self.selectedArray containsObject:dict]) {
    [self.selectedArray removeObject:dict];
    cell.markV.image = [UIImage imageNamed:@"unselected_icon"];
}else{
    [self.selectedArray addObject:dict];
    cell.markV.image = [UIImage imageNamed:@"select_Icon"];
}

if(self.selectedArray.count < self.listArray.count) { self.isSelectAll = NO; // Whether to select all. [self.selectButtonsetImage:[UIImage imageNamed:@"unselected_icon"] forState:UIControlStateNormal];
}
Copy the code

3.2. Advanced usage

3.2.1. Realize image rotation

ZJCycleView can display local images, can also be network images, local images and network images mixed reality. The style is shown. Related properties and methods.

@class ZJCycleView; @protocol ZJCycleViewDelegate <NSObject> @optional /** click image callback */ - (void)cycleView:(ZJCycleView *)cycleView didSelectItemAtIndex:(NSInteger)index; @end @interface ZJCycleView : UIView @property (nonatomic, weak) id <ZJCycleViewDelegate> delegate; / / @property (nonatomic, strong) NSArray<NSString *> *images; / / @property (nonatomic, strong) NSArray<NSString *> *urlA; /** Each image corresponds to an array of text to be displayed */ @property (nonatomic, strong) NSArray *titles; /** picture and title dictionary (dictionary structure: @{@"imageUrl": @""The @"title": @""}) */ @property (nonatomic, strong) NSArray<NSDictionary *> *arrayD; @property (nonatomic, assign) ZJCycleViewType cycleViewType; /** Automatic rotation interval, default 2s */ @property (nonatomic, assign) CGFloat autoCycleTimeInterval; /** Whether to display paging controls */ @property (nonatomic, assign) BOOL showPageControl; Paging controls the position of * * * / / @ property (nonatomic, assign) ZJCyclePageContolLocation pageControlLocation; / / @property (nonatomic, assign) ZJCyclePageContolStyle pageContolStyle; @param imageUrls @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImagereturnZJCycleView object */ - (instancetype)initWithFrame:(CGRect)frame imageUrls:(NSArray <NSString *> *)imageUrls placeholderImage:(UIImage*)placeholderImage; /** Paged controls are not displayed, but the total number and current page are displayed: 2/20 @param frame position size @param imageUrls An array of images to load, which can be local, Metagimage is an overlay image when an overlay is presented. @param titles Each image is a placeholderreturnZJCycleView object */ - (instancetype)initWithFrame:(CGRect)frame imageUrls:(NSArray <NSString *> *)imageUrls titles:(NSArray  <NSString *> *)titles placeholderImage:(UIImage*)placeholderImage; /** arrayDict is an array of dictionaries: (the dictionary structure is @{@"imageUrl": @""The @"title": @""}} imageUrl can be local@metagImage @metagImage @metagImage @metagImagereturnZJCycleView object */ - (instancetype)initWithFrame:(CGRect)frame arrayDict:(NSArray <NSDictionary *> *)arrayDict placeholderImage:(UIImage*)placeholderImage; @param imageUrls @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImage @param metagImagereturnZJCycleView object */ + (instancetype)cycleViewWithFrame:(CGRect)frame imageUrls:(NSArray <NSString *> *)imageUrls placeholderImage:(UIImage *)placeholderImage; /** Paged controls are not displayed, but the total number and current page are displayed: 2/20 @param frame position size @param imageUrls An array of images to load, which can be local, Metagimage is an overlay image when an overlay is presented. @param titles Each image is a placeholderreturnZJCycleView object */ + (instancetype)cycleViewWithFrame:(CGRect)frame imageUrls:(NSArray <NSString *> *)imageUrls titles:(NSArray <NSString *> *)titles placeholderImage:(UIImage*)placeholderImage; /** arrayDict is an array of dictionaries: (the dictionary structure is @{@"imageUrl": @""The @"title": @""}} imageUrl can be local@metagImage @metagImage @metagImage @metagImagereturnZJCycleView object */ + (instancetype)cycleViewWithFrame:(CGRect)frame arrayDict:(NSArray <NSDictionary *> *)arrayDict placeholderImage:(UIImage*)placeholderImage; / * * is elected the ZJCyclePageContolStyle ZJCyclePageContolStyleImage, called when image types, If not called use the default image @param currentImage select the image @param pageImage the default image */ - (void)currentImage:(UIImage *)currentImage pageImage:(UIImage *)pageImage; / * * elected ZJCyclePageContolStyle not ZJCyclePageContolStyleImage, if don't use the default color, @param pageColor default color */ -(void)currentColor:(UIColor *)currentColor pageColor:(UIColor *)pageColor;Copy the code

3.2.2 Add right index to CollectionView

Core code:

- (ZJCollectionViewRightIndex *)collectionViewIndex
{
    if (_collectionViewIndex == nil) {
        _collectionViewIndex = [[ZJCollectionViewRightIndex alloc] initWithFrame:CGRectMake(SCREEN_WIDTH - 20, 0, 20, SCREEN_HEIGHT)];
        _collectionViewIndex.titleIndexes = self.listArray;
        _collectionViewIndex.color = [UIColor blackColor];
        _collectionViewIndex.isSelectVisible = YES;
        CGRect rect = _collectionViewIndex.frame;
        rect.size.height = _collectionViewIndex.titleIndexes.count * 16;
        rect.origin.y = (SCREEN_HEIGHT - rect.size.height) / 2 + 64;
        _collectionViewIndex.frame = rect;
        _collectionViewIndex.collectionDelegate = self;
    }
    return _collectionViewIndex;
}

#pragma mark- ZJCollectionViewRightIndexDelegate
-(void)collectionViewIndex:(ZJCollectionViewRightIndex *)collectionViewIndex didselectionAtIndex:(NSInteger)index withTitle:(NSString *)title{
    
    if ([_collectionView numberOfSections]>index&&index>-1) {
        
        UICollectionViewLayoutAttributes *attributes = [_collectionView layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:index]];
        CGRect rect = attributes.frame;
        [_collectionView setContentOffset:CGPointMake(_collectionView.frame.origin.x, rect.origin.y - 40) animated:YES]; }}Copy the code

3.2.3 CollectionView Drag cells to reorder

ZJReorderFlowLayout *layout = [[ZJReorderFlowLayout alloc] init]; CGFloat cellWidth = (screen_width-20) / 3.0; layout.itemSize = CGSizeMake(cellWidth, 145); _collectionView = [[UICollectionView alloc] initWithFrame:size collectionViewLayout:layout];#pragma mark - ZJReorderCollectionViewDataSource methods
- (void)collectionView:(UICollectionView *)collectionView itemAtIndexPath:(NSIndexPath *)fromIndexPath willMoveToIndexPath:(NSIndexPath *)toIndexPath {
    NSDictionary *dict = self.listArray[fromIndexPath.item];
    
    [self.listArray removeObjectAtIndex:fromIndexPath.item];
    [self.listArray insertObject:dict atIndex:toIndexPath.item];
}

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

- (BOOL)collectionView:(UICollectionView *)collectionView itemAtIndexPath:(NSIndexPath *)fromIndexPath canMoveToIndexPath:(NSIndexPath *)toIndexPath
{
    return YES;
}

#pragma mark - ZJReorderCollectionViewDelegateFlowLayout methods
- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout willBeginDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Will start dragging");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout didBeginDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Start dragging done");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout willEndDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Drag done");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout didEndDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Drag done");
}
Copy the code

3.2.4 Several common layouts, including horizontal/vertical east China reduction, horizontal/vertical flow layout,

A, horizontal/vertical east China shrinking

if (self.layout.lineDirection == ZJWaterHorizontal)
{
    self.layout.lineDirection = ZJWaterVertical;
    [self.collectionView setCollectionViewLayout:self.layout animated:YES];
} else {
    self.layout.lineDirection = ZJWaterHorizontal;
    [self.collectionView setCollectionViewLayout:self.layout animated:YES];
}
[self.collectionView reloadData];
Copy the code

B. Horizontal/vertical flow layout

Typedef NS_ENUM(NSInteger, ZJWaterDirection) {ZJWaterVertical,// ZJWaterHorizontal}; @protocol ZJWaterLayoutDelegate <NSObject> @required /** Width/height conversion: ZJWaterVertical calculates the height according to the width, ZJWaterHorizontal calculates width based on height */ - (CGFloat)waterFlowLayout:(ZJWaterLayout *)layout hieghtForItemAtIndex:(NSUInteger)index itemwidth:(CGFloat)itemwidth; @ optional/column number * * * / - (NSInteger) waterFlowLayoutColumnCount (ZJWaterLayout *) layout; / * * * / column spacing - (CGFloat) waterFlowLayoutColumnSpacing (ZJWaterLayout *) layout; / * * * / - line spacing (CGFloat) waterFlowLayoutRowSpacing (ZJWaterLayout *) layout; Margin / * * * / - (UIEdgeInsets) waterFlowLayoutEdgeInsets (ZJWaterLayout *) layout; @end @interface ZJWaterLayout : UICollectionViewLayout /** proxy */ @property (nonatomic,weak) id <ZJWaterLayoutDelegate> delegate; / / @property (nonatomic, assign) ZJWaterDirection waterDirection; @endCopy the code