AXPhotoViewer 3D Touch 预览实战实现 Peek Pop 图片预览【免费下载链接】AXPhotoViewerAn iOS/tvOS photo gallery viewer, useful for viewing a large (or small!) number of photos.项目地址: https://gitcode.com/gh_mirrors/ax/AXPhotoViewer在 iOS 开发中3D Touch 的 Peek Pop 交互能大幅提升相册浏览体验而 AXPhotoViewer 正是一个专为 iOS/tvOS 打造的图片浏览器库支持海量图片与 GIF 的流畅查看。本文将带你用 AXPhotoViewer 快速实现 3D Touch 图片预览从轻按 Peek 预览到重按 Pop 进入完整相册全程只需要两个代理方法和一个专用控制器几分钟即可上手。无论你是新手还是老手这份 AXPhotoViewer 教程都能让你少走弯路。什么是 3D Touch 预览与 Peek Pop3D Touch 是 iPhone 6s 及以后机型支持的压力感应交互核心包含两个动作Peek轻按预览手指轻按屏幕无需离开即可看到内容的浮动预览窗口Pop重按进入继续用力按下预览窗口切换为完整页面在相册类 App 中这种交互非常自然列表里轻按缩略图预览大图重按直接进入全屏浏览。AXPhotoViewer 为此专门封装了AXPreviewingPhotosViewController位于 AXPreviewingPhotosViewController.swift它内部使用FLAnimatedImageView展示图片并自动处理了图片加载、GIF 播放和预览尺寸计算开发者只需聚焦业务逻辑。准备工作安装 AXPhotoViewer 并搭建数据源AXPhotoViewer 通过 CocoaPods 安装在 Podfile 中添加一行即可同时可按需选择 SDWebImage、Kingfisher、PINRemoteImage 等网络集成platform :ios, 10.0 target YourApp do use_frameworks! pod AXPhotoViewer/PINRemoteImage end也可以直接克隆示例工程查看完整效果git clone https://gitcode.com/gh_mirrors/ax/AXPhotoViewer安装完成后先准备好照片数据。AXPhotosDataSource见 AXPhotosDataSource.swift负责管理照片数组和初始展示索引let photos [ AXPhoto(image: UIImage(named: photo1)), AXPhoto(url: URL(string: https://example.com/photo2.jpg)) ] let dataSource AXPhotosDataSource(photos: photos, initialPhotoIndex: 0)它同时支持本地图片、网络 URL 和 GIF 数据初始化时传入initialPhotoIndex即可指定预览起始页非常灵活。第一步注册预览上下文最快接入方法要在列表中启用 3D Touch 预览第一步是在traitCollectionDidChange中检测设备是否支持 Force Touch并注册预览代理。示例工程 TableViewController.swift 中提供了标准写法override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) if #available(iOS 9.0, *) { if self.traitCollection.forceTouchCapability .available { if self.previewingContext nil { self.previewingContext self.registerForPreviewing(with: self, sourceView: self.tableView) } } } }注意用traitCollectionDidChange注册而不是viewDidLoad这样当设备能力变化例如模拟器切换时能自动完成注册与注销避免在新机型上失效。注册成功后实现UIViewControllerPreviewingDelegate的两个方法即可完成整个 Peek Pop 流程。第二步实现 Peek 轻按预览Peek 阶段只需返回一个预览控制器。AXPhotoViewer 已经替我们写好了AXPreviewingPhotosViewController在previewingContext(_:viewControllerForLocation:)中根据触摸位置找到对应的单元格和图片视图然后创建预览控制器返回available(iOS 9.0, *) func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) - UIViewController? { guard let indexPath self.tableView.indexPathForRow(at: location), let cell self.tableView.cellForRow(at: indexPath), let imageView cell.contentView.viewWithTag(666) as? FLAnimatedImageView else { return nil } previewingContext.sourceRect self.tableView.convert(imageView.frame, from: imageView.superview) let dataSource AXPhotosDataSource(photos: self.photos, initialPhotoIndex: indexPath.row) return AXPreviewingPhotosViewController(dataSource: dataSource) }代码要点有两个设置sourceRect让预览窗口从当前缩略图位置平滑放大弹出这是 Peek 动画自然的视觉关键复用同一份数据源用initialPhotoIndex: indexPath.row保证预览的正是你按下的那张图预览控制器会自动调用networkIntegration.loadPhoto加载图片加载期间显示占位尺寸加载完成后更新preferredContentSize见 AXPreviewingPhotosViewController.swift让预览窗口贴合图片比例支持竖图、横图和 GIF。第三步实现 Pop 重按进入完整相册Pop 阶段继续用力按压要做的同样简单把预览控制器升级成完整的AXPhotosViewController。AXPhotoViewer 专门提供了从预览控制器直接构造全屏浏览器的初始化方法available(iOS 9.0, *) func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) { if let previewingPhotosViewController viewControllerToCommit as? AXPreviewingPhotosViewController { self.present(AXPhotosViewController(from: previewingPhotosViewController), animated: false) } }AXPhotosViewController(from:)有三个重载版本见 AXPhotosViewController.swift分别支持自定义AXPagingConfig和AXTransitionInfo其中AXPagingConfig控制分页方向横向/纵向、图片间距和自定义加载视图AXTransitionInfo控制呈现/退出动画包括起始视图、动画时长和交互式下滑关闭更贴心的是这个构造方法内部会调用ax_syncFrames把预览图片无缝同步到全屏页面Pop 过渡不会闪跳动画衔接顺滑。数据源和网络集成也会自动继承预览控制器的配置无需重复创建。进阶优化让 3D Touch 预览更丝滑掌握基础流程后这几个 AXPhotoViewer 细节能帮你把预览体验打磨到接近系统相册1. 设置加载视图与预取策略在创建AXPagingConfig时指定loadingViewClass配合AXPhotosDataSource的prefetchBehavior.conservative、.regular、.aggressive三档控制图片预取数量兼顾流畅度与流量消耗let pagingConfig AXPagingConfig(loadingViewClass: CustomLoadingView.self) let dataSource AXPhotosDataSource(photos: photos, initialPhotoIndex: 0, prefetchBehavior: .aggressive)2. 处理 GIF 动图预览AXPreviewingPhotosViewController基于FLAnimatedImageView支持动图即时预览。需要让列表缩略图与预览同步播放时可以参考示例工程中的loadContent方法把FLAnimatedImage直接赋值给imageView.animatedImage。3. 自定义网络集成AXPhotoViewer 的架构让图片下载与 UI 完全解耦只需实现AXNetworkIntegrationProtocol见 AXNetworkIntegrationProtocol.swift即可接入任意图片缓存方案预览控制器会通过代理回调自动更新加载状态。4. 注意设备兼容3D Touch 仅在支持 Force Touch 的设备上可用务必用forceTouchCapability .available做运行时判断并保留点击单元格进入相册的常规入口作为降级方案保证无压力感应机型也能正常浏览。总结借助 AXPhotoViewer实现 3D Touch 的 Peek Pop 图片预览只需三步注册预览上下文、返回AXPreviewingPhotosViewController、在 commit 时升级为AXPhotosViewController。整套方案从图片加载、GIF 播放到转场动画均由库封装完成代码量极少且易于维护。如果你的 App 需要高质量的图片浏览体验不妨直接参考示例工程 TableViewController.swift 和核心源码 AXPhotosViewController.swift半小时内就能把轻按预览、重按全屏的丝滑交互集成到自己的项目中。【免费下载链接】AXPhotoViewerAn iOS/tvOS photo gallery viewer, useful for viewing a large (or small!) number of photos.项目地址: https://gitcode.com/gh_mirrors/ax/AXPhotoViewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考