iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Mobile Development

想知道自己iOS具現化系能力有多強嗎?實作幾個App就知道了系列 第 8

Day8-實作To-Do-List之更改表格排序及動畫(完結)

首先來看看完成排序功能會是什麼樣子:
排序功能

UITableViewDelegate內,有個方法叫作 tableView(_:moveRowAt:to:)定義這個方法內的實作,就可以執行排序功能。

 func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
           //拖動cell重新排序
           listDatas.insert(listDatas.remove(at: sourceIndexPath.row), at: destinationIndexPath.row)
       }

排序功能沒有想像中的困難,短短的程式碼就可以完成了,但是這只是排序本身的實作,我還需要右上角的排序按鈕的實作,我們一開始將它命名為sortBtn,並且你會發現點選之後,圖片會變更,並且進入編輯模式,如此才能使用排序功能。

現在來看看這個按鈕如何實作吧:

 @IBAction func sortBtn(_ sender: UIBarButtonItem) {
 //點選按鈕時,進入編輯模式,再點一次則退出編輯模式,toggle()是反相的意思。
        self.toDoListTableView.isEditing.toggle()
        
//按鈕本身的圖片,如果編輯模式是true,則變成退出的按鈕,如果編輯模式是false,則變成排序的按鈕
        sender.image = self.toDoListTableView.isEditing ? UIImage(systemName: "xmark.square") : UIImage(systemName: "arrow.up.arrow.down")

    }
}

現在已經實作完排序按鈕了,另外你可能會發現我的實作中,當表格重新刷新的時候,Cell是從左上角滑進來的,我將動畫秒數設定長一些,讓你們更好看清楚:
Cell進場動畫

要達到這樣的動畫效果其實很簡單,由於Cell要進場前,會呼叫tableView(_:willDisplay:forRowAt:)這個方法,所以我們只要將動畫的部分寫在這個方法內就好。

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        //定義初始位置及飛入動畫
        let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, -300, 0)

        //讓cell層執行動畫
        cell.layer.transform = rotationTransform
        
        // 定義最終狀態(動畫結束之後)
        UIView.animate(withDuration: 1, animations: { cell.layer.transform = CATransform3DIdentity })
        
    }

現在已經有了Cell滑入的動畫了,非常簡單吧。

目前實作的部分到這邊就算告一段落,但是有時候想要回到以前的某個功能修改,那怎麼辦呢?沒事,咱們可以使用Git以及GitHub來搭乘時光機回到過去,接下來幾篇文章將教大家如何使用Git以及GitHub,使用Xcode內建功能或者是使用終端機,兩種我都會提到。


上一篇
Day7-實作To-Do-List之儲存與讀取功能(UserDefault)
下一篇
Day9-浪子都可以回頭了,Git當然也可以!MacOS Git環境設定
系列文
想知道自己iOS具現化系能力有多強嗎?實作幾個App就知道了30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言