设为首页 加入收藏

TOP

UICollectionView自定义Layout之蜂窝布局(一)
2015-07-20 17:46:09 来源: 作者: 【 】 浏览:3
Tags:UICollectionView 定义 Layout 蜂窝 布局

网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形。

本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源码

帮助您让自己的App脱颖而出,更加与众不同。

?

?

实现效果图:

\

?

核心源代码:

?

自定义Layout

?

//
//  HoneyCombLayout.h
//  Demo-Layouts
//
//  Created by 杜子兮(duzixi) on 14-9-1.
//  Copyright (c) 2014年 lanou3g.com All rights reserved.
//

#import 
  
   

@interface HoneyCombLayout : UICollectionViewLayout

@property (nonatomic, assign) NSInteger margin;
@property (nonatomic, assign) NSInteger oX;
@property (nonatomic, assign) NSInteger oY;

@end

  

//
//  HoneyCombLayout.m
//  Demo-Layouts
//
//  Created by 杜子兮(duzixi) on 14-9-1.
//  Copyright (c) 2014年 lanou3g.com All rights reserved.
//

#import HoneyCombLayout.h

@implementation HoneyCombLayout

///  返回内容大小,用于判断是否需要加快滑动

-(CGSize)collectionViewContentSize
{
    float height = (SIZE + self.margin) * ([self.collectionView numberOfItemsInSection:0] / 4 + 1);
    return CGSizeMake(320, height);
}


///  返回YES,改变布局
/*
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
*/
#pragma mark - UICollectionViewLayout
///  为每一个Item生成布局特性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    UICollectionView *collection = self.collectionView;

    float x = (SIZE + self.margin) * (indexPath.item % COL + 1) * 0.75;
    float y = (SIZE + self.margin) * (indexPath.item / COL + 0.5) * cos(M_PI * 30.0f / 180.0f);
    if (indexPath.item % 2 == 1) {
        y += (SIZE + self.margin) * 0.5 * cosf(M_PI * 30.0f / 180.0f);
    }
    
    x += self.oX;
    y += self.oY;
    
    attributes.center = CGPointMake(x + collection.contentOffset.x, y + collection.contentOffset.y);
    attributes.size = CGSizeMake(SIZE, SIZE * cos(M_PI * 30.0f / 180.0f));
    
    return attributes;
}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *arr = [super layoutAttributesForElementsInRect:rect];
    if ([arr count] > 0) {
        return arr;
    }
    NSMutableArray *attributes = [NSMutableArray array];
    for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    return attributes;
}



@end

自定义cell:

?

?

//
//  HoneycombViewCell.h
//  Demo-Layouts
//
//  Created by 杜子兮(duzixi) on 14-9-1.
//  Copyright (c) 2014年 lanou3g.com All rights reserved.
//

#import 
  
   

@interface HoneycombViewCell : UICollectionViewCell

@property (nonatomic,strong) UILabel *titleLabel;

@end

  

//
//  HoneycombViewCell.m
//  Demo-Layouts
//
//  Created by 杜子兮(duzixi) on 14-9-1.
//  Copyright (c) 2014年 lanou3g.com All rights reserved.
//

#import HoneycombViewCell.h

@implementation HoneycombViewCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.titleLabel = [[UILabel alloc] init];
        self.titleLabel.textColor = [UIColor whiteColor];
        [self.contentView addSubview:self.titleLabel];
    }
    return self;
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    // step 1: 生成六边形路径
    CGFloat longSide = SIZE * 0.5 * cosf(M_PI * 30 / 180);
    CGFloat shortSide = SIZE * 0.5 * sin(M_PI * 30 / 180);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, longSide)];
    [path addLineToPoint:CGPointMake(shortSide, 0)];
    [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, 0)];
    [path addLineToPoint:CGPointMake(SIZE, longSide)];
    [path addLineToPoint:CGPointMake
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇C++完成Oracle存储过程批量插入(.. 下一篇Scroller应用:ListView滑动删除

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·C语言中如何将结构体 (2025-12-24 22:20:09)
·纯C语言结构体成员变 (2025-12-24 22:20:06)
·C语言中,指针函数和 (2025-12-24 22:20:03)
·哈希表 - 菜鸟教程 (2025-12-24 20:18:55)
·MySQL存储引擎InnoDB (2025-12-24 20:18:53)