UICollectionView基础学习(基本使用二) UICollectionView基础学习(基本使用

UICollectionView基础学习(基本使用二) 自定义单元格

该例子将创建一些自定义的单元格, 以便实现出丰富多彩的界面, 这些单元格包含了 UIImageView. 系统会向集合视图的数据源方法查询"位于某个索引路径下的条目是何尺寸", 该方法会把图像的大小返回给系统- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)layout sizeForItemAtIndexPath: (NSIndexPath *)indexPath { UIImage *image = artDictionary[indexPath]; retur image.size; }

【UICollectionView基础学习(基本使用二)】为了创建自定义单元格, 我们从 UICollectionViewCell 中继承子类, 并把新的视图添加到单元格的 contentView 中

#import @interface ImageCollectionViewCell : UICollectionViewCell @property (nonatomic, strong) UIImage *image; @end#import "ImageCollectionViewCell.h" @interface ImageCollectionViewCell () @property (nonatomic, strong) UIImageView *imageView; @end@implementation ImageCollectionViewCell- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self configureImageView]; } return self; }- (void)awakeFromNib { [self configureImageView]; }- (void)configureImageView { self.backgroundColor = [UIColor whiteColor]; self.selectedBackgroundView = [[UIView alloc] initWithFrame:CGRectZero]; self.selectedBackgroundView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5f]; self.imageView = [[UIImageView alloc] initWithFrame:CGRectInset(self.bounds, 4.f, 4.f)]; self.imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.contentView addSubview:self.imageView]; }- (void)setImage:(UIImage *)image { _image = image; self.imageView.image = image; self.contentView.frame = (CGRect){.size = image.size}; }@end#import "ViewController.h" #import "ImageCollectionViewCell.h"@interface ViewController () @property (nonatomic, copy) NSArray *wordArray; @property (nonatomic, strong) NSMutableDictionary *artDictionary; @end@implementation ViewController- (NSArray *)wordArray { if (!_wordArray){ _wordArray = @[[@"lorem ipsum dolor sit amet consectetur adipiscing elit" componentsSeparatedByString:@" "], [@"cras varius ultricies elit" componentsSeparatedByString:@" "], [@"a tincidunt sem vehicula in" componentsSeparatedByString:@" "], [@"nullam pellentesque elit nec ligula ultrices vitae ultricies erat interdum" componentsSeparatedByString:@" "], [@"integer ut elit aliquam eros fermentum ornare vel vitae erat" componentsSeparatedByString:@" "], [@"pellentesque habitant morbi tristique senectus" componentsSeparatedByString:@" "], [@"enenatis tincidunt lorem sed suscipit" componentsSeparatedByString:@" "]]; } return _wordArray; }- (NSMutableDictionary *)artDictionary { if (!_artDictionary) { _artDictionary = [NSMutableDictionary dictionary]; } return _artDictionary; }// 根据 indexPath 获得 String 数据 - (NSString *)itemAtIndexPath:(NSIndexPath *)indexPath { NSArray *subArray = self.wordArray[indexPath.section]; return subArray[indexPath.row]; }// 根据 String 创建图片 - (UIImage *)imageForString:(NSString *)string { NSArray *fontFamilys = [UIFont familyNames]; NSString *fontName = fontFamilys[rand() % fontFamilys.count]; CGFloat fontSize = 12 + rand() % 20; UIFont *font = [UIFont fontWithName:fontName size:fontSize]; UIImage *image = [self stringImageTinted:string font:font inset:10.f]; return image; }- (void)viewDidLoad { [super viewDidLoad]; // 注册 Cell [self.collectionView registerClass:[ImageCollectionViewCell class] forCellWithReuseIdentifier:@"cell"]; // 注册 Header [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"]; // 注册 Footer [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"]; self.collectionView.backgroundColor = [UIColor lightGrayColor]; // 允许用户多选 self.collectionView.allowsMultipleSelection = YES; }#pragma mark - UICollectionViewDataSource - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return self.wordArray.count; ; }- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { NSArray *subArray = self.wordArray[section]; return subArray.count; }- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { UIImage *image = self.artDictionary[indexPath]; if (!image) { NSString *item = [self itemAtIndexPath:indexPath]; image = [self imageForString:item]; self.artDictionary[indexPath] = image; // 缓存图片 }return image.size; }- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { ImageCollectionViewCell *cell = (ImageCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; NSString *item = [self itemAtIndexPath:indexPath]; UIImage *image = self.artDictionary[indexPath]; if (!image) { image = [self imageForString:item]; self.artDictionary[indexPath] = image; } cell.image = image; return cell; }- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { if (kind == UICollectionElementKindSectionHeader) { UICollectionReusableView *header = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath]; header.backgroundColor = [UIColor blackColor]; return header; } else if (kind == UICollectionElementKindSectionFooter) { UICollectionReusableView *footer = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath]; footer.backgroundColor = [UIColor darkGrayColor]; return footer; } return nil; }#pragma mark - UICollectionViewDelegate - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"Selected item at indexPath: %@", indexPath); }- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"Deselect item at indexPath: %@",indexPath); }#pragma mark - Other // 根据文字, 字体, 内边距生成图片 - (UIImage *)stringImageTinted:(NSString *)string font:(UIFont *)font inset:(CGFloat)inset { CGSize baseSize = [string sizeWithAttributes:@{NSFontAttributeName: font}]; CGSize adjustSize = CGSizeMake(baseSize.width + inset * 2, baseSize.height + inset * 2); // 开启图像上下文 UIGraphicsBeginImageContextWithOptions(adjustSize, NO, 0); CGContextRef context = UIGraphicsGetCurrentContext(); // 绘制白色背景 CGRect bounds = (CGRect){.size = adjustSize}; // 设置绘图颜色 [[UIColor whiteColor] set]; CGContextAddRect(context, bounds); CGContextFillPath(context); // 绘制随机色, 覆盖白色背景 [[UIColor colorWithRed:((rand() % 255) / 255.0f) green:((rand() % 255) / 255.0f) blue:((rand() % 255) / 255.0f) alpha:0.5f] set]; CGContextAddRect(context, bounds); CGContextFillPath(context); // 绘制黑色线框 [[UIColor blackColor] set]; CGContextAddRect(context, bounds); CGContextSetLineWidth(context, inset); CGContextStrokePath(context); // 绘制文字 CGRect insetBounds = CGRectInset(bounds, inset, inset); // 段落格式 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping; // 断行模式 paragraphStyle.alignment = NSTextAlignmentCenter; // 居中显示 [string drawInRect:insetBounds withAttributes:@{ NSFontAttributeName: font, NSParagraphStyleAttributeName: paragraphStyle, NSForegroundColorAttributeName: [UIColor blackColor] }]; // 从图像上下文获得图片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // 关闭图像上下文 UIGraphicsEndImageContext(); return image; }@end