UICollectionView基础知识(基本使用三)
水平滚动列表
使用集合视图可以创建出水平滚动的列表, 如果要实现水平滚动, 就要考虑在流式布局之下, 区段内的条目会默认换行;
解决方式是利用每个 section 中只有一个 Item, 当水平滚动时每个Section 竖直方向将其中的 Item 摆放, 排列完成后水平方向开始下一 Section, 所以当有多个 Section, 每个 Section 仅有一个 Item时,会一行显示
#import "ViewController.h"
#import "ImageCollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@property (nonatomic, copy) NSArray *wordArray;
@property (nonatomic, strong) NSMutableDictionary *artDictionary;
@end
@implementation ViewController
- (NSMutableDictionary *)artDictionary
{
if (!_artDictionary) {
_artDictionary = [NSMutableDictionary dictionary];
}
return _artDictionary;
}
// 根据 indexPath 获得 String 数据
- (NSString *)itemAtIndexPath:(NSIndexPath *)indexPath
{
return [NSString stringWithFormat:@"%zd-%zd",indexPath.section, indexPath.item];
}
// 根据 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];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.sectionInset = UIEdgeInsetsMake(40, 10, 40, 10);
flowLayout.minimumLineSpacing = 10.f;
flowLayout.minimumInteritemSpacing = 10;
flowLayout.itemSize = CGSizeMake(100, 100);
[self.collectionView setCollectionViewLayout:flowLayout];
// 注册 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
// 有100组, 每组只显示1个元素
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 100;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 1;
}
- (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