使用xib文件创建CollectionView

1.创建xib文件和CollectionViewController.h,.m文件


2.在View中拖入一个CollectionView,并在CollectionViewController.h中添加关联,并设置CollectionView的代理



3.将xib文件中CollectionView的File's Owner改为CollectionViewController



4.创建CollectionViewCell.h,.m文件和xib文件


5.在CollectionViewCell.xib中拖入一个ImageView和两个Label,并在CollectionViewCell.h中添加关联


添加如下代码

 

//CollectionView.h
#import <UIKit/UIKit.h>
@interface CollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *goodsImg;
@property (weak, nonatomic) IBOutlet UILabel *goodsTitle;
@property (weak, nonatomic) IBOutlet UILabel *goodsDetail;
@end

 

 

//CollectionViewCell.m
#import "CollectionViewCell.h"

@implementation CollectionViewCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    //加载xib文件
    [[NSBundle mainBundle] loadNibNamed:@"CollectionViewCell" owner:self options:nil];
}

@end

 

6.为CollectionView添加数据

 

//CollectionViewController.m
#import "CollectionViewController.h"
#import "CollectionViewCell.h"
#import "Good.h"

@interface CollectionViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

@property (nonatomic, strong) NSMutableArray *goodsInfo;

@end

@implementation CollectionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.collectionView.backgroundColor = [UIColor whiteColor];
    //注册cell,添加复用标识
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"identifier"];
    [self setData];
}

- (void) setData {
    self.goodsInfo = [[NSMutableArray alloc] init];
    
    Good *g1 = [[Good alloc] init];
    g1.title = @"自行车";
    g1.description = @"山地自行车";
    g1.image = @"ziXingChe";
    [self.goodsInfo addObject:g1];
    
    Good *g2 = [[Good alloc] init];
    g2.title = @"饮料";
    g2.description = @"汽水饮料";
    g2.image = @"yinLiao";
    [self.goodsInfo addObject:g2];
    
    Good *g3 = [[Good alloc] init];
    g3.title = @"柠檬";
    g3.description = @"新鲜柠檬";
    g3.image = @"ningMeng";
    [self.goodsInfo addObject:g3];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

//返回CollectionView中cell的总数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.goodsInfo.count;
}

//设置cell的size,宽为屏幕宽的一半,两个cell间隔10个像素,高为200像素
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGSize cellSize = CGSizeMake(([UIScreen mainScreen].bounds.size.width-10)/2, 200);
    return cellSize;
}

//添加数据
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath];
    Good *good = [self.goodsInfo objectAtIndex:indexPath.row];
    cell.goodsTitle.text = good.title;
    cell.goodsTitle.text = good.description;
    cell.goodsImg.image  = [UIImage imageNamed:good.image];
    
    //垂直分割线
    CGSize contentSize = self.collectionView.contentSize;
    UIView *verticalLine = [[UIView alloc]initWithFrame:CGRectMake(contentSize.width * 0.5 - 0.5, 0, 1, contentSize.height - 8)];
    verticalLine.backgroundColor = [UIColor lightGrayColor];
    verticalLine.alpha = 0.35;
    [self.collectionView addSubview:verticalLine];
    
    //水平分割线
    UIView *horizontalLine = [[UIView alloc]initWithFrame:CGRectMake(0, (cell.frame.size.height + 10) * (indexPath.row + 1) , contentSize.width, 1)];
    horizontalLine.backgroundColor = [UIColor lightGrayColor];
    horizontalLine.alpha = 0.35;
    [self.collectionView addSubview:horizontalLine];
    
    return cell;
}

@end


 







 

转载于:https://www.cnblogs.com/ltchu/p/5961558.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值