Facebook-ComponentKit教程（三）微博Demo

2017-12-02 本文已影响0人软银

"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提供默认的图片下载器，这里我们需要手动实现一个下载器用来下载和缓存图片（缓存功能暂不实现）