UICollectionView的基本用法及CollectionView實現(xiàn)多選

自定義cell的model

#import <Foundation/Foundation.h>
@interface MCellModel : NSObject
/** 被選中的次序 */
@property (nonatomic,assign) int selectedIndex;
/** 被選中的次序 */
@property (nonatomic,strong) NSIndexPath* indexPath;
@property (nonatomic,assign) BOOL isSelect;
/** 被選中的索引 */
@property (nonatomic,strong) NSString *selectIndex;
@end

自定義section的model

#import <Foundation/Foundation.h>
@interface SectionModel : NSObject
/** 分區(qū)頭部名稱 */
@property (nonatomic,strong) NSString * secTimeTitle;
/** 每個分組的數(shù)組 */
@property (nonatomic,strong) NSArray * itemsArr;
@end

自定義cell

#import <UIKit/UIKit.h>
#import "MCellModel.h"

@interface MMediaCollectionCell : UICollectionViewCell

/** cellModel */
@property (nonatomic,strong)  MCellModel * mCellModel;
/** 選中時的背景 */
@property (nonatomic,strong) UIImageView * selectBGImageV;
/** 選中時index */
@property (nonatomic,strong) UILabel * selecteIndexLabel;
@end

#import "MMediaCollectionCell.h"
@implementation MMediaCollectionCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
    self.backGroundColor = [UIColor orangeColor];
    _selectBGImageV = [[UIImageView alloc]init];
    _selecteIndexLabel = [[UILabel alloc]init];
    [_selectBGImageV addSubview:_selecteIndexLabel];
    [self addSubview:self.selectBGImageV];
    _selectBGImageV.hidden = YES;
    
}
return self;
}

- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;

_selectBGImageV.frame = self.bounds;
_selectBGImageV.layer.borderWidth = 5;
_selectBGImageV.layer.borderColor = [UIColor cyanColor].CGColor;
_selectBGImageV.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5];
_selecteIndexLabel.frame = CGRectMake(width/4, width/4, width/2, width/2);
_selecteIndexLabel.textAlignment = NSTextAlignmentCenter;
_selecteIndexLabel.font = [UIFont systemFontOfSize:25];
_selecteIndexLabel.textColor = [UIColor cyanColor];
}

- (void)setMCellModel:(MCellModel *)mCellModel
{
if (mCellModel.isSelect) {
    self.selecteIndexLabel.text = [NSString stringWithFormat:@"%d",mCellModel.selectedIndex];
    self.selectBGImageV.hidden = NO;
}else{
    self.selectBGImageV.hidden = YES;
}

}

控制器

- (void)viewDidLoad {
[super viewDidLoad]    
self.view.backgroundColor = [UIColor whiteColor];
[self setUpCollectionView]; 
}

- (void)setUpCollectionView{
UICollectionViewFlowLayout *flayout = [[UICollectionViewFlowLayout alloc]init];
flayout.itemSize = CGSizeMake(WWidth / 5, WWidth / 5);
flayout.minimumInteritemSpacing = 10;
flayout.minimumLineSpacing = 10;
_collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0,0, WWidth, WHeight) collectionViewLayout:flayout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.dataSource =self;
_collectionView.delegate = self;
_collectionView.showsVerticalScrollIndicator = NO;
//注冊cell及頭腳視圖
[_collectionView registerClass:[MMediaCollectionCell class] forCellWithReuseIdentifier:ID];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:HeaderID];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:FooterID];
_collectionView.autoresizingMask = NO;
_collectionView.allowsMultipleSelection = YES;//設(shè)置允許多選
[self.view addSubview:_collectionView];
}

pragma mark - UICollectionViewDataSource

// Section個數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return self.dataSource.count;
}

// section中Cell的個數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
SectionModel *secModel = self.dataSource[section];
return [[self.dataSource[section] itemsArr] count];
}

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

  MMediaCollectionCell *mCell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

SectionModel *secModel = _dataSource[indexPath.section];

MCellModel *model = secModel.itemsArr[indexPath.row];
cell.textLabel.text = model.showMessage;

return mCell;  
}

pragma mark - 頭腳視圖

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if (kind == UICollectionElementKindSectionHeader) {
    UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:HeaderID forIndexPath:indexPath];
    SectionModel *secModel = self.dataSource[indexPath.section];
    
    //解決重用問題
    if (header.subviews.lastObject!=nil) {
        [header.subviews.lastObject removeFromSuperview];
    }
    
    UILabel *sectionTitleLabel = [[UILabel alloc]initWithFrame:CGRectMake(15, 10, 200, 30)];
    sectionTitleLabel.text = @"hahaha";
    sectionTitleLabel.font = [UIFont systemFontOfSize:17];
    [header addSubview:sectionTitleLabel];
    return  header;
    
}else if(kind == UICollectionElementKindSectionFooter){
    
    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:FooterID forIndexPath:indexPath];
    return  footer;
}else{
    return nil;
}
}

pragma mark - UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {  
  return CGSizeMake(self.view.frame.size.width / 3 - 10, self.view.frame.size.width / 3 - 10);  
}  

// 每個cell上下左右相距
- (UIEdgeInsets)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(5, 5, 5, 5);
}

// 設(shè)置最小行間距细卧,也就是前一行與后一行的中間最小間隔
- (CGFloat)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 10;
}

// 設(shè)置最小列間距
- (CGFloat)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 10;
}

// section頭視圖的大小
- (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
return CGSizeMake(self.view.frame.size.width, 40);
}

// section尾視圖的大小
- (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
return CGSizeMake(self.view.frame.size.width, 40);
}

pragma mark - UICollectionViewDelegate

// 允許選中時筒占,高亮
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"%s", FUNCTION);
return YES;
}

// 高亮完成后回調(diào)
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {

}  

// 由高亮轉(zhuǎn)成非高亮
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {

}  

// 是否允許選中
- (BOOL)collectionView:(UICollectionView *)collectionViewshouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}

// 是否允許取消選中
- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}

// 選中操作
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
MMediaCollectionCell *cell = (MMediaCollectionCell *)[_collectionView cellForItemAtIndexPath:indexPath];
SectionModel *secModel = self.dataSource[indexPath.section];
MCellModel *itemModel = secModel.itemsArr[indexPath.row];
itemModel.isSelect = cell.isSelected;
itemModel.indexPath = indexPath;

itemModel.selectedIndex = self.selectedItemsArr.count +1;//放在添加到數(shù)組后面翰苫,否則第一個索引會為0
[self.selectedItemsArr addObject:itemModel];

cell.mCellModel = itemModel;
}  

// 取消選中操作
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
MMediaCollectionCell *cell = (MMediaCollectionCell *)[_collectionView cellForItemAtIndexPath:indexPath];

SectionModel *secModel = self.dataSource[indexPath.section];
MCellModel *deselectModel = secModel.itemsArr[indexPath.row];
deselectModel.isSelect = cell.isSelected;

//取消選中的item索引
int deselectedIndex = deselectModel.selectedIndex;

cell.mCellModel = deselectModel;
//取消選中的不是最后一個時,把取消選中的這個后面的所有item重新排序
if (deselectedIndex < self.selectedItemsArr.count) {
    for (int i = deselectedIndex; i<=self.selectedItemsArr.count; i++) {
       
        MCellModel *mdel = self.selectedItemsArr[i-1];
        mdel.selectedIndex-=1;
        NSIndexPath *indexP = mdel.indexPath;
        MMediaCollectionCell *refreshItem = (MMediaCollectionCell *)[_collectionView cellForItemAtIndexPath:indexP];
        refreshItem.mCellModel = mdel;
    }
}

[self.selectedItemsArr removeObjectAtIndex:(deselectedIndex-1)];

}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奏窑,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子盛卡,更是在濱河造成了極大的恐慌筑凫,老刑警劉巖并村,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滓技,死亡現(xiàn)場離奇詭異,居然都是意外死亡令漂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門荚孵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纬朝,“玉大人,你說我怎么就攤上這事判没。” “怎么了澄峰?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵辟犀,是天一觀的道長。 經(jīng)常有香客問我胞此,道長跃捣,這世上最難降的妖魔是什么夺蛇? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮刁赦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘丸升。我一直安慰自己牺氨,他們只是感情好墩剖,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布夷狰。 她就那樣靜靜地躺著,像睡著了一般沼头。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上土至,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天猾昆,我揣著相機與錄音,去河邊找鬼毡庆。 笑死,一個胖子當(dāng)著我的面吹牛毅否,可吹牛的內(nèi)容都是我干的蝇刀。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼捆探,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了黍图?” 一聲冷哼從身側(cè)響起奴烙,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎揩环,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丰滑,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡倒庵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了貌亭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡锄奢,死狀恐怖剧腻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情书在,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布栏账,位于F島的核電站栈源,受9級特大地震影響挡爵,放射性物質(zhì)發(fā)生泄漏甚垦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一闭翩、第九天 我趴在偏房一處隱蔽的房頂上張望迄埃。 院中可真熱鬧,春花似錦侄非、人聲如沸彩库。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眯搭。三九已至,卻和暖如春鳞仙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背棍好。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工借笙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人业稼。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像俯邓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子稽鞭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 概述在iOS開發(fā)中UITableView可以說是使用最廣泛的控件川慌,我們平時使用的軟件中到處都可以看到它的影子,類似...
    liudhkk閱讀 9,003評論 3 38
  • *7月8日上午 N:Block :跟一個函數(shù)塊差不多梦重,會對里面所有的內(nèi)容的引用計數(shù)+1亮瓷,想要解決就用__block...
    炙冰閱讀 2,477評論 1 14
  • 概述 UICollectionView是iOS開發(fā)中最常用的UI控件之一,可以用它來管理一組有序的不同尺寸的視圖蚓胸,...
    漸z閱讀 2,964評論 0 3
  • 前言 最近忙完項目比較閑除师,想寫一篇博客來分享一些自學(xué)iOS的心得體會,希望對迷茫的你有所幫助汛聚。博主非科班出身,一些...
    GitHubPorter閱讀 1,422評論 9 5
  • 旅業(yè)本身產(chǎn)業(yè)鏈很長叹哭,旅行社,批發(fā)商风罩,地接社一系列,旅游本身是個極為低頻的事超升,這意味著流量被行業(yè)巨頭壟斷,獲取和留存...
    ghuuj閱讀 275評論 0 1