Facebook-ComponentKit教程(三)微博Demo-上

"ComponentKit"是一个非常强大的描述性UI框架,由于国内教程不多在这里简单做个教程,抛砖引玉,希望未来能有更好更全面的教程。

俗话说百尺高楼平地起,如果你已经看过之前的两篇教程

Facebook-ComponentKit教程(一)准备工作

Facebook-ComponentKit教程(二)HelloWorld

那么可以说通往新世界的大门已经为你打开,那么我们就来模拟一个新浪微博的Demo。

首先通过抓包工具找到新浪微博的首页接口是:

https://api.weibo.cn/2/statuses/unread_friends_timeline?(出于信息安全考虑略去参数)

那么模拟网络请求的类也出来了

Facebook-ComponentKit教程(三)微博Demo-上_第1张图片
模拟网络请求


Facebook-ComponentKit教程(三)微博Demo-上_第2张图片
测试网络请求

简单测试一下,数据也都出来了,不知道各个字段含义不要紧,至少我们知道有15条新微博,而且保存到了statuses里,稍后我们回来再处理,先来写UI!

微博的结构大概是这样的


Facebook-ComponentKit教程(三)微博Demo-上_第3张图片
微博UI

为了方便理解我们把它分为4个区域,自上而下分别是Header区,Story区,Content区和Function区,所以我们也分别创建HeaderComponent,StoryComponent,ContentComponent,FunctionComponent以及 WeiBoComponent,这个用来承载上述4个子component的容器。

Facebook-ComponentKit教程(三)微博Demo-上_第4张图片
子控件


首先说下WeiboComponent(容器控件)


Facebook-ComponentKit教程(三)微博Demo-上_第5张图片
容器类

他的作用是将几个不同的区域组织成一个完成的Cell,我们看一下.mm中的实现

Facebook-ComponentKit教程(三)微博Demo-上_第6张图片
.mm文件

这里刚好我们学习一种新的Component的类型,它叫作StackLayoutComponent,如果你了解UIKit的UIStackView就不难理解他的原理了,它的style用来指定一个方向是横向堆叠还是纵向堆叠,因为我们刚才解释过了,4各区域是纵向堆叠出来的,我们就按部就班的把4个区域初始化出来并且叠上去(.direction其实可以不用填因为默认值就是纵向堆叠)。

在进入Header区讲解之前再来惠顾一下效果

Facebook-ComponentKit教程(三)微博Demo-上_第7张图片
Header区的边距

实际上Header区的最外层有看不到的边框,所以我们刚好可以学习第二种Component类型,InsertComponent,它的意思是内部有一个Component,然而这个component的距离上左下右的边距都是20.

Facebook-ComponentKit教程(三)微博Demo-上_第8张图片
Header.mm

下面开始填入Header中头像的编写


Facebook-ComponentKit教程(三)微博Demo-上_第9张图片
头像

这里又学到一个新的控件,NetworkImageComponent,顾名思义,它是资源来自网络的图片组件,需要传一个URL和尺寸,以及一个imageDownloader也就是说ComponentKit不像AsyndisplayKit提供默认的图片下载器,这里我们需要手动实现一个下载器用来下载和缓存图片(缓存功能暂不实现)


Facebook-ComponentKit教程(三)微博Demo-上_第10张图片
ImageDownloader.h
Facebook-ComponentKit教程(三)微博Demo-上_第11张图片
ImageDownloader.m

很简单吧,只需要实现下载和取消,两个方法,至于调用完全不需要你来考虑,这还是很人性化的。

运行一下,看效果,怎么样,有没有看到你关注的大V的头像,是不是有点小激动?!

Facebook-ComponentKit教程(三)微博Demo-上_第12张图片
试运行

如果你运行起来的效果和我不一样或者直接应用崩溃也不要着急,回去确认一下CollectionViewController的数据更新

Facebook-ComponentKit教程(三)微博Demo-上_第13张图片
下载后的回调

你要确认两个东西,第一,changeset是否插入了items同时也section。

第二对dataSource 应用更新是否是在主线程执行。

Facebook-ComponentKit教程(三)微博Demo-上_第14张图片
sizeForCell

最后改下Cell的大小,因为dataSource的约束不足它算出来的每个Cell只能是一屏的高,这里我们只是为了方便看效果临时写个150不碍事。

到这里如果有问题的话可以给我写邮件[email protected]。我看到的话一定会尽快回复。那么小司机们扶好坐稳,我们要加速了,下一期一个完整的weiboDemo即将呈现!

你可能感兴趣的:(Facebook-ComponentKit教程(三)微博Demo-上)