★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）➤博客园地址：山青咏芝（）➤GitHub地址：➤原文地址： ➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★目录：
本文将演示如何创建一个漂亮的图像预览界面。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】
1 platform :ios, ‘12.0’2 use_frameworks!3 4 target 'DemoApp' do5 source 'https://github.com/CocoaPods/Specs.git'6 pod "PreviewTransition"7 end
根据配置文件中的相关设置，安装第三方类库。
安装完成之后，双击打开项目文件【DemoApp.xcodeproj】
Github项目：,下载并解压文件。
把类文件夹【PreviewTransition】拖动到自己的项目中。
点击【Finish】完成按钮，确认文件的导入。
创建一个显示图像列表的表格视图控制器，该控制器继承自第三方类库。
在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：DemoTableViewController
【Subclass of】:PTTableViewController
【Language】：Swift
->【Next】->【Create】
点击打开【DemoTableViewController.swift】
1 import UIKit 2 //引入已经安装的第三方类库 3 import PreviewTransition 4 5 public class DemoTableViewController: PTTableViewController { 6 7 //初始化一个数组对象，显示图像的名称和标题。 8 fileprivate let items = [("1", "River cruise"), ("2", "North Island"), ("3", "Mountain trail"), ("4", "Southern Coast"), ("5", "Fishing place")] 9 10 //添加一个代理方法，用来设置表格的行数11 public override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int12 {13 //在此设置表格拥有100个单元格14 return 10015 }16 17 //添加一个代理方法，用来处理单元格即将显示时的事件。18 public override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)19 {20 //获得当前的单元格，并转换成自定义的单元格对象。21 guard let cell = cell as? ParallaxCell else { return }22 23 //通过当前单元格的行数，以及数组的长度，计算并获得一个整形常量。24 let index = indexPath.row % items.count25 //通过计算所有的整形常量，获得数组中的图像名称和标题26 //所以表格的所有单元格，将重复显示五张图片。27 let imageName = items[index].028 let title = items[index].129 30 //从项目中加载指定名称的图片素材，并在单元格中显示加载的图片。31 if let image = UIImage(named: imageName)32 {33 cell.setImage(image, title: title)34 }35 }36 37 //添加一个代理方法，用来初始化或复用表格中的单元格。38 public override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell39 {40 //根据复用标识，从表格中获取可以复用的单元格，41 let cell: ParallaxCell = tableView.dequeueReusableCell(withIdentifier: "ParallaxCell", for: indexPath as IndexPath) as! ParallaxCell42 //并返回该单元格43 return cell44 }45 46 //添加一个代理方法，用来处理单元格的触摸事件47 public override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)48 {49 //将单元格被点击时，将往导航控制器的堆栈中，压入另一个作为图片详情页面的视图控制器。50 let storyboard = UIStoryboard(name: "Main", bundle: nil)51 //获得故事板中的指定唯一标识符的视图控制器。52 let detaleViewController: DemoDetailViewController = storyboard.instantiateViewController(withIdentifier: "DemoDetailViewController") as! DemoDetailViewController53 //往导航控制器的堆栈中，压入该视图控制器。54 pushViewController(detaleViewController)55 }56 } 创建另一个类文件。在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：DemoDetailViewController
【Subclass of】:PTDetailViewController
【Language】：Swift
->【Next】->【Create】
点击打开【DemoDetailViewController.swift】
现在开始编写详情视图控制器，在该页面添加一个后退按钮，
当点击该按钮时，返回上一个页面。
1 import UIKit 2 //在当前的类文件中，引入已经安装的第三方类库。 3 import PreviewTransition 4 import Pods_DemoApp 5 6 public class DemoDetailViewController: PTDetailViewController { 7 8 //给类添加一个按钮类型的属性。 9 var backButton: UIButton?10 11 public override func viewDidLoad() {12 super.viewDidLoad()13 14 //对按钮进行初始化操作。15 backButton = UIButton(frame: CGRect(x: 0, y: 0, width: 22, height: 44))16 //设置按钮在正常状态下的图片。17 backButton?.setImage(UIImage(named: "back"), for: .normal)18 //给按钮绑定点击事件。19 backButton?.addTarget(self, action: #selector(DemoDetailViewController.backButtonHandler) , for: .touchUpInside)20 21 //初始化一个工具条按钮，作为导航条左侧的按钮。22 let buttonItem = UIBarButtonItem(customView: backButton!)23 navigationItem.leftBarButtonItem = buttonItem24 25 let animation = CABasicAnimation(keyPath: "opacity")26 animation.duration = 0.327 animation.toValue = 0.028 animation.fromValue = 1.029 animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)30 animation.beginTime = CACurrentMediaTime()31 32 }33 34 //添加一个方法，用来响应按钮的点击事件。35 @objc func backButtonHandler()36 {37 popViewController()38 }39 } 在左侧的项目导航区，打开故事板文件。
在导航控制器的上方双击，往故事板中插入一个导航控制器。
打开检查器设置面板，点击属性检查器图标，进入属性设置面板。
勾选【Is Initial View Controller】是否初始视图控制器。
将导航控制器修改当前 的故事板的初始控制器。
选择右侧的视图，选择导航控制器的根视图控制器。
给根视图控制器绑定类文件。点击身份检查器图标，进入身份设置面板。
【Class】：DemoTableViewController
点击表格控件左侧的箭头，显示其中的单元格控件。
然后选择单元格控件，在类名输入框内输入第三方的类库。
【Class】:parallaxCell
点击属性检查器图标，进入属性设置面板。
在唯一标识符输入框内，输入复用单元格的唯一标识符。
【Identifier】:ParallaxCell
【Background】:设置背景颜色。
点击尺寸检查器图标，进入尺寸设置面板。
【Row Height】：240，设置行高。
选择编辑表格控件。点击属性检查器图标，进入属性设置面板。设置背景颜色。
点击控件库图标，在视图控制器控件的上方双击，往故事板中插入一个控制器。
选择新的视图控制器，将该视图控制器和细节视图控制器的类文件进行绑定。
【Class】：DemoDetailViewController
接着输入该视图控制器，在故事板中的唯一标识符。
从而在代码中获得视图控制器。
【Storyboard ID】:DemoDetailController
选择表格视图控制器中的表格控件。设置行高：
【Row Height】：240
选择导航条左侧的导航按钮，清空导航按钮上的标题文字。