At the beginning

  • This is a sub-chapter. For the whole article, see the Learning Diary of Zero-based iOS development

UICollectionView

The actual use

  • The new version page in the app is mainly usedUICollectionViewTo implement, put in the controller chapter tidy
  • Display of a large number of images, such as emoji ICONS, nine-page charts

Basic usage

  • useUICollectionViewThere are a few things you have to set up
  1. Their ownframeCan be understood as a container
  2. UICollectionViewFlowLayoutLayout, set the size and layout of each group and each element inside
  3. UICollectionViewIs set through the data source method and implements the two necessary data source methods that return the number of elements in each group and the style of the element. The default number of groups returned is 1
  4. Due to the pursuit of optimization reasons in the SettingsUICollectionViewCellPay attention to reusable identifiers. Based on the identifiers, the system automatically searches the cache pool for cells of the corresponding style for reuse
- (void)viewDidLoad { [super viewDidLoad]; UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new]; UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(10, 10, 125, 300) collectionViewLayout:layout]; // Set the size of item layout.itemSize = CGSizeMake(50, 50); / / set the item about spacing layout. MinimumInteritemSpacing = 5; / / set up and down the item spacing layout. MinimumLineSpacing = 10; / / rolling direction layout. ScrollDirection = UICollectionViewScrollDirectionHorizontal; SectionInset = UIEdgeInsetsMake(0, 10, 0, 10); / / data source proxy collectionView. The dataSource = self; . / / whether to allow pages collectionView pagingEnabled = YES; Collectionview. bounces = NO; / / registered reusable cell [collectionView registerClass: [UICollectionViewCell class] forCellWithReuseIdentifier: @ "testCell"]. [self.view addSubview:collectionView]; }Copy the code
  • Returns number group
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
Copy the code
  • Returns the number of groups
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 6;
}

Copy the code
  • returncellThe element
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *) indexPath {/ / get the cell UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: @ "testCell." forIndexPath:indexPath]; cell.backgroundColor = [UIColor redColor]; return cell; }Copy the code

UICollectionViewFlowLayout

  • UICollectionViewFlowLayoutIn ios14, the default layout is symmetrical left and right, but in real development, you need to align left, so you need to customize the layout, which I used directly onlineUICollectionViewLeftAlignedLayoutDirectly replace the system
  • Link UICollectionViewLeftAlignedLayout

Layout priority

  • UICollectionViewFlowLayoutThere is a layout priority, that is, set a distance, another distance is invalid, the following is my test summary of the use of attention
  1. Left-right layout takes precedence over element spacing, i.ecollectionViewThe width is large enough, and the system can display two after calculationcell, will take precedence over the left and right layout, no matter how much space is set in the middle
  2. sectionInsetPrior to theminimumLineSpacingandminimumInteritemSpacing, that is, if the former is set, the system will set the margins first, and then set the relationship within the element

scrollDirection

  • UICollectionViewBy default, the scrolling direction is vertical, and the elements are sorted from left to right, top to bottom, and the distance between the elements is normal
  • However, if scrolling is set to horizontal, the elements are sorted from top to bottom and left to right, and the distance between the elements is swapped, i.eminimumInteritemSpacingDetermine the distance up and down,minimumLineSpacingDetermine the distance between left and right

Turn the page

  • UICollectionViewThe idea of turning pages andUIScrollViewTo split content into pages based on visible size

conclusion

  • In conclusion,UICollectionViewThe following points should be noted in the use of
  1. Don’t setcontentSize, and needs to be setUICollectionViewFlowLayout, sets the size and layout of the element
  2. The content is set up through the data source method
  3. In real development, you need to accurately calculate the size of the visible view and the size of the content view for better results
  4. In use, in most casescellIt’s a custom setting