iOS开发--UICollectionView的使用
博客专区 > chaoGod 的博客 > 博客详情
iOS开发--UICollectionView的使用
chaoGod 发表于3年前
iOS开发--UICollectionView的使用
  • 发表于 3年前
  • 阅读 86
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 了解一下UICollectionView的基本使用

UICollectionView 和 UICollectionViewController 类,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类

使用UICollectionView 必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。


先给出一些常用的方法

//定义UICollectionViewCell的个数  
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  
{  
    return 30;  
}   
//定义展示的Section(组)的个数  
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  
{  
    return 1;  
}   
//每个UICollectionView展示的内容  
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    static NSString * CellIdentifier = @"GradientCell";  
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];  
  
     return cell;  
} 
  
#pragma mark --UICollectionViewDelegateFlowLayout   
//定义每个UICollectionView 的大小  
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    return CGSizeMake(80, 100);  
}
   
//定义每个UICollectionView 的 margin ,上下左右的间隔 
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
{  
    return UIEdgeInsetsMake(5, 5, 5, 5);  
} 
  
#pragma mark --UICollectionViewDelegate   
//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;  
}


下面用一个简单的例子介绍一下

在viewcontroller中添加一个uicollectionview

首先声明实现的协议

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>


@end

因为UICollectionViewDelegateFlowLayout这个可以继承UICollectionViewDelegate所以它就不需要声明了

在.m中添加视图

首先创建一个布局类

UICollectionViewFlowLayout *flow =[[UICollectionViewFlowLayout alloc] init];
    
    // item 的尺寸
    flow.itemSize = CGSizeMake(60, 60);
    // item 的最小间距
    flow.minimumInteritemSpacing = 10;
    
    // 最小的行距
    flow.minimumLineSpacing = 10;
    //滚动方向
    flow.scrollDirection = UICollectionViewScrollDirectionVertical;

这里设置的布局属性都是可以在代理中重新设置的

然后创建视图

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 320, 568) collectionViewLayout:flow];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor orangeColor];
    
    // 注册cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"newCell"];
    //添加视图 
    [self.view addSubview:collectionView];


实现必须的代理

// 设置组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

// 设置每组的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

// 设置cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"newCell" forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

这了的cell可以自定义一个,用xib画。

创建一个类继承自UIColectionViewCell,勾选创建xib

在xib中实现布局

要复用cell的话,需要在右边的identifier中输入复用的标记, 比如"newCell"


最后的效果, 两组,每组10个,垂直滚动。

要实现点击事件,可以实现代理方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

即可。

共有 人打赏支持
粉丝 0
博文 2
码字总数 1364
×
chaoGod
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: