MXScroll 介绍 -- 混合 UIScrollView
的使用
使用场景
在实际的项目开发过程中发现,通常详情页有不少的产品都会选择上下滚动连带下部左右滚动的模式。由此就想整合一个页面框架,满足自由度高,能够自动适应高度变化这几个需求,最重要的是能够简单化配置即可使用。
页面结构
要考虑到上下左右变化,这次的选型是采用UIScrollView
嵌套的做法。主要嵌套的模式如下图所示:
结构分析
1. SegmentScrollView
主要是纵向的 UIScrollView
, 承接上下滚动的相关逻辑
2. HeaderView
部分顾名思义就是头部页面,此处页面可以为任意页面,如果是需要高度相应的,只需要实现相关协议代码即可。这个会在后面方法实现上面详细说到
3. ContentView
主要是横向的 UIScrollView
, 承接左右滚动的相关逻辑
4. SegmentView
主要是中段的 Segment
控件,这里提供了一个默认的控件,也可以自定义,自定义的时候实现相关协议方法即可。这个在后面的方法实现上面也会详细说道
项目地址
https://github.com/cillyfly/MXScroll
代码实现
协议
框架提供了两类协议,一个是数据源的协议,主要用来接收header
以及content
的内容,用以实现高度自适应。另一个是Segment
的协议,主要用来通知页面或者 segment
自身变动,实现联动.
1. 数据源协议 MXViewControllerViewSource
返回需要被监听高度的 View
。需要返回最内层的 View
。
@objc public protocol MXViewControllerViewSource {
@objc optional func viewForMixToObserveContentOffsetChange() -> UIView
@objc optional func headerViewForMixObserveContentOffsetChange() -> UIView?
}
上部 headerViewForMixObserveContentOffsetChange
当所使用的到header
是可变长度类型,主要对应的是WKWebView
这类,需要实现这个方法。目前支持的类型如下WKWebView
、UIWebView
、UIScrollView
、UIView
。
当使用到嵌套的View的时候,比如 WKWebView
嵌套在一个自定义 View
里面,在实现这个方法的时候也需要把WKWebView
返回。
下部 viewForMixToObserveContentOffsetChange
横向滚动部分的 view
是可变长度类型,主要应对的是UITableView
这类,需要实现这个方法。
2. 选择器协议 MXSegmentProtocol
需要自定义Segment
的时候,只需要实现这个协议就可以了
@objc public protocol MXSegmentProtocol {
typealias didIndexChange = (Int)->Void
//self change to tell other
var change:didIndexChange{get set}
// other change to tell self
func setSelected(index: Int, animator: Bool)
}
范例
WKWebView | UIIScrollView | UIView |
---|---|---|