主要代码：

一、用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中显示

标签：