自定義UITableview左滑菜單按鈕

UITableview滑動菜單從iOS8開始就已經(jīng)推出,方便的接口和良好的用戶體驗,成為了iOS區(qū)別于安卓的又一個特性,很多App中都使用到了這個特性。不過,系統(tǒng)默認(rèn)的樣式太過簡陋,而Apple至今都沒有給出友好的自定義方法。查看了許多教程,往往都需要遍歷整個tableview,尤其是iOS11后對View的層級進(jìn)行了調(diào)整,使得遍歷查找更加麻煩。下面,我將提供一個更取巧的方法給大家。


屏幕快照 2018-01-12 10.06.03.png

方法其實很簡單,我們在StoryBoard或XIB中畫控件的時候,將我們的自定義View添加到Cell的右側(cè),給定約束,其中最重要的是該自定義View到Cell右側(cè)的距離。根據(jù)AutoLayout的設(shè)定,無論Cell在屏幕的哪里,右側(cè)的自定義View都會保持在Cell右側(cè)與其保持一個固定的距離。這樣,當(dāng)我們向左拖動Cell的時候,右側(cè)的View也會被一并拖過來。就是這!么!簡!單!
剩下的工作比較簡單,我們需要給UITableview添加editActions事件,否則Cell是無法拖動的。創(chuàng)建的UITableViewRowAction需要將backgroundColor設(shè)置為UIColor(red: 0, green: 0, blue: 0, alpha: 0)(不能設(shè)置為Clear,會顯示灰色)。

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        let action = UITableViewRowAction(style: .normal, title: nil) { (action, index) in
            self.delete(indexPath.row)
        }
        action.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
        return [action]
    }

這時候重新運(yùn)行App,你可能看到的還是一片空白,并沒有任何自定義View顯示出來。要知道為什么,我們需要了解ClipToBounds屬性。很多人在切圓角的時候用過它,他的功能就是將View邊界之外的View裁切掉。我們回到StoryBorad或XIB,分別點擊UITableViewCell和它的ContentView,將它們的ClipToBounds屬性取消,這樣,即便是在它們邊界之外的View(例如我們的自定義View)也能被渲染出來。
屏幕快照 2018-01-12 10.25.53.png

至此,很高興的告訴你,你的自定義按鈕已經(jīng)生效了。你應(yīng)該能看到類似下圖的效果。
IMG_F424D6ED641E-1.jpeg

等等,如果你使用iOS11之前的設(shè)備查看時,會發(fā)現(xiàn)這樣一個尷尬的情況。


IMG_0052.PNG

按鈕只顯示了一半,或者說,拖出來的距離非常小。我們打開視圖查看一下。


iOS10

UISwipeActionPullView非常小,而Cell被拖出來的距離應(yīng)該是由這個UISwipeActionPullView的大小決定的。那么如何控制UISwipeActionPullView的大小呢?系統(tǒng)沒有暴露出UISwipeActionPullView,難道還要遍歷一遍TableView?其實UITableViewRowAction有一個屬性title,這個UISwipeActionPullView的大小,或者說Cell被拖出來的距離,就是由title的長度決定的。聰明的你一定想到了,只需要給title賦一堆空格就能解決問題了。
    func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        let action = UITableViewRowAction(style: .normal, title: nil) { (action, index) in
            self.delete(indexPath.row)
        }
        action.title = "          "
        action.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
        return [action]
    }`

最后提一下文章開頭提到的iOS11對于側(cè)滑按鈕的變化。
我們嘗試打開Debug view Hierarchy來分別查看一下不同iOS版本下的系統(tǒng)層級。


iOS11

iOS10

我們發(fā)現(xiàn),iOS11中,UISwipeActionPullView的層級在UITableview之上,這與iOS11之前的版本不一樣(UISwipeActionPullView在UITableviewCell之上,且置于ContentView之下)。這個變化對用戶是無感的,但開發(fā)人員需要了解,以便在需要的時候進(jìn)行修改。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容