{"id":18991683,"url":"https://github.com/djs66256/ddcomponent","last_synced_at":"2025-04-22T11:41:41.333Z","repository":{"id":56907243,"uuid":"67229804","full_name":"djs66256/DDComponent","owner":"djs66256","description":"Using DDPresenter is better. Make a collection controller to several component, like IGList.","archived":false,"fork":false,"pushed_at":"2018-11-20T06:19:14.000Z","size":965,"stargazers_count":40,"open_issues_count":3,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T04:55:03.980Z","etag":null,"topics":["collectionview","component","iglistkit","list","objective-c"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/djs66256.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-02T14:34:24.000Z","updated_at":"2024-12-13T14:56:26.000Z","dependencies_parsed_at":"2022-08-21T03:20:53.108Z","dependency_job_id":null,"html_url":"https://github.com/djs66256/DDComponent","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djs66256%2FDDComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djs66256%2FDDComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djs66256%2FDDComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djs66256%2FDDComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djs66256","download_url":"https://codeload.github.com/djs66256/DDComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250236293,"owners_count":21397351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collectionview","component","iglistkit","list","objective-c"],"created_at":"2024-11-08T17:14:47.836Z","updated_at":"2025-04-22T11:41:41.288Z","avatar_url":"https://github.com/djs66256.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DDComponent\n拆分Collection为多个Component，类似IGList，可以将一个页面的业务拆分为多个模块，是一种模块化业务层的实现。\n\n# 场景\n\n一个页面复杂，内容多而且有明确的业务上的分割，并且有大量内容可以实现复用，如果使用原生CollectionView会产生大量if-else，并且会使Controller非常庞大。初衷是为了拆分Controller，后来在使用过程中用来拆分模块化业务，在目前的使用过程中还是非常的符合我们的业务。\n\n比如淘宝、考拉等以内容为主的平台，模块间相对独立，同时又有很多模块（推荐、相关、评论等）可以完全复用，就非常符合DDComponent的使用场景。和Instagram的`IGList`比较类似，两者分析会在[这篇文章](./CompareToIGList.md)中说明。\n\n# 安装\n\n### CocoaPods\n\n```\npod 'DDComponent'\n```\n\n### Carthage\n\n```\ngithub 'DDComponent'\n```\n\n# 使用\n\n设计之初考虑到减少学习成本，大部分接口都直接继承于系统接口，如果熟悉`UICollectionView`和`UITableView`编程的马上就能学会。\n\n```objc\n@interface YourComponent : DDCollectionViewSectionComponent\n@end\n\n@implementation\n\n- (instancetype)init\n{\n    self = [super init];\n    if (self) {\n        self.size = CGSizeMake(DDComponentAutomaticDimension, 44);\n        // config here. \n        // Remember self.collectionView is nil until it is added to root component.\n    }\n    return self;\n}\n\n- (void)prepareCollectionView {\n    [super prepareCollectionView];\n    // register your cell here.\n}\n\n- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {\n    return 1;\n}\n\n- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {\n    return 1;\n}\n\n- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {\n    return ... // Return your cell\n}\n\n@end\n```\n\n其他事件均和系统delegate方法一致。\n\n```objc\n- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {\n    // select item\n}\n- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {\n    // will display\n}\n```\n\n# 结构\n\n![](./Images/structure.png)\n\n1. 视图组件： 只负责视图展示，比如一个包含小列表的模块，或者仅仅只有一个元素的模块。只负责职责内的视图展示。\n2. 容器组件： 只负责组件间的组合，比如按照顺序或者空态等组合模式，当然最顶层的一个组件也是一个容器类组件。\n\n![](./Images/example.png)\n\n这是一个组装的例子。\n\n![](./Images/structure2.png)\n\n实际使用时我们所需要实现的，是视图组件部分，也就是上图红色部分。\n\n# 扩展\n\n如果需要扩展FlowLayout或者CollectionView的功能，增加delegate的方法，仅需要让`容器组件`将该回调传给子组件即可。\n\n# 注意\n\n优先使用属性来配置`size`, `inset`等属性，这样能够更灵活的使用。\n\n# 问题\n\n由于直接采用系统方法，所以`indexPath`代表的是collectionView的位置，并没有一一对应component数据源的`index`，所以使用过程中需要自己来判断数据源的`index`是否就是`indexPath.item`。\n\n# 版本记录\n\n最初使用swift做的demo，由于项目中使用的是OC，所以后来改为OC的版本\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjs66256%2Fddcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjs66256%2Fddcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjs66256%2Fddcomponent/lists"}