美文网首页
UICollectionView: 一种圆形布局

UICollectionView: 一种圆形布局

作者: 伯wen | 来源:发表于2016-11-07 11:55 被阅读110次

效果图如下:

效果图.png

具体代码

  • 继承自UICollectionViewLayout

  • LTCircleLayout.h文件

#import <UIKit/UIKit.h>

@interface LTCircleLayout : UICollectionViewLayout
//item尺寸
@property (nonatomic, assign) CGSize itemSize;
//内边距
@property (nonatomic) UIEdgeInsets sectionInset;
@end
  • LTCircleLayout.m文件
#import "LTCircleLayout.h"

@interface LTCircleLayout ()
//属性数组
@property (nonatomic, strong) NSMutableArray *attrsArray;
@end

@implementation LTCircleLayout

- (NSMutableArray *)attrsArray
{
    if (!_attrsArray) {
        self.attrsArray = [[NSMutableArray alloc] init];
    }
    return _attrsArray;
}

/**
 初始化设置
 */
- (void)prepareLayout
{
    [super prepareLayout];
    NSInteger rows = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < rows; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

/**
 返回所有的cell的位置组成的数组, 在这里确定每一个cell的具体位置
 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attrsArray;
}

/**
 这个方法需要返回indexPath位置对应cell的布局属性
 collectionView切换layout布局时必须实现的方法
 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger rows = [self.collectionView numberOfItemsInSection:indexPath.section];
    //圆心x
    CGFloat oX = self.collectionView.frame.size.width * 0.5;
    //圆心y
    CGFloat oY = self.collectionView.frame.size.height * 0.5;
    
    CGFloat width = self.collectionView.frame.size.width;
    CGFloat hegiht = self.collectionView.frame.size.height;
    //宽度直径
    CGFloat widthDismeter = width - self.sectionInset.left - self.sectionInset.right;
    //高度直径
    CGFloat hegihtDismeter = hegiht - self.sectionInset.top - self.sectionInset.bottom;
    //圆的半径
    CGFloat raduis = (widthDismeter > hegihtDismeter ? hegihtDismeter : widthDismeter) * 0.5 - (self.itemSize.width > self.itemSize.height ? self.itemSize.height : self.itemSize.width) * 0.5;
    //计算cell的布局属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.size = self.itemSize;
    CGFloat angle = 2 * M_PI / rows * indexPath.item;
    CGFloat centerX = oX + raduis * sin(angle);
    CGFloat centerY = oY + raduis * cos(angle);
    attrs.center = CGPointMake(centerX, centerY);
    
    return attrs;
}

相关文章

网友评论

      本文标题:UICollectionView: 一种圆形布局

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