iOS - UICollectionView圆形布局及Photos框架基本使用

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


上篇文章 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框架的基本使用,如果你在实现的过程中,有任何问题,欢迎在评论区留言,我会尽快回复。谢谢观看!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容