collectionViewFlow的界面编写
#import <UIKit/UIKit.h>
//这边我们会创建一个scrollView的界面，这个scrollView里面有三张图片构成，我们使用下面的枚举方式来定义这三个位置
typedef NS_ENUM(NSInteger, MRImgLocation) {
MRImgLocationLeft,
MRImgLocationCenter,
MRImgLocationRight,
};
@interface MRimgView : UIScrollView <UIScrollViewDelegate>
{
NSDictionary* _imgViewDic; // 这个字典里面存放了scrollView的图片，一共三个图片
}
@property(nonatomic ,retain)NSMutableArray *imgSource;
@property(nonatomic ,assign)NSInteger curIndex; // 当前显示图片在数据源中的下标
- (id)initWithFrame:(CGRect)frame withSourceData:(NSMutableArray *)imgSource withIndex:(NSInteger)index;
// 谦让双击放大手势
- (void)requireDoubleGestureRecognizer:(UITapGestureRecognizer *)tep;
@end这边通过一个实际例子来介绍collectionViewFlow。下面是完成这个collectionViewFlow的文件：
介绍这些文件的作用：
首先第一个collectionView文件，在此文件中创建一个collectionViewFlow的瀑布流图片。
然后第二个imgViewController文件，在此文件中创建一个viewController界面，和普通的viewController界面没有什么区别。
最后第三个MRimgView文件，在此文件中创建一个scrollView界面，我们在这里可以图片的放大操作和滑动观看操作。
以上文件的链接过程：首先我们点击进入瀑布流图片界面（collectionView文件），然后我们点击一个图片的滚动视图界面（在imgViewController文件的界面上添加了一个MRimgView的滚动视图界面），就这样完成了瀑布流图片的界面。
下面来对这些文件进行一一介绍：
首先我们来介绍collectionView文件：
//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊collectionView.h＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import <UIKit/UIKit.h> @interface collectionView : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout> //这里我们遵循了三个协议，这三个协议分别是collection的数据源，委托和自动布局协议 @property (nonatomic, strong) NSMutableArray *DataImage;//储存图片信息 @end
//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊collectionView.m＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import "collectionView.h"
#import "imgViewController.h"
//我们要在这个界面上调用这个文件，在navigation中push一个imgviewController文件
@interface collectionView ()
{
NSString *_identify;
// 用于创建collectionView的cell
}
@end
@implementation collectionView
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.title = @"图片列表";
[self _requestData];
[self _init];
self.navigationController.navigationBarHidden = YES;
}
-(void) _requestData
{
// 请求数据，储存图片
self.DataImage = [[NSMutableArray alloc] init];
for (int i = 0; i < 12; i++) {
NSString *imgName = [NSString stringWithFormat:@"%d.jpg",i];
UIImage *img = [UIImage imageNamed:imgName];
[self.DataImage addObject:img];
}
}
-(void) _init
{
// 首先我们创建布局对象
UICollectionViewFlowLayout *viewLayout = [[UICollectionViewFlowLayout alloc] init];
viewLayout.itemSize = CGSizeMake(100, 150);
viewLayout.minimumLineSpacing = 6;//设置每行之间的最小间距
viewLayout.minimumInteritemSpacing = 6;//设置每行中的图片的最小间距
// 设置我们的集合视图流
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(3, 3, self.view.frame.size.width - 6, self.view.frame.size.height - 80) collectionViewLayout:viewLayout];
collectionView.dataSource = self;
collectionView.delegate = self;
collectionView.backgroundColor = [UIColor clearColor];
//为该cellectionView实例注册单元格
_identify = @"PhotoCell";
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:_identify];
// 将刚刚创建的collectionView添加到界面上
[self.view addSubview:collectionView];
// 添加navigationBar的左箭头
// 自定义按钮barLeft
UIButton *actionBtnlf = [UIButton buttonWithType:UIButtonTypeCustom];
[actionBtnlf setTitle:@"" forState:UIControlStateNormal];
UIImage *imgDefault = [UIImage imageNamed:@"Arrow"];
[actionBtnlf setFrame:CGRectMake(0, 0, imgDefault.size.width, imgDefault.size.height)];
[actionBtnlf setBackgroundImage:imgDefault forState:UIControlStateNormal];
[actionBtnlf addTarget:self action:@selector(backButtonAction) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:actionBtnlf];
}
//下面实现我们collectionView里面的delegate和datasource里面的方法
-(NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
// 返回每一个section里面的试图的数量，这边我们就只有一个section
return self.DataImage.count;
}
-(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 创建我们的cell，并且返回cell到的集合试图的相应位置
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:_identify forIndexPath:indexPath];
cell.backgroundColor = [UIColor clearColor];
UIImage *image = self.DataImage[indexPath.row];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.contentMode = UIViewContentModeScaleToFill;
imageView.frame = CGRectMake(0, 0, 100, 150);
[cell.contentView addSubview:imageView];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
// 点击相应的视图的时候，我们将调用这个方法
// 深拷贝数据
NSMutableArray *imgList = [NSMutableArray arrayWithCapacity:self.DataImage.count];
for (int i = 0; i < self.DataImage.count; i++) {
UIImage *imgMod = self.DataImage[i];
[imgList addObject:imgMod];
}
// 调用展示窗口，这边调用的这个方法是imgViewController借口文件中的方法
imgViewController *imgView = [[imgViewController alloc] initWithSourceData:imgList withIndex:indexPath.row];
[self.navigationController pushViewController:imgView animated:YES];
}
#pragma mark -View生命周期
- (void)viewWillAppear:(BOOL)animated{
// 每当这个视图出现的时候，这个函数都会被调用
if (self.navigationController.navigationBar.translucent) {
self.navigationController.navigationBar.translucent = NO;
}
if (self.navigationController.navigationBarHidden) {
self.navigationController.navigationBarHidden = NO;
}
}
-(void) backButtonAction
{
[self.navigationController popViewControllerAnimated:YES];
self.navigationController.navigationBarHidden = YES;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
下面是imgViewController文件
//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊imgcollectionView.h＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import <UIKit/UIKit.h> @interface imgViewController : UIViewController @property (strong, nonatomic) NSMutableArray *data;//储存数据 @property (nonatomic, assign) NSInteger index;//储存点击的图片的位置 - (id)initWithSourceData:(NSMutableArray *)data withIndex:(NSInteger)index; @end
//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊imgcollectionView.m＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import "imgViewController.h"
#import "MRimgView.h"
//我们在这里要加载一个MRimgview中的scrollView的文件
@interface imgViewController ()
@end
@implementation imgViewController
- (id)initWithSourceData:(NSMutableArray *)data withIndex:(NSInteger)index{
self = [super init];
if (self) {
_data = data;
_index = index;
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.title = @"图片列表";
//设置导航栏为半透明
self.navigationController.navigationBar.translucent = YES;
// 隐藏标签栏
self.tabBarController.tabBar.hidden = YES;
// 隐藏导航栏
self.navigationController.navigationBarHidden = YES;
// 这里我们创建一个手势，点击View一下，此事件触发
UITapGestureRecognizer *tapGestureOne = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureOneAction)];
tapGestureOne.numberOfTapsRequired = 1;
[self.view addGestureRecognizer:tapGestureOne];
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view setBackgroundColor:[UIColor blackColor]];
// 添加navigationBar的左箭头
// 自定义按钮barLeft
UIButton *actionBtnlf = [UIButton buttonWithType:UIButtonTypeCustom];
[actionBtnlf setTitle:@"" forState:UIControlStateNormal];
UIImage *imgDefault = [UIImage imageNamed:@"Arrow"];
[actionBtnlf setFrame:CGRectMake(0, 0, imgDefault.size.width, imgDefault.size.height)];
[actionBtnlf setBackgroundImage:imgDefault forState:UIControlStateNormal];
[actionBtnlf addTarget:self action:@selector(backButtonAction) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:actionBtnlf];
// 为这个视图添加图片
[self creatImgShow];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
-(void) creatImgShow
{
// 为视图添加图片
MRimgView *imgShowView = [[MRimgView alloc]
initWithFrame:self.view.frame
withSourceData:_data
withIndex:_index];
//谦让双击方法事件
[imgShowView requireDoubleGestureRecognizer:[[self.view gestureRecognizers] lastObject]];
[self.view addSubview:imgShowView];
}
-(void) tapGestureOneAction
{
// 点按视图一下，启动的action,隐藏导航栏或者出现导航栏
[UIView animateWithDuration:0.3 animations:^{
self.navigationController.navigationBarHidden = !self.navigationController.navigationBarHidden;
}];
}
-(void) backButtonAction
{
[self.navigationController popViewControllerAnimated:YES];
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@end//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊MRimgView.h＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import <UIKit/UIKit.h>
//这边我们会创建一个scrollView的界面，这个scrollView里面有三张图片构成，我们使用下面的枚举方式来定义这三个位置
typedef NS_ENUM(NSInteger, MRImgLocation) {
MRImgLocationLeft,
MRImgLocationCenter,
MRImgLocationRight,
};
@interface MRimgView : UIScrollView <UIScrollViewDelegate>
{
NSDictionary* _imgViewDic; // 这个字典里面存放了scrollView的图片，一共三个图片
}
@property(nonatomic ,retain)NSMutableArray *imgSource;
@property(nonatomic ,assign)NSInteger curIndex; // 当前显示图片在数据源中的下标
- (id)initWithFrame:(CGRect)frame withSourceData:(NSMutableArray *)imgSource withIndex:(NSInteger)index;
// 谦让双击放大手势
- (void)requireDoubleGestureRecognizer:(UITapGestureRecognizer *)tep;
@end//＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊MRimgView.m＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊//
#import "MRimgView.h"
#define kImgViewCount 3
#define kImgZoomScaleMin 1
#define kImgZoomScaleMax 3
@implementation MRimgView
{
UIScrollView *_scrCenter;
}
- (id)initWithFrame:(CGRect)frame withSourceData:(NSMutableArray *)imgSource withIndex:(NSInteger)index
{
// 将我们的image传入这个类，然后将图片位置传入类中，还有这个图片的大小
self = [super initWithFrame:frame];
if (self) {
// 初始化空间属性
[self initScroller];
// 设置数据源的操作
[self setImgSource:imgSource];
// 设置图片下标
[self setCurIndex:index];
}
return self;
}
-(void) initScroller
{
// 初始化self的scrollerView控件属性
self.delegate = self;
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.pagingEnabled = YES;
self.backgroundColor = [UIColor clearColor];
// 构建展示组
[self initImgViewDic];
}
- (void)setImgSource:(NSMutableArray *)imgSource
{
// 这边我们进行数据的插入操作
if (_imgSource != imgSource) {
_imgSource = imgSource;
// 设置展示板尺寸
[self setConSize];
}
}
// 展示板尺寸设置
- (void)setConSize{
CGSize size = self.frame.size;
//设置内容视图的大小--单页填充、横向划动
self.contentSize = CGSizeMake(size.width * kImgViewCount, size.height);
// 设置显示页 这句话的作用是设置了滚动视图现实在屏幕上的区域，距离坐标原点的向量是（320，0），因此把scrCenter显示在屏幕上
[self setContentOffset:CGPointMake(size.width, 0)];
}
// 初始化展示板组
-(void) initImgViewDic
{
UIImageView *imgLeft = [self creatImageView];
UIImageView *imgCenter = [self creatImageView];
UIImageView *imgRight = [self creatImageView];
_imgViewDic = [[NSDictionary alloc] initWithObjectsAndKeys:
imgLeft, @"imgLeft",
imgCenter, @"imgCenter",
imgRight, @"imgRight",
nil];
// 创建滚动视图
UIScrollView *scrLeft =
[self scrollViewWithPosition:MRImgLocationLeft withImgView:imgLeft];
_scrCenter =
[self scrollViewWithPosition:MRImgLocationCenter withImgView:imgCenter];
UIScrollView *scrRight =
[self scrollViewWithPosition:MRImgLocationRight withImgView:imgRight];
//设置放大缩小极限倍数
_scrCenter.maximumZoomScale = kImgZoomScaleMax;
_scrCenter.minimumZoomScale = kImgZoomScaleMin;
_scrCenter.delegate = self;
// 添加双击手势
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTapClick:)];
doubleTap.numberOfTapsRequired = 2;
[self addGestureRecognizer:doubleTap];
// 放入展示板
[self addSubview:scrLeft];
[self addSubview:_scrCenter];
[self addSubview:scrRight];
}
// 通过创建展示板
- (UIImageView *)creatImageView{
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
return imgView;
}
- (UIScrollView *)scrollViewWithPosition:(MRImgLocation)imgLocation withImgView:(UIImageView *)imgView
{
// 创建滚动视图
CGFloat width = self.frame.size.width;
CGFloat height= self.frame.size.height;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(width * imgLocation, 0, width, height)];
scrollView.backgroundColor = [UIColor blackColor];
[scrollView addSubview:imgView];
// 设置图片显示样式
imgView.contentMode = UIViewContentModeScaleAspectFit;
return scrollView;
}
- (void)setCurIndex:(NSInteger)curIndex
{
// 设置图片内容
//第2、3个if是为了设置循环滚动
if (_imgSource.count > curIndex && curIndex >= 0) {
_curIndex = curIndex;
} else if (curIndex == -1){
_curIndex = _imgSource.count - 1;
} else if (curIndex == _imgSource.count){
_curIndex = 0;
}
if (_imgSource.count)
{[self setAllImgVContentFromImage:[self imgListFromIndex:_curIndex]];}
}
// 载入一组图片
- (void)setAllImgVContentFromImage:(NSArray *)imgList{
// 将所有imgList中的数据载入展示板
UIImageView *vLift = [_imgViewDic valueForKey:@"imgLeft"];
UIImageView *vCenter = [_imgViewDic valueForKey:@"imgCenter"];
UIImageView *vRight = [_imgViewDic valueForKey:@"imgRight"];
[vLift setImage:imgList[MRImgLocationLeft]];
[vCenter setImage:imgList[MRImgLocationCenter]];
[vRight setImage:imgList[MRImgLocationRight]];
}
// 根据当前索引赋值图片 该方法返回一个存有左中右3个image的数组
- (NSArray *)imgListFromIndex:(NSInteger)curIndex{
long sCount = _imgSource.count;
NSArray *imgList;
UIImage *imgL;
UIImage *imgC;
UIImage *imgR;
if (sCount) {
// 首位
if (curIndex == 0) {
imgL = [_imgSource lastObject];
imgC = _imgSource[curIndex];
long nextIndex = curIndex == sCount - 1 ? curIndex : curIndex + 1;
imgR = _imgSource[nextIndex];
// 末位
} else if (curIndex == sCount - 1){
long lastIndex = curIndex == 0 ? curIndex : curIndex - 1;
imgL = _imgSource[lastIndex] ;
imgC = [_imgSource lastObject];
imgR = _imgSource[0];
// 中间
} else {
imgL = _imgSource[curIndex - 1];
imgC = _imgSource[curIndex];
imgR = _imgSource[curIndex + 1];
}
imgList = [[NSArray alloc] initWithObjects:imgL, imgC, imgR, nil];
}
return imgList;
}
- (void)doubleTapClick:(UITapGestureRecognizer *)tap
{
// 在这里实现点按两下的action操作
// 判断当前放大的比例
if (_scrCenter.zoomScale > kImgZoomScaleMin) {
[_scrCenter setZoomScale:kImgZoomScaleMin animated:YES];
}
else
[_scrCenter setZoomScale:kImgZoomScaleMax animated:YES];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
UIImageView *vCenter = [_imgViewDic valueForKey:@"imgCenter"];
return vCenter;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
if (self == scrollView) {
CGFloat width = self.frame.size.width;
int currentOffset = scrollView.contentOffset.x/width - 1;
[self setCurIndex:_curIndex + currentOffset];
// 返回三个视图中的中间位置
[scrollView setContentOffset:CGPointMake(width, 0) animated:NO];
[_scrCenter setZoomScale:kImgZoomScaleMin];
}
}
// 谦让双击放大手势
- (void)requireDoubleGestureRecognizer:(UITapGestureRecognizer *)tep{
[tep requireGestureRecognizerToFail:[[self gestureRecognizers] lastObject]];
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end这样，我们就完成了我们瀑布流图片编写。
