一个array中包含多个dictionary，字典中又包括组别的名字以及好友列表好友也用一个字典来表示，分别有名称是否在线以及头像图片名字。

之后我们开始写一个自定义的头部按钮来方便我们想要的布局

有一个BOOL型的成员_open来记錄button是否被点击的状态在点击时，左侧的图片有一个短暂的旋转动画效果

然后设置图片以及标题的位置

在drawRect中还绘制了底部的分割线以及咣泽，不过由于背景没有绘制渐变光泽效果有些突兀。

接着我们还需要自定义一个单元格类来接受和绘制数据

具体实现类似于上篇博愙中介绍的手工绘制单元格的内容

这里只看数据绑定的部分

在完成头部绘制以及单元格绘制的准备后，我们就可以在控制器中实现代理方法讲数据排版到界面上了。

点击的时候改变header的_open值然后刷新视图内容。

绑定数据并且显示单元格

这样我们的工作几乎就完成了下面来看一下效果图