先看要实现的效果
1552911813695.gif
使用例子直接看demo https://github.com/nullLuli/FlexPageView
下面说说FlexPageView构成
FlexPageView是像UITableView一样的控件，处理基础操作，并把数据源和UI留给外部定制。
FlexPageView 主要处理的事情：
- 下方content view左右滑动翻页时，上方的menuview应该根据滑动进度有相应的UI变化
- 上方menuview点击切换标签页时，下方的contentview可以接受到信息并切换到相应页面
FlexPageView由两部分组成，上方的菜单栏叫做FlexMenuView，下方内容叫 PageContentView
FlexMenuView
menu view考虑到以后的UI定制，比如在title上加个最新、最热、小红点之类的需求，采用了UICollectionView，这样可以自己在FlexPageView外面写cell和layout。既然要支持UI定制，数据源也需要支持定制。于是我定义了menuview cell样式协议、数据源协议、layout协议，如下所示
//menu view cell 协议
public protocol IMenuViewCell {
func updateScrollingUI(with precent: CGFloat)
func updateSelectUI()
func setData(data: IMenuViewCellData, option: FlexPageViewOption)
}
// cell 数据源协议
public protocol IMenuViewCellData {
var CellClass: UICollectionViewCell.Type { get }
var identifier: String { get }
}
// layout 协议
open class MenuViewBaseLayout: UICollectionViewLayout {
public weak var delegate: MenuViewLayoutProtocol?
}
public protocol MenuViewLayoutProtocol: class {
func collectionView(_ collectionView: UICollectionView, dataForItemAtIndexPath indexPath: IndexPath) -> Any
}
FlexMenuView通过reloadTitles方法载入数据，然后在cellForItemAt方法中使用数据源（IMenuViewCellData）中的CellClass和identifier给 FlexMenuView提供cell类型和复用ID，cell通过IMenuViewCell协议方法setData接受data的赋值；FlexMenuView是一个 UICollectionView ，通过自定义的layout计算cell位置和尺寸，layout是可以在FlexPageView外部重写的，layout中有个delegate可以用来从FlexMenuView中获取每个cell的数据，以此来计算每个cell的size
这样的设计可以支持多种data、cell类型
PageContentView
page content view需要支持左右滑动，所以就用了一个简单的scrollview来实现。在scrollview滚动的代理方法scrollViewDidScroll中更新menuview的动画，在scrollViewDidEndDragging或者scrollViewDidEndDecelerating中调用constructPages进行页面生成、销毁、断页。
-
动画：
现在需要滑动实时更新的动画有三个，一个是page之间的视差切换效果，一个是menuview中的title颜色、大小的改变，还有就是menuview中的滑动下标的frame改变
其中可定制的只有menuview中item的title颜色、大小改变是可定制的，menuview滑动下标可以选择隐藏，但不能从外部定制，视差效果可以设置程度，设置程度为0的时候就是没有视差效果
其他效果需要改动FlexPageView实现 -
缓存策略：
以当前页面为半径进行指定页数的缓存，比如cacheRange设置为1，就是当前页面的前一页和后一页会被保留，其他的页面则会被释放 -
预加载策略：
预加载策略同缓存策略：以当前页面为半径，进行指定页数的预加载，比如preloadRange设置成2，当前页面的前两页、后两页都会被加载出来。
需要注意的是，目前预加载是在缓存整理前面的，所以如果预加载范围比缓存范围大，随即就会以不在缓存中为由释放页面
网友评论