[关闭]
@buoge 2017-08-09T16:27:14.000000Z 字数 4434 阅读 2354

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

iOS


基础知识参考

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,在当前页可以看到前后页的部分内容)

image_1bl9u19kdktrsl05u9jf71aec9.png-101.4kB

以下代码基于swift3,新建项目,替换ViewController内容即可运行,预览效果
  1. import UIKit
  2. class ViewController: UIViewController, UIScrollViewDelegate {
  3. private var contentScroll: UIScrollView!
  4. private let scrollHeight: CGFloat = 400
  5. private let appWidth: CGFloat = UIScreen.main.bounds.width
  6. private let appHeight: CGFloat = UIScreen.main.bounds.height
  7. private let padding: CGFloat = 10
  8. private let totalCount: Int = 9
  9. private var selectedIndex: Int = 0
  10. // 设置ScrollView frame 起始点和终点左边位于超出屏幕的左右两侧,
  11. // 从屏幕边缘到超出屏幕的终点之间的空隙,便是每两个view之间的间隔
  12. // PageEnable 按ScrollView 的frame宽度进行翻页,每次滚动frame的宽度,
  13. // add view 时,展示内容区域要设置在屏幕范围之内,空隙则有屏幕外的间隔形成
  14. // 既有一下关系:
  15. // 1. ScrollView.frame.width = 左侧间隙 + 屏幕的宽度 + 右侧间隙
  16. // 2. 首页的frame.origin.x 在左侧屏幕外面,是负值,保证首个元素和屏幕对齐
  17. // 3. 除第一个元素外,其余元素的左侧frame.origin.x 和前一个元素右侧终点x坐标重合,保证只有一个间隙,
  18. // 由于间隙是重合的,所以元素view宽度打满屏幕还好,如果不是打满屏幕的话点击事件处理是个麻烦事情
  19. override func viewDidLoad() {
  20. super.viewDidLoad()
  21. self.contentScroll = UIScrollView()
  22. self.contentScroll.delegate = self
  23. // 间隙的颜色
  24. self.contentScroll.backgroundColor = UIColor.lightGray
  25. self.contentScroll.isPagingEnabled = true
  26. // 计算总的view的宽度
  27. let totalFrameSize = (appWidth + (2*padding)) * CGFloat(totalCount)
  28. self.contentScroll.contentSize = CGSize(width: totalFrameSize, height: 0)
  29. self.contentScroll.frame = CGRect(x: -padding, y: (appHeight-scrollHeight)*0.5, width: appWidth + 2*padding, height: scrollHeight)
  30. self.view.addSubview(self.contentScroll)
  31. for index in 0...(totalCount - 1) {
  32. let btn = UIButton()
  33. btn.setTitle(String(index), for: .normal)
  34. btn.backgroundColor = UIColor.brown
  35. // 获取scroll view 的大小
  36. let bounds = self.contentScroll.bounds
  37. // 设定展示内容的view的frame宽度为:屏幕宽度
  38. var pageFrame: CGRect = bounds
  39. pageFrame.size.width = pageFrame.size.width - (2*padding)
  40. // 设定展示内容的view的frame的origin位置在屏幕x坐标系的左侧起始点
  41. pageFrame.origin.x = (bounds.size.width*CGFloat(index)) + padding
  42. btn.frame = pageFrame
  43. self.contentScroll.addSubview(btn)
  44. }
  45. }
  46. func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
  47. }
  48. }

方案二 snap

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

方案三 修改 targetContentOffset

oc:

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

  1. - (CGPoint)nearestTargetOffsetForOffset:(CGPoint)offset
  2. {
  3. CGFloat pageSize = BUBBLE_DIAMETER + BUBBLE_PADDING;
  4. NSInteger page = roundf(offset.x / pageSize);
  5. CGFloat targetX = pageSize * page;
  6. return CGPointMake(targetX, offset.y);
  7. }
  8. - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
  9. {
  10. CGPoint targetOffset = [self nearestTargetOffsetForOffset:*targetContentOffset];
  11. targetContentOffset->x = targetOffset.x;
  12. targetContentOffset->y = targetOffset.y;
  13. }
swift3
  1. public func scrollViewWillEndDragging(_ scrollView: UIScrollView ,withVelocity velocity: CGPoint, targetContentOffset:
  2. UnsafeMutablePointer<CGPoint>){
  3. let pageWidth = Float(appWidth + itemSpacing)
  4. let targetXContentOffset = Float(targetContentOffset.pointee.x)
  5. var newPage = Float(currentPageIndex)
  6. // I use this way calculate newPage:
  7. newPage = roundf(targetXContentOffset / pageWidth);
  8. // 以下方式在最后一页,左滑到最后一页时,左滑出现边角,然后在往右侧滑动,页面会直接跳动到倒数第二页,
  9. // 是由于在这里使用velocity.x判断向左右翻页并不科学
  10. //if velocity.x == 0 {
  11. //newPage = floor( (targetXContentOffset - Float(pageWidth) / 2) / Float(pageWidth))
  12. // + 1.0
  13. //} else {
  14. // newPage = Float(velocity.x > 0 ? newPage + 1 : newPage - 1)
  15. // if newPage < 0 {
  16. // newPage = 0
  17. // }
  18. // if (newPage > contentWidth / pageWidth) {
  19. // newPage = ceil(contentWidth / pageWidth) - 1.0
  20. // }
  21. //}
  22. // 滑动距离太短时,没有动画效果,解决方法:
  23. targetContentOffset.pointee = CGPoint(x:scrollView.contentOffset.x, y: scrollView.contentOffset.y)
  24. let pageWidth = Float(appWidth + itemSpacing)
  25. let targetXContentOffset = Float(targetContentOffset.pointee.x)
  26. // let contentWidth = Float(collectionView!.contentSize.width)
  27. var newPage = Float(currentPageIndex)
  28. newPage = roundf(targetXContentOffset / pageWidth);
  29. let targetOffsetX = CGFloat(newPage * pageWidth)
  30. let newPosition = CGPoint (x: targetOffsetX, y: targetContentOffset.pointee.y)
  31. // 动画间隔一下避免冲突
  32. DispatchUtils.dispatchAfterGap {
  33. scrollView.setContentOffset(newPosition, animated: true)
  34. }
  35. }
滑动距离太短时,没有动画效果
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注