主要代码：
一、用cairo的接口绘制一个图形显示的范围
(资料图片仅供参考)
```
cairo_rectangle(cr, mask.x, mask.y, mask.w, mask.h);
cairo_clip(cr);
cairo_new_path(cr);
```
二、新建对像
将各个栏的效果包装成Cell类，如TitleCell、TitleBtnCell、imageCell类。
然后通过新建一个ListView，调用addcell类添加cell，形成QQ联系人栏目。
如下代码：
```
// -------------------------------------
// | | |
// | icon | Title |
// | | |
// -------------------------------------
class IconTitleCell: public TitleCell {
public:
IconTitleCell(ListView* p) { pListView = p; }
virtual ~IconTitleCell() {*** }
void setBgImage(std::string image);
void setTitleTextSize(int size) { m_titleFontSize = size; }
void setTitleTextColor(Colorf color) { m_titleColor = color; }
virtual void draw(***);
private:
virtual void _drawBg(***); //surface
virtual void _drawText(***); //surface
```
```
// -------------------------------------
// | | Title | |
// | icon | | button |
// | | subTitle | |
// -------------------------------------
class TitleBtnCell : public TitleCell {
public:
TitleBtnCell(ListView* p);
void setSubTitleTextSize(int size) { m_subTitleFontSize = size; }
void setSubTitleTextColor(tzu::Colorf color) { m_subTitleColor = color; }
virtual void draw(***);
private:
virtual void _drawTexts(***);
virtual void _drawIcon(***);
virtual void _drawButton(***);
```
三、调用touch事件
通过TouchEvent事件，移动所有cell对齐的坐标。形成上下滑动效果。
四、调用cairo合成的surface在opengl中显示
