SquareLayout方形布局

作者: 随梦而飞飞 | 来源:发表于2016-03-12 14:16 被阅读2978次
  • 需要实现的效果图
效果图
  • 代码
#import "SquareLayout.h"

@interface SquareLayout ()
/** attrs的数组 */
@property(nonatomic,strong)NSMutableArray * attrsArr;
@end
@implementation SquareLayout

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

-(void)prepareLayout
{
    [super prepareLayout];
    [self.attrsArr removeAllObjects];
    NSInteger count =[self.collectionView   numberOfItemsInSection:0];
    for (int i=0; i<count; i++) {
        NSIndexPath *  indexPath =[NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes * attrs=[self layoutAttributesForItemAtIndexPath:indexPath];
       [self.attrsArr addObject:attrs];
    }
}

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attrsArr;
}

#pragma mark ---- 返回CollectionView的内容大小
/*!
 * 如果不设置这个的话  CollectionView就不能滑动
 */
-(CGSize)collectionViewContentSize
{
    int count =(int)[self.collectionView numberOfItemsInSection:0];
    int rows=(count +3 -1)/3;
    CGFloat rowH = self.collectionView.frame.size.width/2;
        if ((count)%6==2|(count)%6==4) {
            return CGSizeMake(0, rows * rowH-rowH/2);
        }else{
            return CGSizeMake(0, rows*rowH);
        }
}



-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
       CGFloat width =self.collectionView.frame.size.width*0.5;
        UICollectionViewLayoutAttributes * attrs=[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        CGFloat height =width;
        NSInteger i=indexPath.item;
            if (i==0) {
                attrs.frame = CGRectMake(0, 0, width, height);
            }else if (i==1){
                attrs.frame = CGRectMake(width, 0, width, height/2);
            }else if (i==2){
                attrs.frame = CGRectMake(width, height/2, width, height/2);
            }else if (i==3){
                attrs.frame = CGRectMake(0, height, width, height/2);
            }else if (i==4){
                attrs.frame = CGRectMake(0, height+height/2, width, height/2);
            }else if (i==5){
                attrs.frame = CGRectMake(width, height, width, height);
            }else{
               UICollectionViewLayoutAttributes *lastAttrs = self.attrsArr[i-6];
                CGRect frame  = lastAttrs.frame;
                frame.origin.y+=2 * height;
                attrs.frame=frame;
            }
   return attrs;
}

@end

Demo:GitHub地址
上一篇:CircleLayout圆形布局
下一篇 :瀑布流布局

相关文章

  • SquareLayout方形布局

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

  • CSS的小技巧

    等宽不等高布局(利用flex布局和object-fit这个属性) // 正方形布局

  • 卫生间就要这么弄!

    卫生间布局不可小视,布局搞不好,虽然能够正常使用,但是却会带来很多的不方便。 常见的卫生间是长方形或正方形。 长方...

  • 右上角角标

    主要是样式 重点级是1父布局正方形,高等于宽,2父相对布局,儿子绝对布局 首先父亲.imgroot{ width:...

  • Flutter - 布局:正方形

    今天我们将使用Flutter创建以下布局。我们为什么要那样做?答案很简单:“练习变得完美”。 但是我们怎么能这样做...

  • 珠海五种长方形的客厅装修设计

    随着珠海楼价不断攀升,很多业主难免购买到长方形的客厅,由于长方形的客厅不好布局,让业主们很是烦恼。那么长方形的客厅...

  • Android正方形的父布局(比例式的父布局)

    Android正方形的父布局(比例式的父布局) 在使用FrescoImageView加载图片时,往往需要根据...

  • 宽高相等的布局

    让高度等于宽度的正方形图片布局 public class MyLayout extends RelativeLay...

  • 绘制左上角小三角

    (1) 总结 父节点:设置为相对布局;超出部分隐藏 小三角(子节点):设置为绝对布局;位置为左上角;绘制长方形(长...

  • 页面布局定位技巧

    绝对定位 image.png 响应式正方形布局 给红色盒子设置padding-top/padding-bottom...

网友评论

  • 哒咛哒咛:你好 请问 每个区的cell 布局都不一样 -(CGSize)collectionViewContentSize 这一方法里面怎么区分是哪一个区?
  • 李炯7115:@随梦而飞飞,这个我在每次往上拉向下滚动时,然后再回来,那些高的(例如:第一个图片大的),都会变成小的,高度都会变为它原本的二分之一为什么呢

本文标题:SquareLayout方形布局

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