美文网首页GXiOS
iOS-UICollectionViewCell的一种布局

iOS-UICollectionViewCell的一种布局

作者: zhf_Zachariah | 来源:发表于2016-07-06 23:31 被阅读877次

重写UICollectionView的FlowLayout布局

- (instancetype)init{
    if (self = [super init]) {
        self.itemSize = CGSizeMake(kScreenWidth / 2, kScreenHeight / 2 - 49 - 30);
        self.minimumLineSpacing = 2;
        self.minimumInteritemSpacing = 2;
        self.sectionInset = UIEdgeInsetsMake(2, 2, 2, 2);
    }
    return self;
}
/**
 *  collectionView的显示范围发生改变的时候,调用下面这个方法是否重新刷新
 *
 *  @param newBounds
 *
 *  @return 是否重新刷新
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
/**
 *  布局的初始化操作
 */
- (void)prepareLayout
{
    [super prepareLayout];
    // 设置为水平滚动
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置内边距
    CGFloat insetGap = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, insetGap, 0, insetGap);
}
/**
 *  设置cell的显示大小
 *
 *  @param rect 范围
 *
 *  @return 返回所有元素的布局
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 获取计算好的布局属性
    NSArray *arr = [[NSArray alloc]initWithArray:[super layoutAttributesForElementsInRect:rect] copyItems:YES];
    for (int i = 0; i < arr.count; i ++) {
        UICollectionViewLayoutAttributes *att = arr[i];
        //算比例
        //拿到每个item的位置  算出itemCenterX  和collectionCenterX 的一个距离
        CGFloat distance = ABS(att.center.x - self.collectionView.frame.size.width * 0.5 - self.collectionView.contentOffset.x);
        CGFloat scale = 0.5;
        CGFloat w = (self.collectionView.frame.size.width + self.itemSize.width) * 0.5;
        if (distance >= w) {
            scale = 0.5;
        }else{
            scale = scale +  (1- distance / w ) * 0.5;
        }
        att.transform = CGAffineTransformMakeScale(scale, scale);
    }
    return arr;
}
//滑动完成后,会来到此方法 - 线性滑动
//proposedContentOffset  最后停止的 contentOffset
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    //proposedContentOffset 滑动之后最后停的位置
    CGRect  rect;
    rect.origin = proposedContentOffset;
    rect.size = self.collectionView.frame.size;
    //获取停止时,显示的cell的frame
    //NSArray *tempArray  = [super  layoutAttributesForElementsInRect:rect];
    NSArray *tempArray = [[NSArray alloc]initWithArray:[super layoutAttributesForElementsInRect:rect] copyItems:YES];
    CGFloat  gap = 1000;
    CGFloat  a = 0;
    for (int i = 0; i < tempArray.count; i++) {
        //判断和中心的距离,得到最小的那个
        if (gap > ABS([tempArray[i] center].x - proposedContentOffset.x - self.collectionView.frame.size.width * 0.5)) {
            gap =  ABS([tempArray[i] center].x - proposedContentOffset.x - self.collectionView.frame.size.width * 0.5);
            a = [tempArray[i] center].x - proposedContentOffset.x - self.collectionView.frame.size.width * 0.5;
        }
    }
    CGPoint  point  =CGPointMake(proposedContentOffset.x + a , proposedContentOffset.y);
    return point;
}

动画效果.gif

相关文章

  • iOS-UICollectionViewCell的一种布局

    重写UICollectionView的FlowLayout布局

  • android第四课。

    今天学习了两种布局方式。一种是线性布局,另一种是相对布局。 线性布局: 相对布局: 相对布局 图标要选择对齐方式

  • 从0开始学习HTML5CSS3(三)

    弹性布局 弹性(伸缩)布局:是C3里新出的一种布局方式只是多一种布局的选择特点: 1.用了弹性布局后,可以让子元素...

  • Flutter 布局

    flutter布局 flutter部分分两种,一种是单个子控件的布局一种是多个子控件的布局 常用的单个子控件布局 ...

  • iOS一种动态栅格布局方案

    iOS一种动态栅格布局方案 iOS一种动态栅格布局方案

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Android XML布局与View之间的转换

    Android的布局方式有两种,一种是通过xml布局,一种是通过java代码布局,两种布局方式各有各的好处,当然也...

  • Flex布局

    Flex布局 一种新的布局方式-Flex布局块级布局侧重垂直方向,行内布局侧重水平方向,flex布局是与方向无关的...

  • 安卓基本布局

    一、几种基本布局 1、线性布局 LinearLayout又称为线性布局,是一种非常常用的布局。这个布局会将它所包含...

  • iOS的一种基于服务器下发的动态布局方案(一)

    栅格布局简介 栅格布局MyGridLayout是MyLayout布局体系里面的第八种布局。这是一种将布局约束设置和...

网友评论

    本文标题:iOS-UICollectionViewCell的一种布局

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