UICollectionView進(jìn)階之路（二）

前言

UICollectionView進(jìn)階之路一

上一篇介紹了UICollectionView的基礎(chǔ)和超級(jí)封裝，我們拋棄了UICollectionView繁瑣的數(shù)據(jù)源代理，雖然使用起來方便了很多，但還是有個(gè)大膽的想法，不寫數(shù)據(jù)源代理，把UICollectionView的組成分為一個(gè)個(gè)小插件（widget）拼接而成。
可以？
...........
不可以？
...........
當(dāng)然可以啦，（哈哈，有興趣的同學(xué)跟我一起來了解實(shí)現(xiàn)方法吧）

UICollectionView插件化（widget）組成

  • XWWidget,UICollectionView插件化的元件，負(fù)責(zé)整合每個(gè)插件的數(shù)據(jù)

  • UICollectionView+XWWidget，UICollectionView和XWWidget的直接交互，負(fù)責(zé)管理整合多個(gè)XWWidget，UICollectionView的數(shù)據(jù)源代理


    UICollectionView-XWWidget.png

XWWidget

  • XWWidget結(jié)構(gòu)
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
typedef enum : NSUInteger {
    XWWidgetStateDefault,      // 正常狀態(tài)
    XWWidgetStateRequsting,   // 正在請(qǐng)求刷新狀態(tài)
    XWWidgetStateRequestFail,  // 請(qǐng)求刷新失敗
    XWWidgetStateRequestSuccess,// 請(qǐng)求刷新成功
    XWWidgetStateRequestNoMoreData// 請(qǐng)求刷新無更多數(shù)據(jù)狀態(tài)
}   XWWidgetState;

@interface XWWidget : NSObject

@property (nonatomic , weak , readonly,nullable)  UICollectionView *collectionView;

@property (nonatomic , assign ,readonly)  XWWidgetState state; // 當(dāng)前請(qǐng)求狀態(tài)

/**
 *  一個(gè)secion時(shí)候設(shè)置
 */
@property (nonatomic , strong , nullable) NSObject * headerData; // 頭部視圖數(shù)據(jù)
@property (nonatomic , strong , nullable) NSMutableArray * cellDataList; // cell視圖模型數(shù)組
@property (nonatomic , strong , nullable) NSObject * footerData;       // 尾部視圖模型
@property (nonatomic , copy , nullable)   Class decorationViewClass; // 修視背景圖類

/**
 *  多個(gè)secion時(shí)候設(shè)置
 */
@property(nonatomic , strong , nullable) NSMutableArray * headerDataList;
@property(nonatomic , strong , nullable) NSMutableArray< NSMutableArray * > * multiCellDataList;
@property(nonatomic , strong , nullable) NSMutableArray * footerDataList;
@property(nonatomic , strong , nullable) NSMutableArray<Class> * decorationViewClassList;

/**
 刷新部件
 */
-(void) xw_reloadWidget;

/**
 頭部刷新請(qǐng)求回調(diào) 可重寫
 */
- (void)requestHeaderRefresh;

/**
 尾部刷新請(qǐng)求回調(diào) 可重寫
 */
- (void)requestFooterRefresh;

/**
 刷新請(qǐng)求完成調(diào)用
 @param state 請(qǐng)求結(jié)果
 */

-(void)requestFinishWithState:(XWWidgetState)state;

/**
 刷新請(qǐng)求完成 成功 調(diào)用
 */

-(void)requestSuccess;

/**
 刷新請(qǐng)求完成 失敗 調(diào)用
 */
-(void)requestFail;

/**
 刷新請(qǐng)求完成 沒有更多數(shù)據(jù) （也屬于成功） 調(diào)用
 */
-(void)requestNoMoreData;

@end

代碼注釋得很清楚，每一個(gè)XWWidget插件支持單個(gè)section和多個(gè)section，為了解耦，每個(gè)插件可以獨(dú)立實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求,你要做的是將頁(yè)面合理的分為幾個(gè)獨(dú)立的widget，這樣你就完成一半了。

UICollectionView+XWWidget

  • UICollectionView+XWWidget結(jié)構(gòu)
#import <UIKit/UIKit.h>
#import "XWWidget.h"

@interface UICollectionView (XWWidget)

/**
 刷新所有部件
 */
-(void) xw_reloadWidgets;

/**
 刷新部件
 */
-(void) xw_reloadWidget:(XWWidget *)widget;

/**
 添加一個(gè)部件
 */
- (void)xw_addWidget:(XWWidget *) widget;

/**
 插入一個(gè)部件
 */
- (void)xw_insertWidget:(XWWidget *) widget atIndex:(NSUInteger)index ;

/**
 刪除一個(gè)部件
 */
- (void)xw_removeWidget:(XWWidget *) widget;

/**
 刪除所有部件
 */
- (void)xw_removeAllWidgets;

/**
 頭部刷新
 */
-(void)xw_collectionViewHeaderRefresh;

/**
 加載更多
 */
-(void)xw_collectionViewFooterRefresh;

/**
 加載結(jié)束
 */
-(void)xw_endRefreshingWithWidgetState:(XWWidgetState)state;

@end


#import "UICollectionView+XWWidget.h"
#import <objc/runtime.h>
#import "UICollectionView+XW.h"

@interface UICollectionView ()

@property (nonatomic, strong)  NSMutableArray * xw_headerDataList;
@property (nonatomic, strong)  NSMutableArray * xw_cellDataList;
@property (nonatomic, strong)  NSMutableArray * xw_footerDataList;
@property (nonatomic , strong) NSMutableArray * xw_decorationViewClassList;
@property (nonatomic , strong) NSMutableArray * xw_oldSectionList;

@property(nonatomic, strong) NSMutableArray *xw_widgets;

@end

@implementation UICollectionView (XWWidget)


#pragma mark - XWCollectionViewDataSource

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

- (NSMutableArray *)cellDataListWithCollectionView:(UICollectionView *) collectionView{
    return self.xw_cellDataList;
}

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

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

#pragma mark - public

-(void) xw_reloadWidgets{
    
    [self.xw_headerDataList removeAllObjects];
    [self.xw_cellDataList removeAllObjects];
    [self.xw_footerDataList removeAllObjects];
    [self.xw_decorationViewClassList removeAllObjects];
    for (XWWidget * widget in self.xw_widgets) {
        [self.xw_headerDataList addObjectsFromArray:widget.headerDataList];
        [self.xw_cellDataList addObjectsFromArray:widget.multiCellDataList];
        [self.xw_footerDataList addObjectsFromArray:widget.footerDataList];
        [self.xw_decorationViewClassList addObjectsFromArray:widget.decorationViewClassList];
    }
    
    self.xw_dataSource = (id<XWCollectionViewDataSource>)self;
    dispatch_async(dispatch_get_main_queue(),^{
        [UIView performWithoutAnimation:^{
            //刷新界面
            [CATransaction begin];
            [CATransaction setDisableActions:YES];
            [self reloadData];
            [CATransaction commit];
        }];
        
    });
    
}

-(void) xw_reloadWidget:(XWWidget *)widget{
    
    [self xw_reloadWidgets];
}


- (void)xw_addWidget:(XWWidget *) widget{
    NSUInteger index = self.xw_widgets.count;
    [self xw_insertWidget:widget atIndex:index];
}

- (void)xw_insertWidget:(XWWidget *) widget atIndex:(NSUInteger)index {
    if ([widget isKindOfClass:[XWWidget class]] && self.xw_widgets.count <= index) {
        if ([self xw_containWidget:widget] == false) {
            [widget setValue:self forKey:@"collectionView"];
            [self.xw_widgets insertObject:widget atIndex:index];
            [self xw_delayReload];
        }
    }
}

- (void)xw_removeWidget:(XWWidget *) widget{
    if ([self.xw_widgets containsObject:widget]) {
        [self.xw_widgets removeObject:widget];
        [self xw_delayReload];
    }
}

- (void)xw_removeAllWidgets{
    if (self.xw_widgets.count) {
        [self.xw_widgets removeAllObjects];
        [self xw_delayReload];
    }
}

- (BOOL)xw_containWidget:(XWWidget *)widget{
    return [self.xw_widgets containsObject:widget];
}


- (BOOL)xw_containWidgetClass:(Class) widgetClass{
    for (XWWidget * sub in self.xw_widgets) {
        if ([sub isMemberOfClass:widgetClass]) {
            return true;
        }
    }
    return false;
}


-(void)xw_collectionViewHeaderRefresh{
    
    for (XWWidget * widget in self.xw_widgets) {
        [widget setValue:@(true) forKey:@"needRequest"];
        [widget requestHeaderRefresh];
    }
}


-(void)xw_collectionViewFooterRefresh{
    for (XWWidget * widget in self.xw_widgets) {
        [widget setValue:@(true) forKey:@"needRequest"];
        [widget requestFooterRefresh];
    }
}


-(void)xw_endRefreshingWithWidgetState:(XWWidgetState)state{
    
}

/**
 *  請(qǐng)求數(shù)據(jù)完畢時(shí)回調(diào)
 */
- (void)xw_requestFinish{
    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(reloadAllWidgetsIfNeed) object:nil];
    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(reloadData) object:nil];
    //    [self performSelectorOnMainThread:@selector(reloadAllWidgetsIfNeed) withObject:nil waitUntilDone:YES];
    [self performSelector:@selector(reloadAllWidgetsIfNeed) withObject:nil afterDelay:0];
    
    
}

-(void)reloadAllWidgetsIfNeed{
    BOOL need = true;
    for (XWWidget * widget in self.xw_widgets) {
        if (widget.state == XWWidgetStateRequsting) {
            need = false;
            break;
        }
    }
    if (need) {
        
        [self xw_reloadWidgets];
        [self xw_endRefreshingWithWidgetState:self.xw_state];

    }
}

#pragma mark - private

-(void) xw_delayReload{
    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(xw_reloadWidgets) object:nil];
    [self performSelector:@selector(xw_reloadWidgets) withObject:nil afterDelay:0];
}

#pragma mark - getter setter

- (XWWidgetState)xw_state{
    XWWidgetState state = XWWidgetStateDefault;
    for (XWWidget * widget in self.xw_widgets) {
        if (widget.state == XWWidgetStateRequsting) {
            return XWWidgetStateRequsting;
        }
    }
    for (XWWidget * widget in self.xw_widgets) {
        if (widget.state == XWWidgetStateRequestNoMoreData) {
            state = XWWidgetStateRequestNoMoreData;
            break;
        }
        if (widget.state == XWWidgetStateRequestSuccess) {
            state = XWWidgetStateRequestSuccess;
        }
        if (widget.state == XWWidgetStateRequestFail && state != XWWidgetStateRequestSuccess) {
            state = XWWidgetStateRequestFail;
        }
    }
    return state;
}

- (NSMutableArray *)xw_headerDataList{
    NSMutableArray * list = objc_getAssociatedObject(self, @selector(xw_headerDataList));
    if (!list) {
        list = [NSMutableArray new];
        objc_setAssociatedObject(self, @selector(xw_headerDataList), list, OBJC_ASSOCIATION_RETAIN);
    }
    return list;
}

- (void)setXw_headerDataList:(NSMutableArray *)xw_headerDataList{
    objc_setAssociatedObject(self, @selector(xw_headerDataList), xw_headerDataList, OBJC_ASSOCIATION_RETAIN);
}

- (NSMutableArray *)xw_footerDataList{
    NSMutableArray * list = objc_getAssociatedObject(self, @selector(xw_footerDataList));
    if (!list) {
        list = [NSMutableArray new];
        objc_setAssociatedObject(self, @selector(xw_footerDataList), list, OBJC_ASSOCIATION_RETAIN);
    }
    return list;
}

- (void)setXw_footerDataList:(NSMutableArray *)xw_footerDataList{
    objc_setAssociatedObject(self, @selector(xw_footerDataList), xw_footerDataList, OBJC_ASSOCIATION_RETAIN);
}

- (NSMutableArray *)xw_cellDataList{
    NSMutableArray * list = objc_getAssociatedObject(self, @selector(xw_cellDataList));
    if (!list) {
        list = [NSMutableArray new];
        objc_setAssociatedObject(self, @selector(xw_cellDataList), list, OBJC_ASSOCIATION_RETAIN);
    }
    return list;
}

- (void)setXw_cellDataList:(NSMutableArray *)xw_cellDataList{
    objc_setAssociatedObject(self, @selector(xw_cellDataList), xw_cellDataList, OBJC_ASSOCIATION_RETAIN);
}

- (NSMutableArray *)xw_decorationViewClassList{
    NSMutableArray * list = objc_getAssociatedObject(self, @selector(xw_decorationViewClassList));
    if (!list) {
        list = [NSMutableArray new];
        objc_setAssociatedObject(self, @selector(xw_decorationViewClassList), list, OBJC_ASSOCIATION_RETAIN);
    }
    return list;
}

- (void)setXw_decorationViewClassList:(NSMutableArray *)xw_decorationViewClassList{
    objc_setAssociatedObject(self, @selector(xw_decorationViewClassList), xw_decorationViewClassList, OBJC_ASSOCIATION_RETAIN);
}

- (NSMutableArray *)xw_widgets{
    NSMutableArray * widgets = objc_getAssociatedObject(self, @selector(xw_widgets));
    if (!widgets) {
        widgets = [NSMutableArray new];
        objc_setAssociatedObject(self, @selector(xw_widgets), widgets, OBJC_ASSOCIATION_RETAIN);
    }
    return widgets;
}

- (void)setXw_widgets:(NSMutableArray *)xw_widgets{
    objc_setAssociatedObject(self, @selector(xw_widgets), xw_widgets, OBJC_ASSOCIATION_RETAIN);
}

@end

UICollectionView+XWWidget結(jié)構(gòu)很好理解，具體代碼如上（，僅代表個(gè)人風(fēng)格，如有大神解決那里可以改善的可以聯(lián)系我，一起探討下）,就幾個(gè)方法，除了widget插件的管理，還有就是網(wǎng)絡(luò)請(qǐng)求，刷新，加載更多和網(wǎng)絡(luò)請(qǐng)求結(jié)束的回調(diào)。

實(shí)際應(yīng)用

  • 例如美團(tuán)的首頁(yè)，輪播圖為一個(gè)widget，分類為一個(gè)widget，下面的商品或者其他的為一個(gè)widget，每個(gè)widget互相獨(dú)立（網(wǎng)絡(luò)請(qǐng)求，和響應(yīng)時(shí)間獨(dú)立），然后你要做的是把這幾個(gè)widget拼接起來，不同的拼接順序會(huì)產(chǎn)生預(yù)想不到的效果。

  • UICollectionView插件化的使用可以超乎你的想象，你要你夠了解他，可以組合出各種使用可能

下面看具體實(shí)現(xiàn)代碼：

//weak弱引用
#define KWeakSelf __weak typeof(&*self) weakSelf = self
#import "XWWidgetViewController.h"
#import "XWWidgetMacros.h"
#import "XWTest1Widget.h"
#import "XWTest2Widget.h"

@interface XWWidgetViewController ()<XWCollectionViewDataSource,UICollectionViewDelegate>

@property (nonatomic,strong) UICollectionView *cv;

@end

@implementation XWWidgetViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self creatUI];
    
    // Do any additional setup after loading the view, typically from a nib.
}

-(void)creatUI{
    
    [self.view addSubview:self.cv];

}

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    
    NSLog(@"drag...");
    
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    NSLog(@"scroll-viewcontroller...");
}

-(UICollectionView *)cv{
    
    if (_cv == nil) {
        
        _cv = [UICollectionView createWithFlowLayout];
        _cv.frame = self.view.bounds;
        _cv.backgroundColor = [UIColor whiteColor];
//        _cv.alwaysBounceVertical = YES;
        [_cv xw_addWidget:[[XWTest1Widget alloc]init]];
        [_cv xw_addWidget:[[XWTest2Widget alloc]init]];
        [_cv.xw_delegates addObject:self];
    }
    return _cv;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
-(void)dealloc{
    
    NSLog(@"XWWidgetViewController dealloc");
}
/*
#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
  • XWTest1Widget
@interface XWTest1Widget ()

@end

@implementation XWTest1Widget

-(instancetype)init{
    
    if (self = [super init]) {
        
        [self creatCellData];
    }
    return self;
}

-(void)creatCellData{
    
    NSObject *header = [NSObject new];
    header.xw_height = 0.01;
    header.xw_width = [UIScreen mainScreen].bounds.size.width;
    header.cell_secionInset = UIEdgeInsetsMake(10, 0, 10, 0);
    header.cell_minimumLineSpacing = 10;
    header.cell_minimumInteritemSpacing = 10;
    
    self.headerData = header;
    
    NSMutableArray *cells = [NSMutableArray array];
    for (int i = 0; i < 20; i++) {
        
        [cells addObject:[[XWTest1Data alloc]init] ];
    }

    self.cellDataList = cells;
}

@end
  • XWTest2Widget
@interface XWTest2Widget ()

@end

@implementation XWTest2Widget

-(instancetype)init{
    
    if (self = [super init]) {
        
        [self creatCellData];
    }
    return self;
}

-(void)creatCellData{
    
    NSObject *header = [NSObject new];
    header.xw_height = 50;
    header.xw_width = [UIScreen mainScreen].bounds.size.width;
    header.cell_secionInset = UIEdgeInsetsMake(5, 0, 5, 0);
    header.cell_minimumLineSpacing = 5;
    header.cell_minimumInteritemSpacing = 5;
    
    self.headerData = header;
    
    NSMutableArray *cells = [NSMutableArray array];
    for (int i = 0; i < 20; i++) {
        
        [cells addObject:[[XWTest1Data alloc]init] ];
    }
    
    self.cellDataList = cells;
}

@end

從代碼可以看出代碼結(jié)構(gòu)很清晰，業(yè)務(wù)層面看不到UICollectionVie w繁瑣的數(shù)據(jù)源代理，當(dāng)然了點(diǎn)擊事件和其他代理可以在cell上實(shí)現(xiàn)也可以由具體業(yè)務(wù)實(shí)現(xiàn)，內(nèi)部也擴(kuò)展了多代理轉(zhuǎn)發(fā)機(jī)制。

寫在最后

UICollectionView插件化優(yōu)點(diǎn)
  • 代碼結(jié)構(gòu)清晰，由數(shù)據(jù)驅(qū)動(dòng)視圖（數(shù)據(jù)即視圖），解決控制器臃腫，代碼容易閱讀
  • 提高開發(fā)效率，項(xiàng)目中離不開列表，UITableView和UICollectionView的數(shù)據(jù)源代理幾乎無處不在，UICollectionView插件化很好的解決了這一痛點(diǎn)
  • 后期可維護(hù)性強(qiáng)，只要做好合理分widget，后期修改某個(gè)插件內(nèi)的內(nèi)容，或者新增刪除某個(gè)插件，只要管理widget即可
  • 可復(fù)用性強(qiáng)，有做過電商和內(nèi)容內(nèi)的項(xiàng)目都知道，往往某一塊內(nèi)容多處可見，這時(shí)候你只需要來個(gè)通用的Widget即可，哪里需要哪里add
閑言雜語

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

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

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,824評(píng)論 4贊 61
  • 忙里偷閑看了《驢得水》，這部片子有愛的美好，有人性的貪、嗔、癡。 民國(guó)時(shí)期幾個(gè)心懷教育夢(mèng)想的知識(shí)分子，在偏...
    金色麥子閱讀 312評(píng)論 0贊 0
  • 這個(gè)屬性能夠讓你身臨其境的理解背水一戰(zhàn)這個(gè)詞的意義 古時(shí)候打仗，經(jīng)常提到士氣，士氣這個(gè)詞 這個(gè)東西看不見摸不著，但...
    盧詩(shī)翰閱讀 548評(píng)論 1贊 5
  • 納蘭詹姆斯閱讀 168評(píng)論 0贊 0
  • 文丨少女多醬 圖丨網(wǎng)絡(luò) 13。 吃完晚飯之后，樹里也準(zhǔn)備離開了："那，寺尾先生，我就先告辭了……寺尾先生也別著急，...
    青貓醬閱讀 495評(píng)論 0贊 2

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