iOS 实现微信读书的仿真翻页
先看效果
仿真翻页效果:
普通翻页效果:
实现方案
iOS 中实现翻页效果比较简单,直接使用系统提供的 UIPageViewController 即可做到。
UIPageViewController 是 UIKit 中的分页控制器,它允许用户通过横向或纵向滑动手势在多个页面(ViewController)之间切换,主要配置的两个属性如下:
1)UIPageViewControllerTransitionStyle
-
.pageCurl:仿真翻页 -
.scroll:类似 UIScrollView 自然滑动
2)UIPageViewControllerNavigationOrientation
-
.horizontal:左右翻页 -
.vertical:上下翻页
以仿真翻页配置为例子:
class BookReaderViewController: UIViewController {
// 模拟书籍数据
private let bookPages = [
"第一章:Swift 的起源\n\nSwift 是一种由 Apple 开发的强大且直观的编程语言...",
"第二章:UIKit 基础\n\nUIKit 提供了构建 iOS 应用程序所需的关键对象...",
"第三章:动画艺术\n\n核心动画 (Core Animation) 是 iOS 界面流畅的关键...",
"第四章:高级翻页\n\nUIPageViewController 是实现仿真翻页的神器...",
"终章:未来展望\n\n随着 SwiftUI 的普及,声明式 UI 正在改变世界..."
]
private var pageViewController: UIPageViewController!
override func viewDidLoad() {
super.viewDidLoad()
setupPageViewController()
}
private func setupPageViewController() {
// 关键设置:transitionStyle = .pageCurl (仿真翻页效果)
// navigationOrientation = .horizontal (水平翻页)
pageViewController = UIPageViewController(transitionStyle: .pageCurl,
navigationOrientation: .horizontal,
options: nil)
pageViewController.dataSource = self
pageViewController.delegate = self
// 设置初始页面
if let firstPage = getViewController(at: 0) {
pageViewController.setViewControllers([firstPage], direction: .forward, animated: false, completion: nil)
}
// 将 PageVC 添加到当前 VC
addChild(pageViewController)
view.addSubview(pageViewController.view)
pageViewController.view.frame = view.bounds
pageViewController.didMove(toParent: self)
// 解决仿真翻页背面颜色问题 (让背面也是纸张色,而不是默认的半透明或白色)
// 注意:这是一个比较 Hack 的方法,更完美的做法是自定义背面的 Layer
pageViewController.view.backgroundColor = UIColor(red: 248/255, green: 241/255, blue: 227/255, alpha: 1.0)
}
// 辅助方法:根据索引获取 VC
private func getViewController(at index: Int) -> BookPageViewController? {
guard index >= 0 && index < bookPages.count else { return nil }
return BookPageViewController(index: index, totalPage: bookPages.count, content: bookPages[index])
}
}
// MARK: - 3. DataSource 实现 (核心逻辑)
extension BookReaderViewController: UIPageViewControllerDataSource {
// 获取"上一页"
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
guard let currentVC = viewController as? BookPageViewController else { return nil }
let previousIndex = currentVC.pageIndex - 1
return getViewController(at: previousIndex)
}
// 获取"下一页"
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
guard let currentVC = viewController as? BookPageViewController else { return nil }
let nextIndex = currentVC.pageIndex + 1
return getViewController(at: nextIndex)
}
}
// MARK: - 4. Delegate (可选,用于处理翻页后的状态)
extension BookReaderViewController: UIPageViewControllerDelegate {
// 这里可以处理 spineLocation,例如横屏时显示双页
func pageViewController(_ pageViewController: UIPageViewController, spineLocationFor orientation: UIInterfaceOrientation) -> UIPageViewController.SpineLocation {
// 手机竖屏通常是单页 (.min)
return .min
}
}
如上不到百行的代码即可实现仿真翻页效果,手势在 UIPageViewController 中会自动处理,外部不用感知。
和 UITableView 使用类似,需要通过 UIPageViewControllerDataSource 来提供上一页和下一页的数据源,通过 UIPageViewControllerDelegate 来感知翻页时机。
UIPageViewControllerDelegate 主要提供三个时机:
1)willTransitionTo:当用户开始滑动翻页的时候触发,系统已经准备好目标页,通过该回调来告诉你将要显示哪个页面(pendingViewControllers)
/// pendingViewControllers: 将要显示的页面
func pageViewController(_ pageViewController: UIPageViewController,
willTransitionTo pendingViewControllers: [UIViewController])
2)didFinishAnimating:当用户的翻页动画结束时回调
/// finished: 动画是否完成
/// previousViewControllers: 原来显示的ViewController
/// completed: 最终是否翻页成功;比如滑一半又拖回去,不会真正翻页
func pageViewController(_ pageViewController: UIPageViewController,
didFinishAnimating finished: Bool,
previousViewControllers: [UIViewController],
transitionCompleted completed: Bool)
3)spineLocationFor:控制仿真书本翻页时 “书脊” 的位置,只在 UIPageViewControllerTransitionStyle 为 pageCurl 时有效
/// SpineLocation:
/// - none: 没书脊
/// - min: 书脊在左边(单页模式)
/// - mid: 书脊在中间(双页模式)
/// - max: 书脊在右边(单页模式)
func pageViewController(_ pageViewController: UIPageViewController,
spineLocationFor orientation: UIInterfaceOrientation)
-> UIPageViewController.SpineLocation
如果要配置普通翻页效果,只需要修改 UIPageViewController 的配置即可:
// Options: 设置页面之间的间距 (微信读书一般有 10-20pt 的间距)
let options: [UIPageViewController.OptionsKey: Any] = [
.interPageSpacing: 20
]
// 核心修改 1: transitionStyle 改为 .scroll
pageViewController = UIPageViewController(transitionStyle: .scroll,
navigationOrientation: .horizontal,
options: options)
另外翻页手势通常和系统的侧滑返回手势有冲突,可以手动禁用手势来解决;类似微信读书一样,在导航栏出现时才开启侧滑返回手势,否则禁用侧滑返回:
private func updateGesture() {
if isNaviBarHidden { // 导航栏隐藏:禁用侧滑,开启翻页手势
navigationController?.interactivePopGestureRecognizer?.isEnabled = false
for gesture in pageViewController.gestureRecognizers {
gesture.isEnabled = true
}
} else { // 导航栏显示:开启侧滑,禁用翻页手势
navigationController?.interactivePopGestureRecognizer?.isEnabled = true
for gesture in pageViewController.gestureRecognizers {
gesture.isEnabled = false
}
}
}