UICollectionView進階之路（一）

UICollectionView基礎

  • UICollectionViewFlowLayout：視圖布局對象，繼承自UICollectionViewLayout。

所有的視圖布局對象都繼承自UICollectionViewLayout。若我們要自定義布局對象，我們一般繼承UICollectionViewFlowLayout就可以了。

  • 需要實現(xiàn)三個協(xié)議；UICollectionViewDataSource（數(shù)據(jù)源）、UICollectionViewDelegateFlowLayout（視圖布局）、UICollectionViewDelegate。

可以看得出，UICollectionView幾乎和UITableView一樣，但是視圖布局和裝飾視圖讓它更強大，UITableView能做到的UICollectionView都能做到，UICollectionView能做到的UITableView不一定能做到（這也是我一直選擇UICollectionView的原因之一）。

UICollectionView實現(xiàn)步驟

  1. UICollectionView創(chuàng)建及注冊
  2. UICollectionViewDataSource的實現(xiàn)
  3. UICollectionViewDelegateFlowLayout的實現(xiàn)（或者自定義UICollectionViewLayout實現(xiàn)）
  4. UICollectionViewDelegate的實現(xiàn)

熟悉UICollectionView的程序員都知道，實現(xiàn)過程很繁瑣，數(shù)據(jù)源代理看的眼花繚亂，有思想的程序員也許都會在想同樣的問題：

  1. 每次都要注冊很煩，是不是內(nèi)部可以根據(jù)某個標識判斷是否注冊及自動注冊呢？
  2. 為什么內(nèi)部不能根據(jù)我的數(shù)據(jù)計算幾行幾列，創(chuàng)建初始化視圖及視圖的大小，更高級的自動緩存高度呢？
  3. UICollectionViewDelegateFlowLayout的實現(xiàn)太麻煩了，要是可以不要寫那么多該多好啊

我也一樣是個有思想的碼農(nóng)（哈哈），一直在尋求可以同時解決這些痛處的方法，一次在和同學的聊天中，和同學聊到了數(shù)據(jù)即視圖的思想，視圖的布局都是由數(shù)據(jù)來驅(qū)動的，于是就有了 UICollectionView進階第一步，（以下都是個人想法，不喜勿噴，有更好的想法可以聯(lián)系我）

SuperCollectionView

  • SuperCollectionView的結構
SuperUICollectionView結構圖.png
  1. SuperCollectionView的發(fā)動機(數(shù)據(jù))：（NSObject+XWReuseData）
@interface NSObject (XW)

/**
 cell或者header,footer的高度，框架自動緩存
 */
@property (nonatomic, assign) CGFloat xw_height;

/**
 cell或者header,footer的寬度，框架自動緩存
 */
@property (nonatomic, assign) CGFloat xw_width;

/**
 cell或者header,footer的重用標識，框架自動緩存（可以為空，有默認值）
 cell的重用標識（默認數(shù)據(jù)去除Data改為Cell）
 header或者footer的重用標識 （默認數(shù)據(jù)去除Data改為View）
 */
@property (nonatomic, strong) NSString *reuseIdentifier;

/**
 cell或者header,footer是否重用
 */
@property (nonatomic, assign) BOOL unReusable;

#pragma mark -
#pragma mark - 以下屬性只對header或者footer生效
/**
 collectionView每個section的內(nèi)邊距
 */
@property(nonatomic , assign) UIEdgeInsets cell_secionInset;

/**
 collectionView每個section的邊距
 */
@property(nonatomic , assign) CGFloat cell_minimumLineSpacing;

/**
 collectionView每個item的邊距
 */
@property(nonatomic , assign) CGFloat cell_minimumInteritemSpacing;

@end

數(shù)據(jù)驅(qū)動視圖，一個個簡單的數(shù)據(jù)可以拼湊出乎意料的頁面，只有你想不到，沒有SuperCollectionView做不到的

  1. SuperCollectionView注冊：（UICollectionView+XWRegister）
@interface UICollectionView (XWRegister)
/**
 * 注冊列表緩存
 */
@property (nonatomic, strong) NSMutableArray *reuseIdentifierList;

-(UICollectionViewCell *)dequeueReusableCellWithIdentify:(NSString *)identify indexPath:(NSIndexPath *)indexPath reusable:(BOOL )reusable;

-(UICollectionReusableView *)dequeueReusableView:(NSString *)identify indexPath:(NSIndexPath *)indexPath kind:(NSString *)kind reusable:(BOOL )reusable;

@end

在XWCollectionViewDataSourceDelegate內(nèi)完成了緩存重用標識并判斷否注冊及自動注冊

  1. SuperCollectionView對外數(shù)據(jù)源接口協(xié)議
@protocol XWCollectionViewDataSource <NSObject>
@required
/**
 * cell數(shù)據(jù)源(支持多個section返回值為二重數(shù)組即可)
 */
- (NSMutableArray *)cellDataListWithCollectionView:(UICollectionView *)collectionView;
@optional
/**
 *  頭部數(shù)據(jù)源
 */
- (NSMutableArray *)headerDataListWithCollectionView:(UICollectionView *)collectionView;
/**
 *  尾部數(shù)據(jù)源
 */
- (NSMutableArray *)footerDataListWithCollectionView:(UICollectionView *)collectionView;
/**
 *  每個secion對應的修飾背景view
 */
- (NSMutableArray<Class> *)decorationViewClassListWithCollectionView:(UICollectionView *)collectionView;

@end;

我對UICollectionView的數(shù)據(jù)源及UICollectionViewDelegateFlowLayout進行了高度封裝（詳細的見XWCollectionViewDataSourceDelegate），對代理進行了一層轉發(fā)。

SuperCollectionView實戰(zhàn)

看了上面的是不是更加感興趣了（臥槽，還有這種操作），接下來就是見證奇跡的時刻，讓我們一起來看看現(xiàn)在是如何使用UICollectionView的吧


- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.cv];
    // Do any additional setup after loading the view, typically from a nib.
}
#pragma mark - XWCollectionViewDataSource

-(NSMutableArray *)headerDataListWithCollectionView:(UICollectionView *)collectionView{
    return self.headerDataList;
}

-(NSArray *)cellDataListWithCollectionView:(UICollectionView *)collectionView{
    return [[NSMutableArray alloc] initWithObjects:self.cellDataList,self.cellDataList,self.cellDataList, nil];
}

-(NSMutableArray *)footerDataListWithCollectionView:(UICollectionView *)collectionView{
    return self.footerDataList;
}

-(NSMutableArray<Class> *)decorationViewClassListWithCollectionView:(UICollectionView *)collectionView{
    return self.decroationViewClassList;    
}

#pragma mark - delegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

}

#pragma mark - getter
-(UICollectionView *)cv{
    if (!_cv) {
        _cv = [UICollectionView createWithFlowLayout];
        _cv.frame = CGRectMake(0, 0, self.view.bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        _cv.backgroundColor = [UIColor whiteColor];
        _cv.xw_dataSource = self;
        _cv.xw_delegate = self;
    }
    return _cv;
}

-(NSMutableArray *)headerDataList{
    if (!_headerDataList) {
        _headerDataList = [NSMutableArray new];
        [_headerDataList addObject:[ACollectionViewHeaderData new]];
        [_headerDataList addObject:[ACollectionViewHeaderData new]];
        NSObject * defaultData = [NSObject new];
        defaultData.cell_width = 0.001;
        defaultData.cell_height = 0.001;
        defaultData.cell_minimumLineSpacing = 10;
        defaultData.cell_minimumInteritemSpacing = 10;
        defaultData.cell_secionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        [_headerDataList addObject:defaultData];
    }
    return _headerDataList;
}
-(NSMutableArray *)cellDataList{
    if (!_cellDataList) {
        _cellDataList = [NSMutableArray new];
        ACollectionViewData * data = [ACollectionViewData new];
        data.color = [UIColor redColor];
        data.title = @"我是cell";
        [_cellDataList addObject:data];
        
        data = [ACollectionViewData new];
        data.color = [UIColor blueColor];
        data.title = @"我是cell";
        [_cellDataList addObject:data];
        
        data = [ACollectionViewData new];
        data.color = [UIColor grayColor];

        data.title = @"我是cell";
        [_cellDataList addObject:data];
        
        data = [ACollectionViewData new];
        data.color = [UIColor cyanColor];

        data.title = @"我是cell";
        [_cellDataList addObject:data];
        
        [_cellDataList addObject:data];
        data = [ACollectionViewData new];
        data.color = [UIColor blueColor];
        data.title = @"我是cell";
        [_cellDataList addObject:data];
    }
    return _cellDataList;
}

可以看出來data起到了很關鍵的作用，幾個簡單的data就可以驅(qū)動一個UICollectionView，這就是數(shù)據(jù)即視圖，這樣UICollectionView進階之路走出了第一步，幾行代碼輕輕松松就可以搞定UICollectionView（我上我也行，哈哈）。如果你喜歡你也可以試試這樣處理哦～

但這遠遠還不夠，既然你能把數(shù)據(jù)源代理簡化成這樣，那你是不是能直接不寫數(shù)據(jù)源代理呢，想想連數(shù)據(jù)源都不用寫了，那是種什么體驗啊，是的，沒錯，下一步要做的就是摒棄數(shù)據(jù)源（程序員：我不信，哈哈），敬請期待UICollectionView進階之路（二）。

GitHub: https://github.com/WangJianShi/UICollectionView-Widget

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容