IOS之集合视图UICollectionView

实现效果如下。

1.往ViewController添加UICollectionView，并绑定Delegate和DataSource。

2.新建单元类BookCell，继承UICollectionViewCell

BookCell.h

#import <UIKit/UIKit.h>

@interface BookCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;//自定义单元控件1
@property (weak, nonatomic) IBOutlet UILabel *label;//自定义单元控件2
@end

BookCell.m

#import "BookCell.h"

@implementation BookCell

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

@end

3.在Interface Builder中设置UICollectionView的Cell的class为BookCell.选中设计界面的单元格，（1）把连线连接到左边View Controller Scene的UICollectionView的Cell的UIImageView，在弹出的菜当中选择imageView（即对应BookCell的imageView变量）（2）把连线连接到左边View Controller Scene的UICollectionView的Cell的UILabel，在弹出的菜当中选择label（即对应BookCell的label变量）(3)选中UICollectionView的Cell，将identifier设置为bookCell（下面第5步会有说明）

4.设置UICollectionView的数据源初始化。user_head.plist以及图片请见附件。

扫描二维码关注公众号，回复： 610530 查看本文章

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    [self initCollectionView];
}

-(void)initCollectionView{
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *plistPath = [bundle pathForResource:@"user_head" ofType:@"plist"];
    dataArr = [[NSArray alloc] initWithContentsOfFile:plistPath];//dataArr为.h文件定义的变量
    NSLog(@"data count = %d",[dataArr count]);
}

5.将数据源绑定到UICollectionView

//显示多少行
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 3;
}
//显示多少列
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 2;
}
//为每个单元设置UI
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    BookCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"bookCell" forIndexPath:indexPath];//"bookCell" 对应第三步的cell的identifier
    NSDictionary *dict = [dataArr objectAtIndex:(indexPath.section*2+indexPath.row)];//2为每行的个数
    cell.label.text = [dict objectForKey:@"itemName"];
    NSLog(@"itemName= %@",[dict objectForKey:@"itemName"]);
    cell.imageView.image = [UIImage imageNamed:[dict objectForKey:@"itemImagePath"]];
    return cell;
}

6.添加选择单元格之后的触发事件。

//选择单元格触发事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSDictionary *dict = [dataArr objectAtIndex:(indexPath.section*2+indexPath.row)];//2为每行的个数
    NSString *userName = [dict objectForKey:@"itemName"];
    NSString *userHead = [dict objectForKey:@"itemImagePath"];
    NSLog(@"userName = %@, userHead = %@", userName,userHead);
}

IOS之集合视图UICollectionView

猜你喜欢