自定义单元格UICollectionViewCell
自定义布局UICollectionViewFlowLayout//流式布局
1. 创建
//多行多列的表格视图在创建的时候，必须指定单元格的布局
[[HARFirstCVC alloc]initWithCollectionViewLayout:[[HARMylayout alloc]init]];
- (instancetype)init
{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// cell的大小
layout.itemSize = CGSizeMake(305, 305);
return [self initWithCollectionViewLayout:layout];
}
2. 属性
//设置backgroundView属性
self.backgroundView=self.bgImageView;
//设置单元格大小
self.itemSize=CGSizeMake(80, 80);
//设置单元格间距
self.minimumInteritemSpacing=10;
//设置单元格行间距
self.minimumLineSpacing=10;
//设置区间隔 上左下右
self.sectionInset=UIEdgeInsetsMake(110, 30, 110, 30);
//设置滚动方向为水平滚动
self.scrollDirection=UICollectionViewScrollDirectionHorizontal;
//设置竖直方向的弹簧效果
self.collectionView.alwaysBounceVertical=YES;
3. 方法
// 往contentView中添加label
[self.contentView addSubview:label];
// 获得第一个区的行数
[self.collectionView numberOfItemsInSection:0]
// 通过cell获取坐标
[self.collectionView indexPathForCell:sender];
3.1 设置标头
//设置大小
flowLayout.headerReferenceSize=CGSizeMake(200, 20);
//注册
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
//写代理方法
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
UICollectionReusableView *reusableView=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
reusableView.backgroundColor=[UIColor blueColor];
return reusableView;
}
4. 代理方法
UICollectionViewDelegateFlowLayout
//四周边距
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
//行间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 10;
}
//列间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 10;
}
//每个Cell的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGFloat width = (self.view.bounds.size.width - 4*10)/3;
// 220 * 365 宽*高
CGFloat height = width * 365.0/220.0;
return CGSizeMake(width, height);
}
5.
UICollectionViewFlowLayout
6. 常用自定义布局
6.1 滚动到屏幕中点位置放大，原理则缩小
// 将父类原本生成的用于对各个项进行定位的attributes属性，按照我们指定的变化规则，修改attributes中与放大缩小有关的那个属性
// 返回一个矩形区域中的所有小秘书
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
//通过父类方法，得到小秘书数组
NSArray *array=[super layoutAttributesForElementsInRect:rect];
//获取可视化区域的fram
CGRect visibleRect=CGRectZero; visibleRect.origin=self.collectionView.contentOffset;
visibleRect.size=self.collectionView.bounds.size;
//获取可视化区域的横向中点
CGFloat visibleRectCenterX=CGRectGetMidX(visibleRect);
//遍历数组，得到小秘书
for (UICollectionViewLayoutAttributes *attributes in array) {
//得到小秘书中，中点的横向坐标
CGFloat itemCenterX=attributes.center.x;
//计算得到可见区域中点与该小秘书中点的横向差值
CGFloat distance=visibleRectCenterX-itemCenterX;
//如果横向距离小于200，进行变形
if (ABS(distance)<200) {
//变形值为1-1.5，距离200是，不变形，0时放大1.5倍
CGFloat zoomFactor=1+0.5*(1-ABS(distance)/200);
//设置小秘书的3D属性中宽高的变形比
attributes.transform3D=CATransform3DMakeScale(zoomFactor, zoomFactor, 1);
}
}
return array;
}
//当对象大小发生改变时，是否显示
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
6.2 瀑布流
//设置内容区域的大小
-(CGSize)collectionViewContentSize{
return CGSizeMake(self.collectionView.bounds.size.width, ([self.collectionView numberOfItemsInSection:0]/3+1)*200);
}
//根据item的indexPah返回具体的布局属性对象
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{}
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{}
6.3 弹簧特效
-(void)prepareLayout{
if (_animator==nil) {
_animator=[[UIDynamicAnimator alloc]initWithCollectionViewLayout:self];
//得到整个collectionView的尺寸
CGSize
contentSize=self.collectionViewContentSize;
//获得区域内的所有对象的attributes
NSArray *layoutAttributes=[super layoutAttributesForElementsInRect:CGRectMake(0, 0, contentSize.width, contentSize.height)];
//遍历，为所有的sttributes添加吸附特效
for (UICollectionViewLayoutAttributes *attributes in layoutAttributes) {
UIAttachmentBehavior *attach=[[UIAttachmentBehavior alloc]initWithItem:attributes attachedToAnchor:attributes.center];
attach.damping=0.6;
attach.frequency=0.8;
[self.animator addBehavior:attach];
}
}
}
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
//返回经过处理的attributes的数组
return [self.animator itemsInRect:rect];
}
//当边界发生变化时，不更新边界，针对用户的本次滚动距离，修改吸附效果的锚点位置，以此产生弹簧效果
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
//获得移动的距离
CGFloat distance=self.collectionView.bounds.origin.y-newBounds.origin.y;
//获得触点的坐标
CGPoint touchLocation=[self.collectionView.panGestureRecognizer locationInView:self.collectionView];
//遍历特效场所，获得特效
for (UIAttachmentBehavior *attach in self.animator.behaviors) {
//通过特效，获得特效绑定的那个对象，也就是attributes
UICollectionViewLayoutAttributes *attributes=[attach.items firstObject];
CGPoint center=attributes.center;//获得中心店坐标
CGPoint anchorPoint=attach.anchorPoint;//获得描点坐标
CGFloat distance2=fabsf(touchLocation.y-anchorPoint.y);//获得触点到描点的距离
center.y+=distance*distance2/500;
attributes.center=center;
[self.animator updateItemUsingCurrentState:attributes];
}
return NO;
}
网友评论