如何自定义一个iOS网格视图GridView

之前要做一个小功能,从网页提取图片并展示,如下图所示:

 1  2

 

 

 

 

 

 

 

 

 

 

 

 

 

这个控件类似于android中的GridView,如果使用UITableView来做,那非常简单。

但是,为了对iOS的UIKit的设计模式和实现思想有深入的理解,这里不使用UITableView,而是用UIScrollView从头做一个。暂且叫他WaterFallView。

那么,现在就得考虑如何设计WaterFallView的对外接口,以及内部实现细节:

  1. 对外接口要友好,最好类似于UITableView
  2. 需要考虑效率,实现UITableView中的子控件复用的机制等

整个模块的类图如下:

p3

 

 

 

 

 

 

 

 

 

 

各个类的对外接口:

p4

 

 

 

 

(WaterFallViewCell.h)

WaterFallViewCell表示一个块,和UITableViewCell类似,里面有一个属性reuseIdentifier用于将不同种类的cell区分开。另一属性WaterFallIndex和IndexPath类似,只是里面的row和column表示行和列。

p5

 

 

 

 

 

 

 

(WaterFallView.h)

p6

(WaterFallView.m)

WaterFallView继承自UIScrollView; WaterFallView在初始化方法中可指定列数column和代理;velocity是指每次滚动间隔的偏移值,便于使用者对不同的滑动速率进行相应的处理;dequeueReusableCellWithIdentifier:和waterfallView:cellForRowAtIndexPath:都类似于UITableView中相对应的方法,dequeueReusableCellWithIdentifier用于复用cell,waterfallView:cellForRowAtIndexPath:用于外部实现而内部在scrollViewDidScroll中调用,从该方法获取到indexpath上的一个cell。上图中的visibleCells用于保存目前可见的cell,reuseDict用于保存目前可复用的cell。

整个处理流程为:

WaterFallView初始化->根据用户提供的数据(gapWith、heightOfCell、waterfallView:cellForRowAtIndexPath:)产生新的cell来填充当前可见区域并将cell加入visibleCells->用户滑动屏幕->判断是否应该出现新的cell + 判断visibleCells中是否有cell消失出屏幕->将消失的cell加入字典reuseDict(reuseIdentifier=>cell)中 + 从reuseDict中取出可复用的cell并填充数据显示。

使用WaterFallView的方法和使用UITableView的方法类似,这里新建一个ImageWaterFallMyViewCell类来继承WaterFallViewCell并定义自己的样式等:

p7

 

然后新建一个ImageWaterFallViewController来控制一个WaterFallView并且实现它的代理WaterFallViewDelegate:

p8

 

 

 

 

以上就是整体结构,完整代码见我的github:

https://github.com/jasonhan/iOS-GridView/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>