UICollectionView的基本使用（1）

如果是简单实用UICollectionView的话，用法和UITableView基本一致。下面是用UICollectionView实现的简单图片显示

（1）打开storyboard，将一个UICollectionView拖到View Controller Scene中，默认的UICollectionView已经包含了一个UICollectionViewcell，将一个UIImageView和UILabel拖到UICollectionViewcell中，如下图：

（2）连接输出口datasource和delegate：打开Connections Inspector（option+command+6），从输出口atasource和delegate分别拖曳到ViewController对像中。

（3）在ViewController中实现UICollectionViewDataSource,UICollectionViewDelegate代理

ViewController.h文件如下：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>@end

（4）新建AUICollectionViewCell类，继承UICollectionViewCell，完善.h文件，并连接输出口

AUICollectionViewCell.h如下：

#import <UIKit/UIKit.h>@interface ACollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *image;
@property (weak, nonatomic) IBOutlet UILabel *title;@end

（5）完善ViewController.m文件，注释写的比较清楚了

#import "ViewController.h"
#import "ACollectionViewCell.h"
int const cellCount = 40;
@interface ViewController ()
@property(nonatomic,strong)NSArray *imgArr;
@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];
}//图片懒加载
-(NSArray*)imgArr{if (!_imgArr) {NSMutableArray *muArr = [NSMutableArray array];for (int i = 0; i < cellCount; i++) {UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];[muArr addObject:image];}_imgArr = muArr;}return _imgArr;
}#pragma mark - UICollectionViewDataSource Delegate
#pragma mark cell的数量
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{return cellCount;
}#pragma mark cell的视图
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{NSString *cellIdentifier = @"CollectionViewCell";ACollectionViewCell *collectionViewCell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];collectionViewCell.layer.cornerRadius = 6.0f;collectionViewCell.image.image = [self.imgArr objectAtIndex:indexPath.row];collectionViewCell.title.text = [[NSString alloc] initWithFormat:@"图片%d",indexPath.row];return collectionViewCell;
}#pragma mark cell的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{return CGSizeMake(150, 150);
}#pragma mark cell的点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{NSLog(@"点击图片%d",indexPath.row);
}@end

本文Demo下载地址：http://download.csdn.net/detail/dolacmeng/8677213

使用UICollectionView实现Gallery图片浏览效果：http://blog.csdn.net/dolacmeng/article/details/45588293

使用UICollectionView实现瀑布流效果：http://blog.csdn.net/dolacmeng/article/details/45599069

UICollectionView的基本使用（1）相关推荐

UICollectionView的使用方法
1.遵守协议 <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout> 2.创建 UICollectionViewFl ...
UICollectionView
UICollectionView 多列的UITableView,最简单的形式,类似于iBooks中书架的布局,书架中放着你下载的和购买的电子书. 最简单的UICollectionView是一个Grid ...
UICollectionView之网络图片解析
1:将SDWebImage文件夹的类库导入工程,创建一个模型对象Model类,并声明好它的属性,再创建一个继承自UICollectionViewCell的自定义类 2:在自定义cell类中重写 - ( ...
【iOS官方文档翻译】UICollectionView与UICollectionViewFlowLayout
(一)先来简单回顾一下UICollectionView *UICollectionView的简单使用可以看我以前写的这篇博文:UICollectionView的基本使用 UICollectionVie ...
iOS UICollectionView实现瀑布流（3）
前面两篇Blog简单的介绍了UICollection的基本使用并实现了类似Android的Gallery效果,这篇文章使用UICollection来实现瀑布流效果,代码主要是在极客学院Carol老师的 ...
(2)iOS用UICollectionView实现Gallery效果
本文主要实现: (1)用UICollectionView显示一组图片 (2)左右滑动来浏览所有图片 (3)图片自动对齐到网格(即滑动停止后中间的图片对齐到正中位置) (4)中间图片始终放大显示. 效果 ...
iOS 之 UICollectionView
1. iOS 之 UICollectionView 之原理介绍 2. iOS 之 UICollectionView 之开发步骤之 OC 3. iOS 之 UICollectionView 之开 ...
UICollectionView的headerView、footerView使用以及与UITableView加载headerView、footerView的区别...
为什么80%的码农都做不了架构师?>>> 前序最近在一家公司实习,学习一些ios的知识.因为以前没有使用过UICollectionView,所以带我的导师让我仿照公司APP中 ...
ios wallet开发_iOS: 使用UICollectionView实现Wallet效果
Wallet的拖拉效果是不是很炫酷,笔者仿照着自己写了一个Demo, 效果还是可以滴!为什么要用CollectionView来写呢,因为我们可以自定义cell的layout attributes,如果 ...

UICollectionView的基本使用（1）

UICollectionView的基本使用（1）相关推荐

最新文章

热门文章