CircleLayout圆形布局

作者: 随梦而飞飞 | 来源:发表于2016-03-12 13:46 被阅读2844次
  • 我们先看一下 效果图


    效果图
  • 代码:

#import "CircleLayout.h"
@interface CircleLayout ()
@property(nonatomic,strong)NSMutableArray * attrsArr;
@end

@implementation CircleLayout
#pragma mark ---- 懒加载

-(NSMutableArray *)attrsArr
{
    if(!_attrsArr){
        _attrsArr=[[NSMutableArray alloc] init];
    }
    return _attrsArr;
}

-(void)prepareLayout
{
    [super prepareLayout];
    [self.attrsArr removeAllObjects];
    [self creatAttrs];
}
-(void)creatAttrs{
    //计算出每组有多少个
    NSInteger  count=[self.collectionView numberOfItemsInSection:0];
    /**
     * 因为不是继承流水布局 UICollectionViewFlowLayout
     * 所以我们需要自己创建 UICollectionViewLayoutAttributes
     */
    //如果是多组的话  需要2层循环
    for (int i=0; i<count; i++) {
        //创建UICollectionViewLayoutAttributes
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        //这里需要 告诉 UICollectionViewLayoutAttributes 是哪里的attrs
        UICollectionViewLayoutAttributes * attrs=[self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArr addObject:attrs];
    }
}

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //TODO:  特别注意 在这个方法里 可以边滑动边刷新(添加) attrs 一劳永逸 如果只需要添加一次的话  可以把这些 prepareLayout方法中去
    return self.attrsArr;
}

#pragma mark ---- 这个方法需要返回indexPath位置对应cell的布局属性
/**
 *  //TODO:  这个方法主要用于 切换布局的时候 如果不适用该方法 就不会切换布局的时候会报错
 *   reason: 'no UICollectionViewLayoutAttributes instance for -layoutAttributesForItemAtIndexPath: <NSIndexPath: 0xc000000000400016> {length = 2, path = 0 - 2}'
 */
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
   //TODO: 主要是返回每个indexPath的attrs

    //创建UICollectionViewLayoutAttributes
    //这里需要 告诉 UICollectionViewLayoutAttributes 是哪里的attrs
    //计算出每组有多少个
    NSInteger  count=[self.collectionView numberOfItemsInSection:0];
    //角度
    CGFloat angle = 2* M_PI /count *indexPath.item;
    //设置半径
    CGFloat radius=100;
    //CollectionView的圆心的位置
    CGFloat Ox = self.collectionView.frame.size.width/2;
    CGFloat Oy = self.collectionView.frame.size.height/2;
    UICollectionViewLayoutAttributes * attrs=[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.center =  CGPointMake(Ox+radius*sin(angle), Oy+radius*cos(angle));
    if (count==1) {
        attrs.size=CGSizeMake(200, 200);
    }else{
        attrs.size=CGSizeMake(50, 50);
    }
    return attrs;
}
@end
  • 删除Item
在ViewController中
#pragma mark ----  点击item的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [self.dataArr removeObjectAtIndex:indexPath.item];
    //TODO:  这个方法 特别注意 删除item的方法
    [self.myCollectionView deleteItemsAtIndexPaths:@[indexPath]];
}

参考Demo: GitHub地址
上一篇:LineLayout
下一篇:SquareLayout方形布局

相关文章

  • CircleLayout圆形布局

    我们先看一下 效果图效果图 代码: 删除Item 参考Demo: GitHub地址上一篇:LineLayout下一...

  • SquareLayout方形布局

    需要实现的效果图 代码 Demo:GitHub地址上一篇:CircleLayout圆形布局下一篇 :瀑布流布局

  • 环形布局CircleLayout

    环形布局,可拖动,独立item设置,可设置中心view更自然,更自由 效果图 用法 引入 方法 1.可以直接在布局...

  • iOS圆形布局

    前段时间产品提的需求要在APP里面添加一个球的悬浮按钮,点击之后可以展开,这种设计已经越来越少,本人虽不认可,但还...

  • UICollectionViewLayout——layout实现

    UICollectionViewLayout——layout实现圆形布局 UICollectionViewLayo...

  • iOS 半圆/半边摩天轮效果

    先上效果图 gif 以前的项目用过圆形布局,这次的项目是半圆,我想到的最简单的办法就是弄个圆形布局,然后坐标右移,...

  • 弧形布局(圆形布局),可滑动

    弧形布局 github:Demo ·支持滑动·支持反向·支持步进滑动·处理了屏幕旋转适配 简书上传图片总是失败,移...

  • ConstraintLayout

    约束布局 增强型线性布局Circular positioning(圆形定位)button2在button1正上方(...

  • CollectionView-简单的布局:圆形布局

    1.对于圆形布局的设置: 1.1 不同于流水布局,因为流水布局的界面 只有水平方向上的布置以及竖直方向上的布置两种...

  • [Android开源框架]RevealLayout使用说明

    RevealLayout 揭示效果布局,可以指定2个子布局,以圆形揭示效果切换选中状态 GitHub主页 Demo...

网友评论

本文标题:CircleLayout圆形布局

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