Custom flow layout (basic use of UICollectionViewFlowLayout) and flowlayout vertical layout

Custom flow layout (basic use of UICollectionViewFlowLayout) and flowlayout vertical layout

The final displayed

Ideas:

1. Basic settings of UICollection, and create a class inherited from UICollectionViewFlowLayout. (It cannot be UICollectionViewLayout, otherwise all must be customized)

2. Complete four steps in the UICollectionViewFlowLayout class.

-1) rewrite the prepareLayout method to perform the basic layout (the cell is in the middle of the Left). The layout cannot be in init, because setting the collectionView size is in viewDidLoad, while init is called before it, the size of the collectionView obtained is empty.

-2) overwrite shouldInvalidateLayoutForBoundsChange. When the display range of collectionView is changed, relay the internal layout (that is, roll the cell)

-3) rewriteLayoutAttributesForElementsInRectMethod to enlarge or reduce the cell size when sliding left and right

-4) rewrite the targetContentOffsetForProposedContentOffset method to move the cell closest to the center.

 

The Code is as follows:

In viewcontorroller:

1 # import "ViewController. h "2 # import" ZWLineLayout. h "3 @ interface ViewController () <UICollectionViewDataSource> 4 @ end 5 @ implementation ViewController 6 static NSString * ZWCellID = @" cell "; 7-(void) viewDidLoad {8 [super viewDidLoad]; 9 // If UICollectionViewLayout, itemSize and scrollDirection both need to be written by yourself, the following classes inherit from javaszwlinelayout * layout = [[ZWLineLayout alloc] init]; 11 layout. itemSize = CGSizeMake (160,160); 12 CGRect rect = CGRectMake (0,100, self. view. frame. size. width, self. view. frame. size. width * 0.6); 13 UICollectionView * collection = [[UICollectionView alloc] initWithFrame: rect collectionViewLayout: layout]; 14 collection. dataSource = self; 15 collection. backgroundColor = [UIColor greenColor]; 16 [self. view addSubview: collection]; 17 [collection registerClass: [UICollectionViewCell class] forCellWithReuseIdentifier: ZWCellID]; 18} 19 20 # pragma mark-Data Source Method 21-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section22 {23 return 10; 24} 25-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath26 {27 UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: ZWCellID forIndexPath: indexPath]; 28 cell. backgroundColor = [UIColor orangeColor]; 29 return cell; 30}

ZWLineLayout. m

1 # import "ZWLineLayout. h "2 3 @ implementation ZWLineLayout 4 5/** 6 * is used to initialize the layout (it is not recommended to initialize the layout in the init method) 7 */8-(void) prepareLayout 9 {10 [super prepareLayout]; 11 // horizontally scroll 12 self. scrollDirection = uicollectionviewscrolldirehorizontal; 13 14 // 15 CGFloat margin = (self. collectionView. frame. size. width-self. itemSize. width)/2; 16 self. collectionView. contentInset = UIEdgeInsetsMake (0, margin, 0, Margin); 17} 18 19/** 20 * When the display range of collectionView is changed, do you need to refresh layout 21 * once refresh layout, the following method will be re-called: 22*1. prepareLayout23 * 2. layoutAttributesForElementsInRect: Method 24 */25-(BOOL) shouldInvalidateLayoutForBoundsChange :( CGRect) newBounds26 {27 return YES; 28} 29 30 31/** 32 * the return value of this method is an array (the array contains the layout attributes of all elements in the rect range) 33 * the return value of this method determines the arrangement (frame) of all elements in the rect range) 34 */35 // you must use the ZWLineLayout class in viewController before you can override this method !! 36-(NSArray <UICollectionViewLayoutAttributes *> *) layoutAttributesForElementsInRect :( CGRect) rect37 {38 // layout the parent class with style 39 NSArray * arr = [super character: rect]; 40 // calculate the center position of collectionView 41 CGFloat ceterX = self. collectionView. contentOffset. x + self. collectionView. frame. size. width * 0.5; 42/** 43*1. A cell corresponds to a UICollectionViewLayoutAttributes object 44*2. the UICollectionViewLayoutAttributes object determines the distance between the cell's frame45 */46 for (uicollectionviewlayoutbutes * attributes in arr) {47 // The center of the cell and the center of the collectionView. Note that ABS () absolute value 48 CGFloat delta = ABS (attributes. center. x-ceterX); 49 // set the zoom ratio to 50 CGFloat scale = 1.1-delta/self. collectionView. frame. size. width; 51 // set the zoom ratio of 52 attributes during cell scrolling. transform = CGAffineTransformMakeScale (scale, scale); 53} 54 55 return arr; 56} 57 58/** 59 * return value of this method, the offset of 60 */61-(CGPoint) targetContentOffsetForProposedContentOffset :( CGPoint) proposedContentOffset withScrollingVelocity :( CGPoint) When collectionView stops rolling) velocity62 {63 // calculate the final displayed Rectangular Box 64 CGRect rect; 65 rect. origin. y = 0; 66 rect. origin. x = proposedContentOffset. x; 67 rect. size = self. collectionView. frame. size; 68 69 // obtain the attribute 70 NSArray * arr = [super layoutAttributesForElementsInRect: rect] for the layout that has been computed by super. 71 72 // calculate the x value of the Center of collectionView 73 CGFloat centerX = proposedContentOffset. x + self. collectionView. frame. size. width * 0.5; 74 75 CGFloat minDelta = MAXFLOAT; 76 for (uicollectionviewlayoutbutes * attrs in arr) {77 if (ABS (minDelta)> ABS (attrs. center. x-centerX) {78 minDelta = attrs. center. x-centerX; 79} 80} 81 proposedContentOffset. x + = minDelta; 82 return proposedContentOffset; 83} 84 @ end