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

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