[Swift通天遁地]9、拔劍吧-(12)建立Preview-Transition圖像預覽界面

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-scczbuki-hv.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示如何建立一個漂亮的圖像預覽界面。

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】

1 platform :ios, ‘12.0’
2 use_frameworks!
3 
4 target 'DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     pod "PreviewTransition"
7 end

根據配置文件中的相關設置，安裝第三方類庫。

安裝完成以後，雙擊打開項目文件【DemoApp.xcodeproj】

Github項目：【Ramotion/preview-transition】,下載並解壓文件。

把類文件夾【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) -> Int
12     {
13         //在此設置表格擁有100個單元格
14         return 100
15     }
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.count
25         //經過計算全部的整形常量，得到數組中的圖像名稱和標題
26         //因此表格的全部單元格，將重複顯示五張圖片。
27         let imageName = items[index].0
28         let title = items[index].1
29         
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) -> UITableViewCell
39     {
40         //根據複用標識，從表格中獲取能夠複用的單元格，
41         let cell: ParallaxCell = tableView.dequeueReusableCell(withIdentifier: "ParallaxCell", for: indexPath as IndexPath) as! ParallaxCell
42         //並返回該單元格
43         return cell
44     }
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! DemoDetailViewController
53         //往導航控制器的堆棧中，壓入該視圖控制器。
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 = buttonItem
24         
25         let animation = CABasicAnimation(keyPath: "opacity")
26         animation.duration = 0.3
27         animation.toValue = 0.0
28         animation.fromValue = 1.0
29         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

選擇導航條左側的導航按鈕，清空導航按鈕上的標題文字。