準(zhǔn)備:

1.UICollectionView Left Aligned Layout

• 一款UICollectionView居左顯示的約束
  點(diǎn)擊下載_UICollectionView Left Aligned Layout

UICollectionView Left Aligned Layout

工程目錄:

工程目錄

自定義UICollectionViewCell

CollectionViewCell.h 創(chuàng)建UILabel屬性,用來傳值

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

CollectionViewCell.m 創(chuàng)建顯示文本視圖

• 此處titleLB文字大小要和計(jì)算的文字大小相同

#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

在ViewController中創(chuàng)建UICollectionView

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];
}

/**
 *  虛擬數(shù)據(jù)
 */
- (void)initailData{
    _allTextArr = @[@"19朵玫瑰禮盒", @"19朵紅玫瑰禮盒+百合", @"33朵紅玫瑰禮盒", @"33朵紅玫瑰禮盒(三世情緣)", @"33朵香檳玫瑰禮盒(生日推薦)", @"38朵紅玫瑰心連心禮盒(一見傾心)", @"19朵紅玫瑰禮盒(熱賣推薦)", @"19朵粉玫瑰禮盒(熱賣推薦)", @"19朵混色玫瑰禮盒"];
}

/**
 *  創(chuàng)建視圖
 */
- (void)createMianView{
    //居左約束
     UICollectionViewLeftAlignedLayout *leftAlignedLayout = [[UICollectionViewLeftAlignedLayout alloc] init];
    leftAlignedLayout.minimumLineSpacing = 10;                          //最小行間距
    leftAlignedLayout.minimumInteritemSpacing = 10;                     //最小列間距
    leftAlignedLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);  //網(wǎng)格上左下右間距
    
    //網(wǎng)格
    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內(nèi)容
- (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;
}

//Section中item數(shù)量
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _allTextArr.count;
}

#pragma mark -UICollectionViewDelegate
//點(diǎn)擊item觸發(fā)方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
}

#pragma mark -UICollectionViewDelegateFlowLayout
//設(shè)置每個(gè)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);
}

//計(jì)算文字寬度
- (CGFloat)settingCollectionViewItemWidthBoundingWithText:(NSString *)text{
    //1,設(shè)置內(nèi)容大小  其中高度一定要與item一致,寬度度盡量設(shè)置大值
    CGSize size = CGSizeMake(MAXFLOAT, 20);
    //2,設(shè)置計(jì)算方式
    //3,設(shè)置字體大小屬性   字體大小必須要與label設(shè)置的字體大小一致
    NSDictionary *attributeDic = @{NSFontAttributeName: [UIFont systemFontOfSize:14]};
    CGRect frame = [text boundingRectWithSize:size options: NSStringDrawingUsesLineFragmentOrigin attributes:attributeDic context:nil];
    //4.添加左右間距
    return frame.size.width + 15;
}

運(yùn)行效果:

效果圖