iOS 心得二 UICollectionView的基本使用

偏执的太偏执、 2022-08-08 14:55 287阅读 0赞

自从ios6之后，苹果给出了这个类，可以使我们快速的块状布局。

废话不多说，直接上代码：

控制器.h

\#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>

//九宫格

@property(nonatomic,weak)UICollectionView \*collectionView;

//数组

@property(nonatomic,retain)NSArray \*array;

@end

控制器.m

\#import "ViewController.h"

\#import "MyCell.h"

@interface ViewController ()

@end

@implementation ViewController

\- (void)viewDidLoad \{

\[superviewDidLoad\];

//九宫格加载

\[selfloadCollectionView\];

//数组内容加载

self.array = @\[@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg"\];

\-(void)loadCollectionView

UICollectionViewFlowLayout \*flow = \[\[UICollectionViewFlowLayoutalloc\]init\];

flow.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3);

flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);

flow.minimumInteritemSpacing = 0;

flow.minimumLineSpacing = 0;

UICollectionView \*collectionView = \[\[UICollectionViewalloc\]initWithFrame:self.view.boundscollectionViewLayout:flow\];

collectionView.delegate = self;

collectionView.dataSource = self;

collectionView.backgroundColor = \[UIColorwhiteColor\];

\[self.view addSubview:collectionView\];

self.collectionView = collectionView;

//适配

\[collectionView setTranslatesAutoresizingMaskIntoConstraints:NO\];

//x

NSLayoutConstraint \*conx = \[NSLayoutConstraintconstraintWithItem:collectionView attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeLeftmultiplier:1.0f constant:0.0f\];

//w

NSLayoutConstraint \*conw = \[NSLayoutConstraintconstraintWithItem:collectionView attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeRightmultiplier:1.0f constant:0.0f\];

//y

NSLayoutConstraint \*cony = \[NSLayoutConstraintconstraintWithItem:collectionView attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeTopmultiplier:1.0f constant:100.0f\];

//h

NSLayoutConstraint \*conh = \[NSLayoutConstraintconstraintWithItem:collectionView attribute:NSLayoutAttributeBottomrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeBottommultiplier:1.0f constant:0.0f\];

//适配数组

NSArray \*array = @\[conx,cony,conw,conh\];

\[self.viewaddConstraints:array\];

//注册

UINib \*nib = \[UINibnibWithNibName:@"MyCell"bundle:nil\];

\[self.collectionViewregisterNib:nib forCellWithReuseIdentifier:@"cell"\];

\#pragma mark---

\#pragma mark----九宫格代理

\- (NSInteger)collectionView:(UICollectionView \*)collectionView numberOfItemsInSection:(NSInteger)section

return self.array.count;

\- (UICollectionViewCell \*)collectionView:(UICollectionView \*)collectionView cellForItemAtIndexPath:(NSIndexPath \*)indexPath

MyCell \*cell = \[collectionView dequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath\];

cell.icon.image = \[UIImageimageNamed:self.array\[indexPath.item\]\];

return cell;

@end

然后就是具体的item的自定义，这和表有一个区别，item必须自己nib去定义，然后在控制器里面注册，这是和表不同的

//注册

UINib \*nib = \[UINib nibWithNibName:@"MyCell" bundle:nil\];

\[self.collectionView registerNib:nib forCellWithReuseIdentifier:@"cell"\];

注册的时候\[UINib nibWithNibName:@"MyCell" bundle:nil\]里的mycell就是你nib的名字

\[self.collectionView registerNib:nib forCellWithReuseIdentifier:@"cell"\]，cell这个事在nib里面定义的，不是你随便起的名字你要注意，不然运行直接崩溃。他的原理就是和表一样的，只是创建了屏幕那么大的一块区域的item，当你滑动的时候item划上去的会进入一个队列，等你再往下滑的时候他不会重新加载只是从这个队列里取出item就行了。

还有一块就是UICollectionView是需要你来定义它的布局形式，苹果只提供了一种形式：流式布局UICollectionViewFlowLayout

流式布局系统有默认的大小和item之间的间距。当然你可以自己来改变，下面的代码就是改变的布局形式。

UICollectionViewFlowLayout \*flow = \[\[UICollectionViewFlowLayout alloc\]init\];

flow.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3);//这个是自定义item的大小

flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);//item与上左下右的间距

flow.minimumInteritemSpacing = 0;//item之间垂直方向最小间距

flow.minimumLineSpacing = 0;//item水平方向最小间距

下面给出自定义item的代码：

\#import <UIKit/UIKit.h>

@interface MyCell : UICollectionViewCell

//图片

@property (weak,  nonatomic) IBOutletUIImageView \*icon;