Uicollectionviewcell “left display”

Time:2021-2-13

1、 Preparation

1.UICollectionView Left Aligned Layout


2、 Project catalogue


3、 Custom uicollectionviewcell

Collectionviewcell. H creates the uilabel property to pass values

#import <UIKit/UIKit.h>
@interface CollectionViewCell : UICollectionViewCell
@property (nonatomic, strong) UILabel *titleLB;;
@end

Collectionviewcell. M creates a display text view

  • Here, the text size of titlelb should be the same as the calculated text size

#import "CollectionViewCell.h"
@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithRed:251/255.0 green:74/255.0 blue:71/255.0 alpha:1];
        self.layer.cornerRadius = 3;
        self.layer.masksToBounds = YES;
        self.layer.borderColor = [UIColor lightTextColor].CGColor;
        self.layer.borderWidth = 0.5;
        
        [self createSubViews];
    }
    return self;
}

- (void)createSubViews{
    _titleLB = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    //_titleLB.backgroundColor = [UIColor yellowColor];
    _titleLB.textColor = [UIColor whiteColor];
    _titleLB.textAlignment = NSTextAlignmentCenter;
    _titleLB.font = [UIFont systemFontOfSize:14];
    [self.contentView addSubview:_titleLB];
}
@end

4、 Creating uicollectionview in viewcontroller

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"
#import "UICollectionViewLeftAlignedLayout.h"
#import "CollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@end

@implementation ViewController{
    NSArray *_allTextArr;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor whiteColor];
    [self initailData];
    [self createMianView];
}

/**
 *Virtual data
 */
- (void)initailData{
    _ Alltextarr = @ [@ "19 roses gift box", @ "19 red roses gift box + lily", @ "33 red roses gift box", @ "33 red roses gift box (love for three generations)", @ "33 champagne roses gift box (birthday recommendation), @" 38 red roses heart to heart gift box (love at first sight) ", @" 19 red roses gift box (hot sale recommendation), @ "19 pink roses gift box (hot sale recommendation), @" 19 mixed color roses gift box "];
}

/**
 *Create view
 */
- (void)createMianView{
    //Left constraint
     UICollectionViewLeftAlignedLayout *leftAlignedLayout = [[UICollectionViewLeftAlignedLayout alloc] init];
    leftAlignedLayout.minimumLineSpacing  =10; // minimum row spacing
    leftAlignedLayout.minimumInteritemSpacing  =10; // minimum column spacing
    leftAlignedLayout.sectionInset  =Uiedgeinsetsmake (20, 20, 20, 20); // space between top left bottom right of grid
    
    //Grid
    UICollectionView *mainCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:leftAlignedLayout];
    mainCollectionView.backgroundColor = [UIColor whiteColor];
    mainCollectionView.dataSource = self;
    mainCollectionView.delegate = self;
    [self.view addSubview:mainCollectionView];
    [mainCollectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark -UICollectionViewDataSource
//Item content
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.titleLB.text = [NSString stringWithFormat:@"%@", [_allTextArr objectAtIndex:indexPath.row]];
    return cell;
}

//Number of items in section
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _allTextArr.count;
}

#pragma mark -UICollectionViewDelegate
//Click item to trigger method
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
}

#pragma mark -UICollectionViewDelegateFlowLayout
//Set the size of each item
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    NSString *textString = [_allTextArr objectAtIndex:indexPath.row];
    CGFloat cell_width = [self settingCollectionViewItemWidthBoundingWithText:textString];
    return CGSizeMake(cell_width, 30);
}

//Calculate text width
- (CGFloat)settingCollectionViewItemWidthBoundingWithText:(NSString *)text{
    //1. Set the content size, the height must be consistent with the item, and the width should be as large as possible
    CGSize size = CGSizeMake(MAXFLOAT, 20);
    //2. Set the calculation method
    //3. Set the font size property. The font size must be consistent with the font size set by label
    NSDictionary *attributeDic = @{NSFontAttributeName: [UIFont systemFontOfSize:14]};
    CGRect frame = [text boundingRectWithSize:size options: NSStringDrawingUsesLineFragmentOrigin attributes:attributeDic context:nil];
    //4. Add left and right spacing
    return frame.size.width + 15;
}

5、 Operation effect