iOS UIScrollView 3种分页方法，间隔实现

---

基础知识参考

http://tech.glowing.com/cn/practice-in-uiscrollview/

https://stackoverflow.com/questions/9367600/custom-uiscrollview-paging-with-scrollviewwillenddragging

方案一 PageEnable

http://www.cnblogs.com/JimmyBright/p/4324042.html
http://www.jianshu.com/p/9c1be359fd1b

关键点是：ScrollView PageEnable 翻页大小是ScrollView的bounds来的大小，在这个基础上须要一些 hacking 实现 bleeding 和 padding（即页与页之间有 padding，在当前页能够看到先后页的部份内容）

如下代码基于swift3,新建项目，替换ViewController内容便可运行，预览效果

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    
    
    private var contentScroll: UIScrollView!
    private let scrollHeight: CGFloat = 400
    private let appWidth: CGFloat = UIScreen.main.bounds.width
    private let appHeight: CGFloat = UIScreen.main.bounds.height
   
    private let padding: CGFloat = 10
    private let totalCount: Int = 9
    private var selectedIndex: Int = 0
    
    // 设置ScrollView frame 起始点和终点左边位于超出屏幕的左右两侧，
    // 从屏幕边缘到超出屏幕的终点之间的空隙，即是每两个view之间的间隔
    
    // PageEnable 按ScrollView 的frame宽度进行翻页，每次滚动frame的宽度，
    // add view 时，展现内容区域要设置在屏幕范围以内，空隙则有屏幕外的间隔造成
    
    // 既有一下关系：
    //  1. ScrollView.frame.width = 左侧间隙 + 屏幕的宽度 + 右侧间隙
    //  2. 首页的frame.origin.x 在左侧屏幕外面，是负值，保证首个元素和屏幕对齐
    //  3. 除第一个元素外，其他元素的左侧frame.origin.x 和前一个元素右侧终点x坐标重合,保证只有一个间隙,
    // 因为间隙是重合的，因此元素view宽度打满屏幕还好，若是不是打满屏幕的话点击事件处理是个麻烦事情
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.contentScroll = UIScrollView()
        self.contentScroll.delegate = self
        
        // 间隙的颜色
        self.contentScroll.backgroundColor = UIColor.lightGray
        self.contentScroll.isPagingEnabled = true
        
        // 计算总的view的宽度
        let totalFrameSize = (appWidth + (2*padding)) * CGFloat(totalCount)
        self.contentScroll.contentSize = CGSize(width: totalFrameSize, height: 0)
        
        self.contentScroll.frame = CGRect(x: -padding, y: (appHeight-scrollHeight)*0.5, width: appWidth + 2*padding, height: scrollHeight)
        
        self.view.addSubview(self.contentScroll)
        
        for index in 0...(totalCount - 1) {
            let btn = UIButton()
            btn.setTitle(String(index), for: .normal)
            btn.backgroundColor = UIColor.brown
            
            // 获取scroll view 的大小
            let bounds = self.contentScroll.bounds
           
            // 设定展现内容的view的frame宽度为：屏幕宽度
            var pageFrame: CGRect = bounds
            pageFrame.size.width = pageFrame.size.width - (2*padding)
            
            // 设定展现内容的view的frame的origin位置在屏幕x坐标系的左侧起始点
            pageFrame.origin.x = (bounds.size.width*CGFloat(index)) + padding
            btn.frame = pageFrame
            
            self.contentScroll.addSubview(btn)
        }
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        
    }
    
    
}

方案二 snap

这种方法就是在 didEndDragging 且无减速动画，或在减速动画完成时，snap 到一个整数页。核心算法是经过当前 contentOffset 计算最近的整数页及其对应的 contentOffset，经过动画 snap 到该页。这个方法实现的效果都有个通病，就是最后的 snap 会在 decelerate 结束之后才发生，总感受很突兀。

方案三 修改 targetContentOffset

oc:

http://tech.glowing.com/cn/practice-in-uiscrollview/

- (CGPoint)nearestTargetOffsetForOffset:(CGPoint)offset
{
    CGFloat pageSize = BUBBLE_DIAMETER + BUBBLE_PADDING;
    NSInteger page = roundf(offset.x / pageSize);
    CGFloat targetX = pageSize * page;
    return CGPointMake(targetX, offset.y);
}

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    CGPoint targetOffset = [self nearestTargetOffsetForOffset:*targetContentOffset];
    targetContentOffset->x = targetOffset.x;
    targetContentOffset->y = targetOffset.y;
}

swift3

public func scrollViewWillEndDragging(_ scrollView: UIScrollView ,withVelocity velocity: CGPoint, targetContentOffset: 
UnsafeMutablePointer<CGPoint>){  
let pageWidth = Float(appWidth + itemSpacing)
    let targetXContentOffset = Float(targetContentOffset.pointee.x)
    var newPage = Float(currentPageIndex)
      // I use this way calculate newPage:
    newPage = roundf(targetXContentOffset / pageWidth);
    
    // 如下方式在最后一页，左滑到最后一页时，左滑出现边角，而后在往右侧滑动，页面会直接跳动到倒数第二页，
    // 是因为在这里使用velocity.x判断向左右翻页并不科学
    //if velocity.x == 0 {
    //newPage = floor( (targetXContentOffset - Float(pageWidth) / 2) / Float(pageWidth))
    // + 1.0
    //} else {
    //    newPage = Float(velocity.x > 0 ? newPage + 1 : newPage - 1)
    //    if newPage < 0 {
    //        newPage = 0
    //    }
    //    if (newPage > contentWidth / pageWidth) {
    //        newPage = ceil(contentWidth / pageWidth) - 1.0
    //   }
    //}
    
    // 滑动距离过短时，没有动画效果，解决方法：
        targetContentOffset.pointee = CGPoint(x:scrollView.contentOffset.x, y: scrollView.contentOffset.y)
        
        let pageWidth = Float(appWidth + itemSpacing)
        let targetXContentOffset = Float(targetContentOffset.pointee.x)
        // let contentWidth = Float(collectionView!.contentSize.width)
    
        var newPage = Float(currentPageIndex)
        newPage = roundf(targetXContentOffset / pageWidth);
        
        let targetOffsetX = CGFloat(newPage * pageWidth)
        let newPosition = CGPoint (x: targetOffsetX, y: targetContentOffset.pointee.y)
        // 动画间隔一下避免冲突
        DispatchUtils.dispatchAfterGap {
            scrollView.setContentOffset(newPosition, animated: true)
        }

 }

滑动距离过短时，没有动画效果

• 一样的问题：
  http://www.jianshu.com/p/d4bbd4d93a21

• 解决问题：
  https://stackoverflow.com/questions/15250173/uiscrollview-does-not-always-animate-deceleration-when-overriding-scrollviewwill

  collectionView.decelerationRate = UIScrollViewDecelerationRateFast