IOS-—UICollectionView使用綜述（一 ）（基礎篇--垂直列表方式，橫向相簿方式）
人生活在世上只有短短的幾十年，卻浪費了很多的時間去想許多半年內就會被遺忘的小事。實際上，世界上有的傷心事都是由一些小事引起的，諸如一點小小的傷害、一絲小小的屈辱等等。有意思的是，那些在圖書館、實驗室從事研究工作的人很少因憂慮而精神崩潰，因為他們沒有時間享受這種奢侈。憂慮最能傷害你的時候，不是在你行動時，而是在你悠閒的時候
效果展示 ：
1、簡述
這裡使用的是UICollectionView來實現的這種效果
2、storyboard與自定義cell方式實現
基本實現思路是：使用storyboard佈局方式（結合自定義CellView）來實現列表展示資料2.1 首先定義storyboard檔案中的內容
在這裡，我們在主檢視中直接拖入一個UICollcetionView控制元件，其實它就相當一個容器，同時它會被預設設定一種流水方式的佈局格式 UICollectionViewFlowLayout
在對應的主檢視控制器中分別設定 對應的UICollectionView 和UICollcetionViewFlowLayout的引用
2.2、自定義CellView展示條目
建立AppCell.h檔案 ，繼承於UICollcetionViewCell
在AppCell.m檔案中實現初始化方法
#import "AppCell.h" @implementation AppCell -(instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { //1、獲取Cell的Size CGSize cellSize = self.contentView.frame.size; //2、新增一個顯示標題的Title //2.1、建立Label UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, cellSize.width, 20)]; //2.2、設定預設顯示標題 titleLabel.text=@"神奇的小鎮"; //2.3、新增到Cell中去 [self.contentView addSubview:titleLabel]; //3、新增一個ImageView顯示圖片 //3.1、建立ImageView UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(0,25, cellSize.width, cellSize.height-25)]; //3.2、設定預設顯示的圖片 imageView.image = [UIImage imageNamed:@"aqs"]; //3.3、新增到Cell中 [self.contentView addSubview:imageView]; } return self; }
可以看到在這個自定義的Cell中，添加了一個用於顯示圖片的UIImageView 和一個用於顯示文字標題的UILabel，也就是說當我們的條目內容比較複雜的時候，可以使用這種方式來設定新增
2.3、設定檢視顯示
#import "ViewController.h" #import "AppCell.h" @interface ViewController ()<UICollectionViewDataSource> //對應storyboard中的UICollcetionView @property (weak, nonatomic) IBOutlet UICollectionView *mainCollectionView; //對應storyboard中UICollectionView 中的流水佈局FlowLayout @property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *mainFlowLayout; @end //重用識別符號 static NSString *ident=@"cell"; @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //設定代理 self.mainCollectionView.dataSource = self; //註冊Cell [self.mainCollectionView registerClass:[AppCell class] forCellWithReuseIdentifier:ident]; //設定Item的大小 self.mainFlowLayout.itemSize = CGSizeMake(self.view.frame.size.width-20, 200); } //組 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 1; } //列 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 30; } //檢視 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ AppCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:ident forIndexPath:indexPath]; if (cell == nil) { cell = [[AppCell alloc]init]; } cell.backgroundColor = [UIColor colorWithRed:248 green:248 blue:248 alpha:1]; return cell; } @end
2.3.1 檢視引用
首先在這裡定義聲明瞭mainCollectionView引用 和 mainFlowLayout引用，其分別指向第一步中建立的storyboard檔案中的UICollectionView 與UICollectionView中對應的流水佈局UICollectionViewFlowLayout
每一個UICollectionView必然對應一個佈局方式，其指定了UICollectionView中的Item的排列方式
在這裡預設設定了UICollectionViewFlowLayout流水式佈局方式
2.3.2 UICollectionView的相關設定
在4.1中我們談到在storyboard中預設設定了一個流水佈局方式，如果我們是在使用程式碼建立，那麼必須定義設定一種佈局方式，否則會丟擲異常；
同時也必須將UICollectionView中對應的Cell條目型別進行註冊，否則會丟擲指定異常
在上面我們還設定了UICollectionView的條目顯示大小 ，如果不進行設定，那麼其預設顯示大小 為 50 X 50
2.3.3 UICollectionView分組支援
UICollcetionView同時支援分組顯示功能 ，與UITableView的功能相似
3、storyboard與自定義xib方式實現
使用UICollectionView 與 自定義xib方式來實現的列表展示
其次這裡使用的是storyboard檔案方式定義規劃的佈局
3.1 自定義條目Cell 對應的XIB檔案
3.1.1 在xib檔案中，對應了控制器AppCell
3.1.2 xib檔案中分別設定規劃了一個用於顯示圖片的UIImageView 和一個用於顯示圖片標題的 UILabel
3.1.3 對應的控制器中也設定了相應的控制元件引用
AppCell.h 中
#import "AppCell.h"
@interface AppCell ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@end
@implementation AppCell
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
-(void)setImagPath:(NSString *)imagPath{
_imagPath = imagPath;
//設定ImageView
self.imageView.image = [UIImage imageNamed:imagPath];
//設定顯示標題
self.titleLabel.text = @"this is a text";
}
@end
可以看到在這裡重寫了imagPath的set方法，也就是說當呼叫appCell.imagPath時候，會執行到setImagPath方法，在這個方法中就將對應的資料設定顯示到對應的控制元件上。
3.2 UICollectionView的相關設定
#import "ViewController.h"
#import "AppCell.h"
@interface ViewController ()<UICollectionViewDataSource>
//對應storyboard中的UICollcetionView
@property (weak, nonatomic) IBOutlet UICollectionView *mainCollcetionView;
//對應storyboard中UICollectionView 中的流水佈局FlowLayout
@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *mainFlowLayout;
@end
//cell重用識別符號
static NSString *ident=@"cell";
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//設定Item的大小
self.mainFlowLayout.itemSize = CGSizeMake(self.view.frame.size.width-20, 180);
//設定代理
self.mainCollcetionView.dataSource = self;
//註冊Cell
UINib *cellNib = [UINib nibWithNibName:@"AppCell" bundle:nil];
[self.mainCollcetionView registerNib:cellNib forCellWithReuseIdentifier:ident];
}
//組
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
//列
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 30;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
AppCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:ident forIndexPath:indexPath];
if (cell == nil) {
cell = [[AppCell alloc]init];
}
//設定背景
cell.backgroundColor = [UIColor colorWithRed:248 green:248 blue:248 alpha:1];
//設定顯示資料
cell.imagPath = @"aqs";
return cell;
}
@end3.2.1 我們在使用UICollectionView的時候必須要對條目CellView進行註冊設定，而在這裡，則是先獲取對應的UINib,然後再呼叫UINib對應的方法對其進行註冊
3.2.2 在cellForItemAtIndexPath方法中，我們呼叫方法 cell.imagPayh 並對其進行賦值操作，會呼叫到AppCell對應的setImagPath方法，進行對相應的控制元件進行了賦值操作
4、程式碼方式建立 UICollectionView 與 自定義Cell
這裡使用的是程式碼方式建立 UICollectionView 與 自定義Cell
4.1 程式碼方式建立自定義Cell
AppCell.h
#import <UIKit/UIKit.h>
@interface AppCell : UICollectionViewCell
@end
AppCell.m
#import "AppCell.h"
@implementation AppCell
-(instancetype)initWithFrame:(CGRect)frame{
if (self=[super initWithFrame:frame]) {
//1、獲取Cell的Size
CGSize cellSize = self.contentView.frame.size;
//2、初始化一個ImageView
UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, cellSize.width, cellSize.height-20)];
//3、設定預設顯示圖片
imageView.image = [UIImage imageNamed:@"aqs"];
//4、將ImageView新增到Cell檢視中去
[self.contentView addSubview:imageView];
//5、建立UILabel顯示圖片的名稱
UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, cellSize.height-20, cellSize.width, 20)];
//6、設定顯示預設的文字
titleLabel.text = @"圖片";
//7、將label新增到Cell中
[self.contentView addSubview:titleLabel];
}
return self;
}
@end需要注意的是，在這裡AppCell要繼承於UICollectionViewCell
在initWithFrame方法中初始化相應的控制元件並設定其佈局位置與大小以及預設顯示的資料
4.2 程式碼方式建立UICollectionView
在對應的顯示顯示頁面的控制器中
#import "ViewController.h"
#import "AppCell.h"
@interface ViewController ()<UICollectionViewDataSource>
@end
//定義Cell重用識別符號
static NSString *ident = @"cell";
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//1、例項化一個流水佈局
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
//1-1、設定Cell大小
flowLayout.itemSize= CGSizeMake(self.view.frame.size.width-30, 100);
//1-2、設定四周邊距
flowLayout.sectionInset = UIEdgeInsetsMake(10, 15, 10, 15);
//1-3、設定最小列之間的距離
flowLayout.minimumLineSpacing = 10;
//1-4、設定最小行之間的距離
flowLayout.minimumLineSpacing = 20;
//2、例項化建立一個 UICollectionView
//UICollectionView必須有一個 flowLayout ，必須在例項化的時候進行設定
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
//3、設定背景為白色
collectionView.backgroundColor = [UIColor whiteColor];
//4、設定資料來源代理
collectionView.dataSource = self;
//新增到檢視中
[self.view addSubview:collectionView];
//註冊Cell檢視
[collectionView registerClass:[AppCell class] forCellWithReuseIdentifier:ident];
}
//組
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
//列
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 30;
}
//子View
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
AppCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ident forIndexPath:indexPath];
if (cell==nil) {
cell = [[AppCell alloc]init];
}
return cell;
}
@end4.2.1 值得注意的是每一個UICollectionView 必然對應著一個佈局方式 ，也就是說在建立UICollectionView的時候，必須指定相應的佈局方式，在這裡，我們首先建立了UICollectionViewFlowLayout流水佈局方式，然後在後續中指向於UICollcetionView的建立
4.2..2 必須要註冊UICollectionView 條目中使用到的Cell
<圖片來源 黑馬>
5.1 主檢視對應的storyboard檔案中
5.1.1 在這裡，顯示檢視中直接佈局UICollectionViewController，同時指向一個控制器，在控制中設定 UICollectionView 與UICollectionViewFlowLayout的引用
5.1.2 同時設定其中的Cell ，在這裡添加了一個用於顯示圖片的UIImageView 與顯示文字 標識的UILabel ,並設定引用相對應的控制器
5.2 自定義條目AppCell
AppCell.h
#import <UIKit/UIKit.h>
@interface AppCell : UICollectionViewCell
@property(copy,nonatomic) NSString *images;
@property(copy,nonatomic) NSString *indexs;
@end
AppCell.m
#import "AppCell.h"
@interface AppCell ()
//Cell 中對應顯示圖片的控制元件 UIImageView
@property (weak, nonatomic) IBOutlet UIImageView *image;
//Cell 中對應顯示文字的控制元件 UILabel
@property (weak, nonatomic) IBOutlet UILabel *lable;
@end
@implementation CellViewCollectionViewCell
-(void)setImages:(NSString *)images{
//設定顯示圖片
UIImage *image = [UIImage imageNamed:images];
_image.image = image;
}
-(void)setIndexs:(NSString *)indexs{
//設定顯示對應文字標識
_lable.text = indexs;
}
@end
在這裡AppCell繼承於UICollectionViewCell,其中定義的 images 與 indexs 分別為Cell對應的圖片地址與文字說明
在AppCell.m中重寫images 與 index 的set的方法，當在外界通過點語法來對其進行賦值操作的同時，賦值於控制元件。
5.3 主檢視對應的控制器
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UICollectionViewController
@end
ViewController.m
#import "ViewController.h"
#import "AppCell.h"
@interface ViewController ()<UICollectionViewDataSource>
//對應檢視中的UICollectionView 中的預設流水佈局
@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *flowlayout;
//對應檢視中的UICollectionView
@property (weak, nonatomic) IBOutlet UICollectionView *collectionViews;
//圖片路徑資料來源
@property(nonatomic,strong) NSArray *dataArray;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//設定背景
self.collectionView.backgroundColor = [UIColor whiteColor];
//設定大小
_flowlayout.itemSize = self.view.bounds.size;
//代理
self.collectionView.dataSource =self;
// 修改滾動方向
_flowlayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設定 行間距
_flowlayout.minimumLineSpacing = 0;
// 隱藏滾動條
_collectionViews.showsHorizontalScrollIndicator = NO;
// 設定分頁效果
_collectionViews.pagingEnabled = YES;
// 設定彈簧效果
_collectionViews.bounces = NO;
}
-(NSArray *)dataArray{
if (_dataArray==nil) {
// 建立臨時陣列
NSMutableArray *mutable = [NSMutableArray array];
// 載入所有圖片
for (int i = 0; i < 9; i++) {
// 拼接圖片名稱
NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i];
[mutable addObject:imageName];
}
// 賦值
_dataArray = mutable;
}
return _dataArray;
}
//
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
AppCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"aa" forIndexPath:indexPath];
// 取出圖片
cell.images = self.dataArray[indexPath.item];
cell.indexs = [NSString stringWithFormat:@"%lu",indexPath.row];
return cell;
}
@end
5.3.1 主檢視的控制器繼承於UICollectionViewController
5.3.2 在這裡我們設定了UICollectionView的背景顏色為白色，UICollectionView的預設背景顏色是黑色
5.3.3 同時我們設定了 檢視中UICollectionView對應的流水佈局相應Item的size為UICollectionView的size，而在這裡，UICollectionView為全屏，
5.3.4 通過設定UICollection的佈局UICollectionViewFlowLayout的滾動方式 scrollDirection 為垂直滾動
UICollectionViewScrollDirectionVertical 為垂直方向滾動，預設方式
UICollectionViewScrollDirectionHorizontal 為水平方向滾動
5.3.5 在這裡能過設定UICollectionView 的showHorizontalScrollIndicator 的值為NO ，則為不顯示水平方向滾動時的滾動條