IOS应用开发14——使用UICollectionView实现图片列表显示

除了UITableView列表形式外，还常常会用到UICollectionView来显示九宫格样式的结构，也可以用以实现瀑布流。这里先简单的实现基本的UICollectionView，其他的后续记录。有时候我们会实现如下图的界面样式。



是一个典型的UICollectionView结构。那我们就来实现它吧。主要步骤如下：

1.实例化一个UICollectionView对象，设置代理方法等。

2.定制UICollectionViewCell样式。

3.从网络获取图片。

部分代码示例如下：

1.定制一个UICollectionView加入视图中

@interface PictureViewController ()<
UICollectionViewDelegate,
UICollectionViewDataSource>

// 加载collectionView
- (void)loadCollectionView;

@end

@implementation PictureViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// 设置标题
[self setNavigationBarTitle:@"图片"];
self.view.backgroundColor = [UIColor whiteColor];
}
return self;
}

- (void)viewDidLoad{
[super viewDidLoad];

// 加载collectionView
[self loadCollectionView];
}
#pragma  mark - 初始化、加载方法

// 加载collectionView
- (void)loadCollectionView{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 设置每个cell的大小
layout.itemSize = CGSizeMake(155 , 250);

CGFloat paddingY = 10;
//CGFloat paddingX = 10;
layout.sectionInset = UIEdgeInsetsMake(paddingY, 0, 0, 0);
// 上左下右

layout.minimumLineSpacing = paddingY;

_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, kMarginTop, kScreenWidth, kScreenHeight - kTabBarHeight-kMarginTop)
collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.backgroundColor = [UIColor whiteColor];
// 注册cell,否则会报错
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"pictureCellIdentifier"];

[self.view addSubview:_collectionView];
}

#pragma mark - collectionView代理方法

// 每个sectioin多少个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 20;
}

// cell内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pictureCellIdentifier"
forIndexPath:indexPath];

return cell;

}
@end

2.自定义cell

@interface PictureCell : UICollectionViewCell

@property (nonatomic, strong)UIImageView *photoView;
@property (nonatomic, strong)UIImageView *pictureCountView;

@property (nonatomic, strong)UILabel *pictureCount;
@property (nonatomic, strong)UILabel *titleLabel;
@property (nonatomic, strong)UIButton *nameBtn;
@property (nonatomic, strong)UILabel *visitCount;
@property (nonatomic, strong)UIButton *likeBtn;

@end

---------------------------------------------------------------
#define kPictureCellTitleHeight 40
#define kPictureCellFlagWidth   50
#define kPictureCellFlagHeight  20
@implementation PictureCell

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

return self;
}
- (void)initSubViews{
// 图片
_photoView          = [UIImageView new];
_pictureCountView   = [UIImageView new];
_pictureCount       = [UILabel new];
_titleLabel         = [UILabel new];
_nameBtn            = [UIButton buttonWithType:UIButtonTypeRoundedRect];
_visitCount         = [UILabel new];
_likeBtn            = [UIButton buttonWithType:UIButtonTypeRoundedRect];

// 图像
//_photoView.backgroundColor  = [UIColor greenColor];
_photoView.layer.borderWidth = 0.5f;
_photoView.layer.borderColor = [[UIColor grayColor] CGColor];

// 图像数量提示
_pictureCountView.image = [UIImage imageNamed:@"picturebutten"];
_pictureCount.font      = [UIFont fontWithName:nil size:16];
_pictureCount.textColor = [UIColor whiteColor];
//_pictureCount.backgroundColor = [UIColor redColor];
_pictureCount.textAlignment = NSTextAlignmentCenter;

// 标题
_titleLabel.font = [UIFont fontWithName:nil size:17];

// 名称等
_nameBtn.titleLabel.font = [UIFont fontWithName:nil size:11];
_nameBtn.backgroundColor = [UIColor grayColor];
_nameBtn.tag             = 222;
_nameBtn.contentEdgeInsets = UIEdgeInsetsMake(0,5, 0, 0);
_nameBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[_nameBtn setTintColor:[UIColor blackColor]];
[_nameBtn addTarget:self action:@selector(btnIsClicked:) forControlEvents:UIControlEventTouchUpInside];

[_likeBtn setBackgroundImage:[UIImage imageNamed:@"picturebu4"] forState:UIControlStateNormal];
[_likeBtn addTarget:self action:@selector(btnIsClicked:) forControlEvents:UIControlEventTouchUpInside];
_likeBtn.tag = 111;

_visitCount.font = [UIFont fontWithName:nil size:14];

[self addSubview:_photoView];
[self addSubview:_titleLabel];
[self addSubview:_nameBtn];
[self addSubview:_likeBtn];
[self addSubview:_visitCount];
[_photoView addSubview:_pictureCountView];
[_pictureCountView addSubview:_pictureCount];
}

- (void)layoutSubviews{
_photoView.frame = CGRectMake(0, 0, self.width, self.height - 60);
_pictureCountView.frame = CGRectMake(_photoView.width - kPictureCellFlagWidth-5,
_photoView.bottom - kPictureCellFlagHeight,
kPictureCellFlagWidth,
kPictureCellFlagHeight);
_pictureCount.frame = CGRectMake(0,0,kPictureCellFlagWidth/2 ,18 );
_titleLabel.frame = CGRectMake(0,self.height - 60,_photoView.width,kPictureCellTitleHeight);
_nameBtn.frame = CGRectMake(0, _titleLabel.bottom+2, 80, 18);
_likeBtn.frame = CGRectMake(_nameBtn.right+20, self.height -18, 20, 17.3);
_visitCount.frame = CGRectMake(_likeBtn.right, self.height -20, 40, 20);
}
@end

3.从网络下载图片，使用SDWebImage实现

// 因为是测试，下面就从网上找了10张图片，一个数组存缩略图地址，一个数组存原图地址

_imgArr =  @[@"http://image15-c.poco.cn/mypoco/myphoto/20131110/20/5242736920131110201542020_640.jpg",
@"http://b.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c5e7f960e85d6277f9f2ff8c0.jpg",
@"http://d.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18b5c6410fa9c2f07082938fefc.jpg",
@"http://g.hiphotos.baidu.com/image/pic/item/d50735fae6cd7b8928e0235c0d2442a7d8330e64.jpg",
@"http://f.hiphotos.baidu.com/image/pic/item/c75c10385343fbf2978bafe1b27eca8064388f48.jpg",
@"http://g.hiphotos.baidu.com/image/pic/item/8601a18b87d6277f103081ff2a381f30e824fcd3.jpg",
@"http://e.hiphotos.baidu.com/image/pic/item/b7003af33a87e95039ab96ad12385343faf2b4b6.jpg",
@"http://a.hiphotos.baidu.com/image/pic/item/d0c8a786c9177f3ebf1d2bfc72cf3bc79f3d5612.jpg",
@"http://a.hiphotos.baidu.com/image/pic/item/9e3df8dcd100baa12d04904a4510b912c8fc2e13.jpg",
@"http://b.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd55c7a3f0553da81cb39db3d12.jpg"];
_thumbArr = @[@"http://a.hiphotos.baidu.com/image/w%3D230/sign=f608906acc1b9d168ac79d62c3dfb4eb/314e251f95cad1c82748fe927d3e6709c83d5197.jpg",
@"http://b.hiphotos.baidu.com/image/w%3D230/sign=a2f7a9d40db30f24359aeb00f894d192/4bed2e738bd4b31c5e7f960e85d6277f9f2ff8c0.jpg",
@"http://d.hiphotos.baidu.com/image/w%3D230/sign=d40138a140a7d933bfa8e3709d4ad194/8ad4b31c8701a18b5c6410fa9c2f07082938fefc.jpg",
@"http://g.hiphotos.baidu.com/image/w%3D230/sign=86ff09f097cad1c8d0bbfb244f3c67c4/d50735fae6cd7b8928e0235c0d2442a7d8330e64.jpg",
@"http://f.hiphotos.baidu.com/image/w%3D230/sign=70618e0941166d223877129776220945/c75c10385343fbf2978bafe1b27eca8064388f48.jpg",
@"http://g.hiphotos.baidu.com/image/w%3D230/sign=ccb85fc4ca95d143da76e32043f18296/8601a18b87d6277f103081ff2a381f30e824fcd3.jpg",
@"http://e.hiphotos.baidu.com/image/w%3D230/sign=047b01cc249759ee4a5067c882fa434e/b7003af33a87e95039ab96ad12385343faf2b4b6.jpg",
@"http://a.hiphotos.baidu.com/image/w%3D230/sign=45021f3bad51f3dec3b2be67a4eff0ec/d0c8a786c9177f3ebf1d2bfc72cf3bc79f3d5612.jpg",
@"http://a.hiphotos.baidu.com/image/w%3D230/sign=da3ccf34e2fe9925cb0c6e5304a95ee4/9e3df8dcd100baa12d04904a4510b912c8fc2e13.jpg",
@"http://b.hiphotos.baidu.com/image/w%3D230/sign=6d963399cebf6c81f7372beb8c3fb1d7/7c1ed21b0ef41bd55c7a3f0553da81cb39db3d12.jpg"
];
// 修改sectioin 的item个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return _thumbArr.count;
}
// 修改cell 相关
注册的cell要该为自定义cell
[_collectionView registerClass:[PictureCell class]forCellWithReuseIdentifier:@"pictureCellIdentifier"];

PictureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pictureCellIdentifier"
forIndexPath:indexPath];
设置cell属性内容
[cell.photoView setImageURLStr:_thumbArr[indexPath.row] placeholder:nil];
[cell.photoView setImageURLStr:_thumbArr[indexPath.row] placeholder:nil];
cell.titleLabel.text = @"这是测试标题信息";
[cell.nameBtn setTitle:[NSString stringWithFormat:@"摄影师:%@",@"小飞侠"]
forState:UIControlStateNormal];
cell.pictureCount.text = @"10";
cell.visitCount.text = @"1223";

这样就实现了，亲，是不是很简单呢。