实现效果如下。
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以及图片请见附件。
- (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);
}