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

自定义单元格

该例子将创建一些自定义的单元格, 以便实现出丰富多彩的界面, 这些单元格包含了 UIImageView. 系统会向集合视图的数据源方法查询"位于某个索引路径下的条目是何尺寸", 该方法会把图像的大小返回给系统

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)layout sizeForItemAtIndexPath: (NSIndexPath *)indexPath {
        UIImage *image = artDictionary[indexPath];
        retur image.size;
    }

为了创建自定义单元格, 我们从 UICollectionViewCell 中继承子类, 并把新的视图添加到单元格的 contentView 中

    #import <UIKit/UIKit.h>

    @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 ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@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

Simulator Screen Shot 2015年11月8日 15.28.42.png