UICollectionView基础学习(基本使用二)
自定义单元格
该例子将创建一些自定义的单元格, 以便实现出丰富多彩的界面, 这些单元格包含了 UIImageView. 系统会向集合视图的数据源方法查询"位于某个索引路径下的条目是何尺寸", 该方法会把图像的大小返回给系统
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)layout sizeForItemAtIndexPath: (NSIndexPath *)indexPath {
UIImage *image = artDictionary[indexPath];
retur image.size;
}
为了创建自定义单元格, 我们从 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
Simulator Screen Shot 2015年11月8日 15.28.42.png