UIScrollView分页滑动视图

分页滑动的内容展示,ScrollView确实是个老朋友了。

在 iOS 开发里,多时候你都需要一个可以左右滑动、还能按页停下来的视图。比如做个图片轮播、APP 页,或者像电子书那样一页一页翻,这时候用UIScrollView加分页功能,真挺顺手的。

contentSize的设置是重点,要保证它是屏幕宽度的倍数,比如 375pt 宽度的屏幕,就得scrollView.contentSize.width = 375 * 页数。别忘了把pagingEnabled打开,scrollView.pagingEnabled = true,系统会帮你自动对齐整页,体验自然。

想监听页数变化,用UIScrollViewDelegatescrollViewDidEndDecelerating就行,滑完一页就能知道现在是第几页。如果还加了UIPageControl或自定义标签栏,那你只要根据点击的标签更新contentOffset,页面就切过来了。

布局上每页一个子视图,宽度和屏幕一样,像scrollView.addSubview(view)那样循环加进去。建议把每页的视图中心对齐,保证翻页时内容在正中间,看起来也舒服。

哦对了,如果你标签栏也带滑动手势,注意手势冲突。用gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer:去控制它俩能不能同时响应。搞定这个,滑动体验会更顺畅。

还有性能问题,一页一个视图的话,内存一下就顶满了。你可以搞个懒加载,只加载当前页和相邻页,其它的滑过去再加载,效率提升不少。

给你段 Swift 示例,跑起来看看效果:

let scrollView = UIScrollView()
scrollView.frame = view.bounds
scrollView.contentSize = CGSize(width: view.bounds.width * totalPages, height: view.bounds.height)
scrollView.pagingEnabled = true
scrollView.delegate = self

如果你页面切换逻辑比较复杂,或者想集成更多交互,记得把UICollectionView也考虑进去,参考下这篇文章也蛮不错。

zip
scrollViewTest.zip 预估大小:34个文件
folder
scrollViewTest 文件夹
file
.DS_Store 6KB
folder
scrollViewTest 文件夹
file
PDYScrollView.h 342B
folder
en.lproj 文件夹
file
InfoPlist.strings 45B
file
main.m 330B
file
PDYTabBar.m 5KB
file
scrollViewTest-Prefix.pch 382B
file
PDYTabBar.xib 16KB
folder
Images.xcassets 文件夹
folder
LaunchImage.launchimage 文件夹
file
Contents.json 442B
folder
AppIcon.appiconset 文件夹
file
Contents.json 333B
folder
12345 文件夹
file
user_my_fav_s@2x.png 4KB
file
star_menu_ico_fj_s@2x.png 5KB
file
star_menu_ico_fj@2x.png 5KB
file
user_my_fav@2x.png 4KB
file
user_my_infoico_s@2x.png 3KB
file
star_menu_ico_hot@2x.png 4KB
file
user_my_infoico@2x.png 3KB
file
star_menu_ico_hot_s@2x.png 4KB
file
PDYTabBar.h 2KB
file
PDYScrollView.xib 2KB
file
PDYScrollView.m 3KB
file
scrollViewTest-Info.plist 1KB
file
AppDelegate.h 270B
file
MyScrollView.h 204B
file
AppDelegate.m 2KB
file
MyScrollView.m 2KB
folder
scrollViewTestTests 文件夹
folder
en.lproj 文件夹
file
InfoPlist.strings 45B
file
scrollViewTestTests.m 650B
file
scrollViewTestTests-Info.plist 687B
folder
scrollViewTest.xcodeproj 文件夹
folder
project.xcworkspace 文件夹
file
contents.xcworkspacedata 159B
folder
xcuserdata 文件夹
folder
zmx.xcuserdatad 文件夹
file
UserInterfaceState.xcuserstate 25KB
folder
xcuserdata 文件夹
folder
zmx.xcuserdatad 文件夹
folder
xcdebugger 文件夹
file
Breakpoints_v2.xcbkptlist 91B
folder
xcschemes 文件夹
file
scrollViewTest.xcscheme 4KB
file
xcschememanagement.plist 576B
file
project.pbxproj 26KB
zip 文件大小:83.49KB