"ComponentKit"是一个非常强大的描述性UI框架，由于国内教程不多在这里简单做个教程，抛砖引玉，希望未来能有更好更全面的教程。
俗话说百尺高楼平地起，如果你已经看过之前的两篇教程
Facebook-ComponentKit教程（一）准备工作
Facebook-ComponentKit教程（二）HelloWorld
那么可以说通往新世界的大门已经为你打开，那么我们就来模拟一个新浪微博的Demo。
首先通过抓包工具找到新浪微博的首页接口是：
https://api.weibo.cn/2/statuses/unread_friends_timeline?（出于信息安全考虑略去参数）
那么模拟网络请求的类也出来了
模拟网络请求
测试网络请求
简单测试一下，数据也都出来了，不知道各个字段含义不要紧，至少我们知道有15条新微博，而且保存到了statuses里，稍后我们回来再处理，先来写UI！
微博的结构大概是这样的
微博UI
为了方便理解我们把它分为4个区域，自上而下分别是Header区，Story区，Content区和Function区，所以我们也分别创建HeaderComponent，StoryComponent,ContentComponent,FunctionComponent以及 WeiBoComponent,这个用来承载上述4个子component的容器。
子控件
首先说下WeiboComponent（容器控件）
容器类
他的作用是将几个不同的区域组织成一个完成的Cell，我们看一下.mm中的实现
.mm文件
这里刚好我们学习一种新的Component的类型，它叫作StackLayoutComponent,如果你了解UIKit的UIStackView就不难理解他的原理了，它的style用来指定一个方向是横向堆叠还是纵向堆叠，因为我们刚才解释过了，4各区域是纵向堆叠出来的，我们就按部就班的把4个区域初始化出来并且叠上去（.direction其实可以不用填因为默认值就是纵向堆叠）。
在进入Header区讲解之前再来惠顾一下效果
Header区的边距
实际上Header区的最外层有看不到的边框，所以我们刚好可以学习第二种Component类型，InsertComponent，它的意思是内部有一个Component，然而这个component的距离上左下右的边距都是20.
Header.mm
下面开始填入Header中头像的编写
头像
这里又学到一个新的控件，NetworkImageComponent，顾名思义，它是资源来自网络的图片组件，需要传一个URL和尺寸，以及一个imageDownloader也就是说ComponentKit不像AsyndisplayKit提供默认的图片下载器，这里我们需要手动实现一个下载器用来下载和缓存图片（缓存功能暂不实现）
ImageDownloader.h
ImageDownloader.m
很简单吧，只需要实现下载和取消，两个方法，至于调用完全不需要你来考虑，这还是很人性化的。
运行一下，看效果，怎么样，有没有看到你关注的大V的头像，是不是有点小激动？！
试运行
如果你运行起来的效果和我不一样或者直接应用崩溃也不要着急，回去确认一下CollectionViewController的数据更新
下载后的回调
你要确认两个东西，第一，changeset是否插入了items同时也section。
第二对dataSource 应用更新是否是在主线程执行。
sizeForCell
最后改下Cell的大小，因为dataSource的约束不足它算出来的每个Cell只能是一屏的高，这里我们只是为了方便看效果临时写个150不碍事。
到这里如果有问题的话可以给我写邮件188079726@qq.com。我看到的话一定会尽快回复。那么小司机们扶好坐稳，我们要加速了，下一期一个完整的weiboDemo即将呈现！
网友评论