人一切的痛苦,本质上都是对自己的无能的愤怒。
效果图上篇文章 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框架的基本使用,如果你在实现的过程中,有任何问题,欢迎在评论区留言,我会尽快回复。谢谢观看!
网友评论