效果图
层级结构
1.手势同时识别
两个纵向滚动的视图可以同时识别拖拽手势才能根据偏移量控制是否可以滑动，当滑动的时候就可以分别在各自的scrollViewDidScroll方法中获取到各自的偏移量
extension SSMainScrollView: UIGestureRecognizerDelegate
{
//允许两个手势同时识别
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
}
2.联动控制
赋予两个scrollView各自属性canScroll，通过通知传递参数控制联动。
⚠️控制联动，不能通过控制scrollView.isScrollEnabled来实现，否则到临界点会卡顿不流畅，通过控制scrollView.contentOffset实现。
父控制器
extension SSInlineScrollViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetY: CGFloat = scrollView.contentOffset.y
if offsetY < 0 {
//1.下拉头图放大
if _isEnlarged {
let totalOffset = HEADERIMGVIEW_HEIGHT + abs(offsetY)
let ratio = totalOffset / HEADERIMGVIEW_HEIGHT
navigationBar.backgroundColor = UIColor(white: 1.0, alpha: 0.0)
headerView.snp.updateConstraints({ (make) in
make.top.equalTo(offsetY)
make.left.equalTo(-SCREEN_WIDTH * (ratio - 1) * 0.5)
make.width.equalTo(SCREEN_WIDTH * ratio)
make.height.equalTo(totalOffset)
})
}
}else{
//2.导航栏颜色渐变
var alpha: CGFloat = offsetY / (HEADERIMGVIEW_HEIGHT - NAVIGATIONBAR_HEIGHT)
alpha = min(alpha, 1.0)
navigationBar.backgroundColor = UIColor(white: 1.0, alpha: alpha)
if alpha == 1.0 {
navigationBar.backButton.setImage(UIImage(named:"personal_home_back_black_24x24_"), for: .normal)
}else{
navigationBar.backButton.setImage(UIImage(named:"personal_home_back_white_24x24_"), for: .normal)
}
}
//3.联动控制
if canScroll == "0" {
mainScrollView.contentOffset = CGPoint(x: 0, y: (HEADERIMGVIEW_HEIGHT - NAVIGATIONBAR_HEIGHT))
}else{
if offsetY >= (HEADERIMGVIEW_HEIGHT - NAVIGATIONBAR_HEIGHT) {
//子动 父不动
NotificationCenter.default.post(name: NSNotification.Name(rawValue: NOTIFICATION_SSContentVC_canScroll), object: nil, userInfo: [KEY_CANSCROLL : "1"])
mainScrollView.contentOffset = CGPoint(x: 0, y: (HEADERIMGVIEW_HEIGHT - NAVIGATIONBAR_HEIGHT))
}else{
//子不动 父动
NotificationCenter.default.post(name: NSNotification.Name(rawValue: NOTIFICATION_SSContentVC_canScroll), object: nil, userInfo: [KEY_CANSCROLL : "0"])
}
}
}
}
子控制器
extension SSContentViewController: UIScrollViewDelegate
{
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView == collectionView {
let offsetY = collectionView.contentOffset.y
if canScroll == "0" {
collectionView.contentOffset = CGPoint.zero
}else{
if offsetY >= 0 {
//子动 父不动
NotificationCenter.default.post(name: NSNotification.Name(rawValue: NOTIFICATION_SSInlineScrollVC_canScroll), object: nil, userInfo: [KEY_CANSCROLL : "0"])
}else{
//子不动 父动
collectionView.contentOffset = CGPoint.zero
NotificationCenter.default.post(name: NSNotification.Name(rawValue: NOTIFICATION_SSInlineScrollVC_canScroll), object: nil, userInfo: [KEY_CANSCROLL : "1"])
}
}
}
}
}
3.横向纵向拖动的区分
切换分页，在横向拖动的过程中又进行了纵向拖动，此时我们希望视图不会上下跑，只是左右滚动
//指定一个手势需要另一个手势执行失败才会执行，同时触发多个手势使用其中一个手势的解决办法
//有时手势是相关联的，如单机和双击，点击和长按，点下去瞬间可能只会识别到单击无法识别其他，该方法可以指定某一个 手势，即便自己已经满足条件了，也不会立刻触发，会等到该指定的手势确定失败之后才触发
mainScrollView.panGestureRecognizer.require(toFail: containerView.containerGestureRecongizer)
4.索引指示器
索引指示器可以用UIScrollView实现，也可以用UICollectionView实现，根据个人喜好，建议数据量多的话最好用UICollectionView了。
如果用UICollectionView实现，当手动滚动索引指示器，当把选中的索引滚出屏幕显示范围，再点选别的，此时可能会产生由于复用引发的崩溃和选中状态错乱，要进行判空处理，swift中可以设置cell为Optional可选型类型。
private var _selectedIndex: Int! = 0
var selectedIndex: Int? {
didSet {
//获取上一个选中的cell
let lastCell = segCollectionView.cellForItem(at: IndexPath.init(item: _selectedIndex, section: 0)) as? SSSegmentCell
lastCell?.isSelected = false
//赋新值
_selectedIndex = selectedIndex
//获取当前选中的cell
let currentCell = segCollectionView.cellForItem(at: IndexPath.init(item: _selectedIndex, section: 0)) as? SSSegmentCell
currentCell?.isSelected = true
//指示器动画
UIView.animate(withDuration: 0.25, animations: {
self.indicatorView.snp.updateConstraints { (make) in
make.left.equalTo(CGFloat(self._selectedIndex) * self.segCollectionItem_Width)
}
self.layoutIfNeeded()
}) { (_) in
}
//滚动到可显示范围
segCollectionView.scrollToItem(at: IndexPath.init(item: _selectedIndex, section: 0), at: .centeredHorizontally, animated: true)
//判断不在屏幕内的cell 更新选中状态
if lastCell == nil || currentCell == nil {
segCollectionView.reloadData()
}
}
}
5.控制整体上下滚动的底层控制器
该控制器内的滚动视图可以是UIScrollView，也可以是UITableView，就可以将整个containerView部分添加到cell.contentView上，一样可以实现效果。
