1、新建SingleViewApplication项目,进入到storyboard,把原来的ViewController删掉,添加Collection View Controller控件,然后因为原来的ViewController继承的是UIViewController类,现在改一下,并且加上数据源协议和委托协议,所以ViewController.h:
//
// ViewController.h
// TestProject
//
// Created by 侯家奇 on 16/8/17.
// Copyright © 2016年 侯家奇. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "PhotoCell.h"
@interface ViewController : UICollectionViewController <UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, retain) NSArray *dataArr;
@end
2、添加一个自定义单元格类,直接在项目文件夹下右键->New Files->Cocoa Touch Class,subclass of选择UICollectionViewCell,然后这里类名是PhotoCell,将Cell控件的类指定为PhotoCell,identifier设置为PhotoCell:
3、拖两个控件ImageView和Label控件到PhotoCell控件上,并且分别配置输出口,然后给自定义单元格类源文件写一个初始化函数:
//
// PhotoCell.h
// TestProject
//
// Created by 侯家奇 on 16/8/22.
// Copyright © 2016年 侯家奇. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface PhotoCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *label;
@end
//
// PhotoCell.m
// TestProject
//
// Created by 侯家奇 on 16/8/22.
// Copyright © 2016年 侯家奇. All rights reserved.
//
#import "PhotoCell.h"
@implementation PhotoCell
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
@end
4、这里图片是自己网上下载的png格式的图标素材,在这里导入:
5、然后图片列表采用plist文件的方式读取,新建一个user_head.plist文件,内容大致如下:
6、最后贴出ViewController.m的代码:
//
// ViewController.m
// TestProject
//
// Created by 侯家奇 on 16/8/17.
// Copyright © 2016年 侯家奇. All rights reserved.
//
#import "ViewController.h"
#import "PhotoCell.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initCollectionView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)initCollectionView {
NSBundle *bundle = [NSBundle mainBundle];
NSString *plistPath = [bundle pathForResource:@"user_head" ofType:@"plist"];
_dataArr = [[NSArray alloc] initWithContentsOfFile:plistPath];
NSLog(@"data count = %lu", (unsigned long)[_dataArr count]);
}
//显示多少行
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
if ([_dataArr count]%4 >= 1) {
return [_dataArr count]/4 + 1;
} else {
return [_dataArr count]/4;
}
}
//显示多少列
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 4;
}
//为每个单元设置UI
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"PhotoCell" forIndexPath:indexPath];//"bookCell" 对应第三步的cell的identifier
if (indexPath.section*4+indexPath.row < [_dataArr count]) {
NSDictionary *dict = [_dataArr objectAtIndex:(indexPath.section*4+indexPath.row)];//4为每行的个数
cell.label.text = [dict objectForKey:@"itemName"];
NSLog(@"itemName= %@",[dict objectForKey:@"itemName"]);
cell.imageView.image = [UIImage imageNamed:[dict objectForKey:@"itemImagePath"]];
return cell;
} else {
cell.label.text = @"";
return cell;
}
}
//选择单元格触发事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section*4+indexPath.row < [_dataArr count]) {
NSDictionary *dict = [_dataArr objectAtIndex:(indexPath.section*4+indexPath.row)];//4为每行的个数
NSString *userName = [dict objectForKey:@"itemName"];
NSString *userHead = [dict objectForKey:@"itemImagePath"];
NSLog(@"userName = %@, userHead = %@", userName,userHead);
}
}
@end