美文网首页iOS
iOS - UICollectionView圆形布局及Photo

iOS - UICollectionView圆形布局及Photo

作者: 小_黑_屋 | 来源:发表于2016-11-20 01:15 被阅读0次

    人一切的痛苦,本质上都是对自己的无能的愤怒。


    上篇文章 http://www.jianshu.com/p/cbae7317e41e 已经对UICollectionView进行了最基本的介绍,本次就搭配Photos框架介绍一个比较常见的圆形布局,以展示UICollectionView是如何进行自定义布局的

    效果图

    目录

    UICollectionViewLayoutAttributes 基本介绍
    自定义UICollectionViewLayout
    Photos基本介绍及使用

    UICollectionViewLayoutAttributes 基本介绍

    • UICollectionViewLayoutAttributes 属性
    @property (nonatomic) CGRect frame  //边框
    @property (nonatomic) CGPoint center  //中心点
    @property (nonatomic) CGSize size  //大小
    @property (nonatomic) CATransform3D transform3D  //形状
    @property (nonatomic) CGFloat alpha  //透明度
    @property (nonatomic) NSInteger zIndex  //层级关系
    @property (nonatomic, getter=isHidden) BOOL hidden  //是否影藏
    

    UICollectionViewLayoutAttributes属性中包括了大小,中心,形状,透明度等一些属性,cell的位置已经属性就是通过他来设置的。

    每个cell对应一个UICollectionViewLayoutAttributes。


    自定义UICollectionViewLayout

    -(CGSize)collectionViewContentSize
    //返回collectionView的内容的尺寸
    -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
    /*返回rect中的所有的元素的布局属性
    返回的是包含UICollectionViewLayoutAttributes的NSArray
    UICollectionViewLayoutAttributes可以是cell,追加视图或装饰视图的信息,通过不同的UICollectionViewLayoutAttributes初始化方法可以得到不同类型的UICollectionViewLayoutAttributes:
    layoutAttributesForCellWithIndexPath:
    layoutAttributesForSupplementaryViewOfKind:withIndexPath:
    layoutAttributesForDecorationViewOfKind:withIndexPath:
    */
    -(UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath
    //返回对应于indexPath的位置的cell的布局属性
    -(UICollectionViewLayoutAttributes )layoutAttributesForSupplementaryViewOfKind:(NSString )kind atIndexPath:(NSIndexPath *)indexPath
    //返回对应于indexPath的位置的追加视图的布局属性,如果没有追加视图可不重载
    -(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString)decorationViewKind atIndexPath:(NSIndexPath )indexPath
    //返回对应于indexPath的位置的装饰视图的布局属性,如果没有装饰视图可不重载
    -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
    //当边界发生改变时,是否应该刷新布局。如果YES则在边界变化(一般是scroll到其他地方)时,将重新计算需要的布局信息。
    
    • 我们知道,UIControllerView是通过collectionViewLayout来实现布局的,因此我们要自定义布局就必须自定义一个layout继承自UICollectionViewLayout
        //CircleLayout 是继承自 UICollectionViewLayout 的
        CircleLayout * layout = [[CircleLayout alloc]init];
    
    • 我们在实例化这个layout之后,系统会进行一些准备工作,首先就会调用-(void)prepareLayout方法,这个方法在默认情况下是什么也没做的,但是我们在自定义的layout中会进行一些参数的设置。

    • 整体的调用顺序是 prepareLayout --> collectionViewContentSize --> layoutAttributesForElementsInRect

    • 需要更新布局时,调用 invalidateLayout 会立刻返回,并且预约在下一个 loop 时重新进行上面这个方法的顺序调用


    自定义的 layout (圆形布局)

    {
        NSMutableArray<UICollectionViewLayoutAttributes *> * _attributeAttay;
        int _itemCount; //item 个数
    }
    - (void)prepareLayout
    {
        [super prepareLayout];
        //获取item的个数
        _itemCount = (int)[self.collectionView numberOfItemsInSection:0];
        _attributeAttay = [[NSMutableArray alloc]init];
        //先设定大圆的半径 取长和宽最短的
        CGFloat radius = MIN(self.collectionView.frame.size.width, self.collectionView.frame.size.height)/2;
        //计算圆心位置
        CGPoint center = CGPointMake(self.collectionView.frame.size.width/2, self.collectionView.frame.size.height/2);
        //设置每个item的大小为50*50 则半径为25
        for (int i=0; i<_itemCount; i++) {
            UICollectionViewLayoutAttributes * attris = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
            //设置item大小
            attris.size = CGSizeMake(100, 100);
            //计算每个item的圆心位置
            //算出的x y值还要减去item自身的半径大小
            float x = center.x+cosf(2*M_PI/_itemCount*i)*(radius-50);
            float y = center.y+sinf(2*M_PI/_itemCount*i)*(radius-50);
            
            attris.center = CGPointMake(x, y);
            [_attributeAttay addObject:attris];
        }
    }
    //设置内容区域的大小
    -(CGSize)collectionViewContentSize{
        return self.collectionView.frame.size;
    }
    //返回设置数组
    -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
        return _attributeAttay;
    }
    

    Photos基本介绍及使用

    • 在 iOS8.0 之前使用的是 AssetsLibrary 框架,iOS8.0之后改为Photos框架了。
    • **本期只进行最基本的使用,就是获取相册中的照片,并展示。详细的,如保存照片到照片库,修改等下期进行详细的介绍 **
    • PHFetchResult 其实就是所有的照片,里面放的是 一个个 PHAsset ,而 PHAsset 其实就是一张照片的详细信息,包括拍摄时间啊,地点啊,相机啊等这些。当然还有照片本身

    通过懒加载来初始化 PHFetchResult

    - (PHFetchResult *)assets
    {
        if (_assets == nil) {
            _assets = [PHAsset fetchAssetsWithMediaType:PHAssetMediaTypeImage options:nil];
        }
        return _assets;
    }
    
    
        PHImageRequestOptions *option = [[PHImageRequestOptions alloc] init];
        //在速度与质量中选择
        option.resizeMode = PHImageRequestOptionsResizeModeFast;
        option.synchronous = NO;
        option.deliveryMode = PHImageRequestOptionsDeliveryModeHighQualityFormat;
        
        CGFloat scale = [UIScreen mainScreen].scale;
        CGSize screenSize = [UIScreen mainScreen].bounds.size;
        
        typeof(self)weakSelf = self;
            
        // 整个相册通过 PHImageManager 单例来管理
        // 这个方法就是用来获取照片的
        [[PHImageManager defaultManager] requestImageForAsset:weakSelf.assets[indexPath.row] targetSize:CGSizeMake(screenSize.width*scale, screenSize.height*scale) contentMode:PHImageContentModeAspectFit options:option resultHandler:^(UIImage * _Nullable result, NSDictionary * _Nullable info) {
            //结果 result 就包含照片的信息
            cell.imageView.image =  [UIImage imageWithData:UIImageJPEGRepresentation(result, 0.5)];
            cell.localIdentifier = weakSelf.assets[indexPath.row].localIdentifier;
            }];
    
    • 将获得的图片展示到cell上,就完成了照片的基本获取和展示了

    ** 注意:在iOS 10之后,要在plist文件中添加Privacy - Photo Library Usage Description 这个键才能访问相册,否则会崩溃!
    **


    以上就是对 UICollectionView 圆形布局的基本实现,以及Photos框架的基本使用,如果你在实现的过程中,有任何问题,欢迎在评论区留言,我会尽快回复。谢谢观看!

    相关文章

      网友评论

        本文标题:iOS - UICollectionView圆形布局及Photo

        本文链接:https://www.haomeiwen.com/subject/hubepttx.html