环形布局的实现
dig467hr13
8年前
<h2>最终效果</h2> <ol> <li>图片依次呈圆形排布</li> <li>每张图片的中心点都在圆上</li> </ol> <ul> <li> <p style="text-align:center"><img src="https://simg.open-open.com/show/9c1e957ec4494add303b256eaa4e433e.png"></p> </li> </ul> <h2>实现原理</h2> <ul> <li>使用自定义布局, 这里创建自定义类CircleLayout继承自UICollectionViewLayout;</li> <li>实现-prepareLayout方法,设置每个cell的布局属性,并保存到可变数组中;</li> <li>实现-layoutAttributesForElementsInRect:方法, 从可变数组中返回每个cell的布局属性;</li> <li>创建collectionView的时候使用该布局即可以达到cell沿着圆依次排布的效果</li> </ul> <pre> <code class="language-objectivec">#import "CircleLayout.h" @interface CircleLayout () /**属性模型 */ @property (nonatomic, strong) NSMutableArray *attrArray; @end @implementation CircleLayout /** 数组懒加载 */ - (NSMutableArray *)attrArray { if (!_attrArray) { _attrArray = [NSMutableArray array]; } return _attrArray; } - (void)prepareLayout { [super prepareLayout]; // cell的个数 NSInteger itemCount = [self.collectionView numberOfItemsInSection:0]; // cell的大小 CGSize itemSize = CGSizeMake(80, 80); // 圆心的位置(以collectionView的左上角为原点) CGFloat circle_center_X = self.collectionView.frame.size.width * 0.5; CGFloat circle_center_Y = self.collectionView.frame.size.height * 0.5; // 圆心的半径 CGFloat radius = 150; // 总的item个数 / 360℃ CGFloat angle = 2 * M_PI / itemCount; for (int i = 0; i < itemCount; i++) { NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0]; // 为每个位置的cell创建布局属性 UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; // 设置cell的大小 attr.size = itemSize; // 设置cell的中心点 CGFloat centerX = circle_center_X + sin(angle * i) * radius; CGFloat centerY = circle_center_Y + cos(angle * i) * radius; attr.center = CGPointMake(centerX, centerY); // 添加到布局属性的数组里 [self.attrArray addObject:attr]; }; } /** 返回每个cell的布局属性 */ - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect { return self.attrArray; } @end</code></pre> <p> </p> <p>来自:http://www.jianshu.com/p/f5227ca3a16c</p> <p> </p>