环形布局的实现

dig467hr13 7年前
   <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>