環形布局的實現

dig467hr13 7年前發布 | 7K 次閱讀 iOS開發 移動開發

最終效果

  1. 圖片依次呈圓形排布
  2. 每張圖片的中心點都在圓上

實現原理

  • 使用自定義布局, 這里創建自定義類CircleLayout繼承自UICollectionViewLayout;
  • 實現-prepareLayout方法,設置每個cell的布局屬性,并保存到可變數組中;
  • 實現-layoutAttributesForElementsInRect:方法, 從可變數組中返回每個cell的布局屬性;
  • 創建collectionView的時候使用該布局即可以達到cell沿著圓依次排布的效果
#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> 
     
     

    來自：http://www.jianshu.com/p/f5227ca3a16c
     

     
    •
 本文由用戶 dig467hr13 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！