[Swift通天遁地]9、拔劍吧-(17)建立一個三維摺疊樣式的頁面展開效果

時間 2019-11-12

標籤 swift 通天拔劍建立一個三維摺疊樣式頁面展開效果欄目 Swift 简体版

原文原文鏈接

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

目錄：[Swift]通天遁地Swiftgit

本文將演示實現單元格在擴展、收縮時摺疊式的炫目動態效果。github

GitHub項目：【Ramotion/folding-cell】,下載並解壓文件。swift

【FoldingCell】->【FoldingCell.swift】文件->將該文件拖動到項目中，點擊【Finish】數組

建立一個繼承自第三方類庫的單元格。微信

在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。app

【New File】->【Cocoa Touch】->【Next】->編輯器

【Class】：DemoCellide

【Subclass of】:FoldingCellpost

【Language】：Swift

->【Next】->【Create】

點擊打開【DemoCell.swift】

如今開始編寫代碼，建立自定義的單元格。

 1 import UIKit
 2 
 3 class DemoCell: FoldingCell
 4 {
 5     //添加一個標籤屬性，顯示單元格處於摺疊狀態時的標題文字。
 6   @IBOutlet weak var closeNumberLabel: UILabel!
 7     //添加一個標籤屬性，顯示單元格處於展開狀態時的標題文字。
 8   @IBOutlet weak var openNumberLabel: UILabel!
 9   
10     //添加一個默認值爲0的變量
11   var number: Int = 0
12   {
13     //當對該變量進行設置操做時，修改兩個標籤中的文字內容。
14     didSet
15     {
16       closeNumberLabel.text = "#\(String(number))"
17       openNumberLabel.text = "Item #\(String(number))"
18     }
19   }
20     
21     //當從故事板中加載完畢後，調用此方法
22   override func awakeFromNib()
23   {
24     //設置處於摺疊狀態時的單元格，
25     //將其前景視圖的圓角半徑設置爲10
26     foregroundView.layer.cornerRadius = 10
27     foregroundView.layer.masksToBounds = true
28     
29     super.awakeFromNib()
30   }
31   
32     //添加一個方法，用來設置三段摺疊動畫各自的時長。
33   override func animationDuration(_ itemIndex:NSInteger, type:AnimationType)-> TimeInterval
34   {
35     //初始化一個包含三個元素的數組
36     let durations = [0.26, 0.2, 0.2]
37     //並根據索引返回相應的時長
38     return durations[itemIndex]
39   }
40 }
41 
42 //添加一個針對當前類的擴展
43 extension DemoCell
44 {
45     //添加一個方法，用來響應故事板中的按鈕的點擊事件
46   @IBAction func buttonHandler(_ sender: AnyObject)
47   {
48     print("tap")
49   }
50 }

在左側的項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

如今開始編寫代碼，建立一個表格控件。

  1 import UIKit
  2 
  3 //將父類修改成表格視圖控制器
  4 class ViewController: UITableViewController {
  5     
  6     //添加一個常量屬性，做爲單元格在摺疊狀態時的高度。
  7     let kCloseCellHeight: CGFloat = 179
  8     //添加一個常量屬性，做爲單元格在展開狀態時的高度。
  9     let kOpenCellHeight: CGFloat = 488
 10     //添加一個常量屬性，做爲單元格的數量。
 11     let kRowsCount = 10
 12     //添加一個數組屬性，做爲每一個單元格各自的高度。
 13     var cellHeights = [CGFloat]()
 14     
 15     override func viewDidLoad()
 16     {
 17         super.viewDidLoad()
 18         //添加一個循環語句
 19         for _ in 0...kRowsCount
 20         {
 21             //做爲單元格在摺疊狀態時的高度，存入數組中。
 22             cellHeights.append(kCloseCellHeight)
 23         }
 24         //設置表格視圖的背景屬性，這裏使用一張圖片，做爲表格視圖的背景。
 25         self.tableView.backgroundColor = UIColor(patternImage: UIImage(named: "background")!)
 26     }
 27     
 28     //添加一個代理方法，用來設置單元格的行數
 29     override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
 30     {
 31         return 10
 32     }
 33     
 34      //添加一個代理方法，用來響應單元格即將展現時的事件
 35     override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
 36     {
 37         //將單元格的類型進行轉換
 38         guard case let cell as DemoCell = cell else {
 39             return
 40         }
 41         
 42         //當單元格處於摺疊狀態時
 43         if cellHeights[(indexPath as NSIndexPath).row] == kCloseCellHeight
 44         {
 45             //設置單元格對應的高度，在調整高度時不播放動畫。
 46             cell.selectedAnimation(false, animated: false, completion:nil)
 47         }
 48         else
 49         {
 50             //當單元格處於展開狀態時，
 51             //設置單元格對應的高度，在調整高度時一樣不播放動畫。
 52             cell.selectedAnimation(true, animated: false, completion: nil)
 53         }
 54         
 55         //清除單元格的背景顏色，並設置單元格屬性的值。
 56         cell.backgroundColor = UIColor.clear
 57         //當設置該屬性時，會自動調整標題文字的內容。
 58         cell.number = indexPath.row
 59     }
 60     
 61     //添加一個代理方法，用來初始化或複用單元格。
 62     override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
 63     {
 64         //從表格中得到指定複用標識符的單元格對象。
 65         let cell = tableView.dequeueReusableCell(withIdentifier: "FoldingCell", for: indexPath)
 66         
 67         return cell
 68     }
 69     
 70     //添加一個代理方法，用來設置單元格的高度。
 71     override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
 72     {
 73         //根據單元格的行數，從數組中得到單元格對應的高度的值。
 74         return cellHeights[(indexPath as NSIndexPath).row]
 75     }
 76     
 77     //添加一個代理方法，用來響應單元格的點擊事件。
 78     override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
 79     {
 80         //得到被點擊的單元格，並轉換單元格的類型。
 81         let cell = tableView.cellForRow(at: indexPath) as! FoldingCell
 82         
 83         //對於正在播放展開或摺疊動畫的單元格來講，
 84         //不須要執行後面的代碼。
 85         if cell.isAnimating()
 86         {
 87             return
 88         }
 89         
 90         //初始化一個默認值爲0的浮點變量，做爲動畫的時長。
 91         var duration = 0.0
 92         //處理單元格處於摺疊狀態時，被點擊的狀況。
 93         if cellHeights[(indexPath as NSIndexPath).row] == kCloseCellHeight
 94         {
 95             //當處於摺疊狀態的單元格被點擊時，修改數組中對應元素的值。
 96             cellHeights[(indexPath as NSIndexPath).row] = kOpenCellHeight
 97             //單元格開始播放展現的動畫。
 98             cell.selectedAnimation(true, animated: true, completion: nil)
 99             //設置動畫的時長爲0.秒
100             duration = 0.5
101         }
102         else
103         {
104             //當處於展開狀態的單元格被點擊時，修改數組中對應元素的值。
105             cellHeights[(indexPath as NSIndexPath).row] = kCloseCellHeight
106             //單元格開始播放摺疊的動畫。
107             cell.selectedAnimation(false, animated: true, completion: nil)
108             //設置動畫的時長爲0.8秒
109             duration = 0.8
110         }
111         
112         //建立一個指定時長、延時和緩衝屬性的視圖動畫，
113         //用來動態調整單元格的高度。
114         UIView.animate(withDuration: duration, delay: 0, options: .curveEaseOut, animations: { () -> Void in
115                //對錶格視圖進行刷新操做
116                 tableView.beginUpdates()
117                 tableView.endUpdates()
118             }, completion: nil)
119     }
120 }