iOS CollectionView简单使用

UICollectionView的使用跟UITableView的使用相似,必须实现UICollectionViewDataSource,UICollectionViewDelegate,

UICollectionViewDelegateFlowLayout这三个协议。

首先创建collectionView:


UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100 * ((self.dataArr.count - 1)/2 + 1)) collectionViewLayout:flowLayout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    self.collectionView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:self.collectionView];
    [self.collectionView registerClass:[PrefectureCollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];

然后列举一些经常使用的方法:

#pragma mark -UICollectionView delegate
/**
 *  有多少个分区
 */
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
    
}

/**
 *  有多少个cell
 */
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    
    return _dataArr.count;
    
}

/**
 *  相当于单元格
 */
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    PrefectureCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    
    NSDictionary *dit = [_dataArr objectAtIndex:indexPath.row];
    cell.imageV.backgroundColor = [UIColor cyanColor];
    cell.titleLabel.text = [dit objectForKey:@"name"];
    cell.detailLabel.text = [dit objectForKey:@"description"];
    
    return cell;
}

//每个cell尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    return CGSizeMake(self.view.frame.size.width/2.0, 100);
    
}

//每个cell间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    
    return UIEdgeInsetsMake(0, 0, 0, 0);
    
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    
    return 0;
    
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
{
    return 0;
    
}

//UICollectionView被选中时调用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor whiteColor];
}

//返回这个UICollectionView是否可以被选择
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}


自定义 PrefectureCollectionViewCell代码:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        _imageV = [[UIImageView alloc] init];
        _imageV.frame = CGRectMake(10, (frame.size.height - 60.0)/2.0, 60, 60);
        _imageV.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:_imageV];
        
        
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.frame = CGRectMake(_imageV.frame.origin.x + _imageV.frame.size.width + 5, _imageV.frame.origin.y + _imageV.frame.size.height - 45, frame.size.width - 70 - 5, 20.0);
        _titleLabel.backgroundColor = [UIColor clearColor];
        _titleLabel.textAlignment = NSTextAlignmentLeft;
        _titleLabel.font = [UIFont systemFontOfSize:17.0];
        _titleLabel.textColor = [UIColor colorWithWhite:0.2 alpha:1.0];
        [self.contentView addSubview:_titleLabel];
        
        _detailLabel = [[UILabel alloc] init];
        _detailLabel.frame = CGRectMake(_titleLabel.frame.origin.x, _titleLabel.frame.origin.y + _titleLabel.frame.size.height, _titleLabel.frame.size.width, 20.0);
        _detailLabel.backgroundColor = [UIColor clearColor];
        _detailLabel.textAlignment = NSTextAlignmentLeft;
        _detailLabel.font = [UIFont systemFontOfSize:12.0];
        _detailLabel.textColor = [UIColor blackColor];
        [self.contentView addSubview:_detailLabel];
        
    }
    
    return self;
}

- (void)drawRect:(CGRect)rect {
    
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetLineCap(context, kCGLineCapSquare);
    CGContextSetStrokeColorWithColor(context, [UIColor clearColor].CGColor);
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 1.0);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, rect.size.width, 0);
    CGContextAddLineToPoint(context, rect.size.width, rect.size.height);
    CGContextAddLineToPoint(context, 0, rect.size.height);
    CGContextMoveToPoint(context,0, 0);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
    
    
    CGContextSetLineWidth(context, 0.6);
    CGContextSetStrokeColorWithColor(context,[UIColor lightGrayColor].CGColor);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, self.frame.size.width-1, 0);
    CGContextAddLineToPoint(context,self.frame.size.width -1, self.frame.size.height);
    CGContextAddLineToPoint(context, 0, self.frame.size.height);
    CGContextStrokePath(context);
    
}

数据:

self.dataArr = @[@{@"module":@"news",
                       @"name":@"惠农快讯",
                       @"catid": @"29",
                       @"description":@"行业资讯快人一步",
                       @"icon":@"http://ynb.114nz.com/Public/Appimg/news.png"},
                     @{@"module":@"news",
                       @"name":@"农情气象",
                       @"catid":@"33",
                       @"description":@"刮风下雨提前告知",
                       @"icon":@"http://ynb.114nz.com/Public/Appimg/news_weather.png"
                               },
                     @{
                       @"module":@"event",
                       @"name":@"活动专区",
                       @"catid":@"1621,1623",
                       @"description":@"热门活动报名抢座",
                       @"icon":@"http://ynb.114nz.com/Public/Appimg/event.png"
                               },
                     @{
                       @"module":@"help",
                       @"name":@"供求发布",
                       @"catid":@"1089",
                       @"description":@"供求信息互帮互助",
                       @"icon":@"http://ynb.114nz.com/Public/Appimg/help.png"
                               },
                       @{
                        @"module":@"tech",
                        @"name":@"栽培技术",
                        @"catid":@"1549",
                        @"description":@" 详细的作物栽培技术",
                        @"icon":@"http://ynb.114nz.com/Public/Appimg/tech_skill.png"
                       },
                       @{
                        @"module":@"tech",
                        @"name":@"解决方案",
                        @"catid":@"1622",
                        @"description":@"海量解决方案等你来",
                        @"icon":@"http://ynb.114nz.com/Public/Appimg/tech_solve.png"
                       },
                       @{
                        @"module":@"tech",
                        @"name":@"试验示范",
                        @"catid":@"1551,1552",
                        @"description":@"您手中的试验田",
                        @"icon":@"http://ynb.114nz.com/Public/Appimg/tech_testpro.png"
                        }];


效果图:




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOSCollectionView是一种强大的界面展示控件,它允许我们展示多个横向或纵向滚动的项。而Section Header是CollectionView中的一个重要组成部分,它可以用来展示每个分区的标题或其他相关信息。 在iOS使用CollectionView的时候,我们可以通过实现UICollectionViewDelegateFlowLayout协议来设置每个分区的大小、间距等布局属性。而Section Header则需要通过实现UICollectionViewDelegate的collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法来自定义。 首先,我们需要创建一个UICollectionReusableView类的子类作为Section Header的视图。然后,在collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法中,我们需要判断elementKind是否为UICollectionElementKindSectionHeader,并根据需要从重用队列中获取Section Header的视图对象。 接下来,我们可以设置Section Header的标题、背景色、字体颜色等视觉效果。例如,我们可以使用UILabel来展示标题,并通过设置UILabel的text属性来显示每个分区的标题。如果需要更加丰富的自定义效果,我们还可以使用自定义的视图来展示Section Header。 最后,我们需要在UICollectionViewFlowLayout中设置sectionHeadersPinToVisibleBounds属性为true,以便在滚动时固定Section Header的位置。这样,当用户滚动CollectionView时,Section Header会始终显示在顶部,增加了用户的使用体验。 综上所述,iOSCollectionView提供了强大的支持来展示多个滚动项,而Section Header则可以用来展示每个分区的相关信息。通过实现UICollectionViewDelegate的collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法,我们可以自定义Section Header的视图,并通过UICollectionViewFlowLayout来设置其布局等属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值