UITableView 編輯模式

1、tableView 的編輯模式

進入編輯模式

代碼體現

// 設置 editing 屬性tableView?.editing =true// 這個設置的時候是有動畫效果的tableView.setEditing(true, animated:true)// 我一般喜歡的設置方式 (寫在 btn 或者 item 的監聽方法里面)// 實現編輯模式和非編輯模式的切換tableView.editing? = !tableView.editing tableView.setEditing(!tableView.editing, animated:true)

@IBActionfunceditItemAction(sender: AnyObject){? ? ? ? tableView.editing? = !tableView.editing//? ? ? ? tableView.setEditing(!tableView.editing, animated: true)}

效果圖

沒有動畫效果

tableView.editing? = !tableView.editing

有動畫效果

tableView.setEditing(!tableView.editing, animated: true)

2、 設置某一行能夠進行編輯

cell 的默認編輯模式是 delete

// Individual rows can opt out of having the -editing property set for them. If not implemented, all rows are assumed to be editable.// 單行能夠可選的設置編輯1.? 設置 tableView 的 editing 屬性2.? 實現這個方法// tableView 的某一行能夠進行編輯模式// 這個方法不實現,默認是每一行都進入編輯模式optionalpublicfunctableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath)->Bool

@IBActionfunceditItemAction(sender: AnyObject){? ? ? ? tableView.setEditing(!tableView.editing, animated:true)}// 這是一個數據源方法// 設置 tableView 那一行進入編輯模式functableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath)->Bool{// 雙數 row 行進入編輯模式ifindexPath.row %2==0{returnfalse}returntrue}

3.gif

3、 設置某一行編輯模式的樣式

cell 編輯模式枚舉

publicenumUITableViewCellEditingStyle:Int{caseNone// 正常模式 (這一個主要用于 cell 的移動)caseDelete// 刪除模式caseInsert// 插入模式}

cell 編輯模式設置

// Allows customization of the editingStyle for a particular cell located at 'indexPath'. If not implemented, all editable cells will have UITableViewCellEditingStyleDelete set for them when the table has editing property set to YES.// 允許用戶通過實行這個方法來自定義 cell 的編輯樣式, 如果沒有實現這個方法, 所有的 cell 的默認編輯樣式為 UITableViewCellEditingStyleDelete . 只有 editing 屬性設置為 true 的時候才可以看到效果optionalpublicfunctableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCellEditingStyle

代碼

/*!

設置某一行的編輯樣式

*/

func tableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCellEditingStyle {

let number = indexPath.row % 3

switch number {

case 0:

print("0")

return UITableViewCellEditingStyle.Delete

case 1:

print("1")

return UITableViewCellEditingStyle.Insert

default:

print("2")

return UITableViewCellEditingStyle.None

}

}

效果:

4.gif

上部分只是編輯樣式的展示

4、 編輯模式的事件回調

@available(iOS2.0, *)// 編輯樣式 add 和 delete 附加視圖點擊的回調optionalpublicfunctableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath)

默認實現編輯事件回調方法:

functableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath){// 沒有添加任何的功能代碼}

實現這個方法后,在非編輯模式下,左滑動 cell 會顯示一個 delete 按鈕。

效果:

9.gif

先進入了編輯模式,查看了每個 cell 的編輯模式的樣式。(cell 的編輯模式的設置看上面的代碼)

在非編輯模式下,只有 cell 的編輯模式是 delete 的,才可以進行左側滑。

關于 cell 側滑功能的實現可以先查看這段代碼, 后續后詳細說明!

事件的回調處理

實例代碼

functableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath){switcheditingStyle {case.Delete:print("Delete")// 移除模型數據(不移除就會報錯)localData.removeAtIndex(indexPath.row)// 刪除某一行 celltableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Automatic)case.Insert:print("Insert")letstr ="new"+ localData[indexPath.row]// 添加模型數據 (不插入就會報錯)localData.insert(str, atIndex: indexPath.row)// 這一步只會刷新插入的哪一行tableView.insertRowsAtIndexPaths([indexPath], withRowAnimation: .Automatic)case.None:print("None")// None 樣式 是給 cell 的移動準備的,這里永遠也不會打?。ㄒ苿拥臅r候并不需要插入和刪除)}}

/*!

設置某一行的編輯樣式

*/functableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCellEditingStyle{print(#function)letnumber = indexPath.row %3switchnumber {case0:returnUITableViewCellEditingStyle.Deletecase1:returnUITableViewCellEditingStyle.Insertdefault:// None 樣式 是給 cell 的移動準備的returnUITableViewCellEditingStyle.None}? ? }

回調效果:

1.gif

進入到編輯模式后,會默認的調用func tableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCellEditingStyle, 刷新每一行的 cell 編輯樣式。

點擊左邊的刪除按鈕,cell 會出現側滑,顯示一個 delete,只有點擊了 delete 之后才可以進行刪除。 刪除一個 cell 后,會再一次調用func tableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCellEditingStyle方法,刷新每一個 cell 編輯樣式 。(方法調用的個數變少了)

點擊添加按鈕,cell 不會出現側滑, 直接調用回調方法。會再一次調用func tableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCellEditingStyle方法,刷新每一個 cell 編輯樣式 。(cell 個數增加了)

當 cell 的編輯樣式是None的時候, 點擊是沒有任何效果的。

注意點:

由于進行 delete 和 Insert 操作的回調func tableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCellEditingStyle方法。

所以, cell 編輯模式需要用一個 數組來記錄。來保證, delete 和 Insert? 操作之后,和之前 cell 的編輯樣式是對應的。

// 定義一個 空的數組

var cellEditingStyle: [Int] = []

// 設置默認值

for? index in 0 ..< localData.count {

cellEditingStyle.append(index)

}

functableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath){switcheditingStyle {case.Delete:print("Delete")? ? ? ? localData.removeAtIndex(indexPath.row)// 編輯模式數據刪除cellEditingStyle.removeAtIndex(indexPath.row)? ? ? ? tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Automatic)case.Insert:print("Insert")? ? ? ? localData.insert("new"+ localData[indexPath.row], atIndex: indexPath.row)// 編輯模式數據添加 (設置為 刪除)cellEditingStyle.insert(0, atIndex: indexPath.row)? ? ? ? tableView.insertRowsAtIndexPaths([indexPath], withRowAnimation: .Automatic)case.None:print("None")// None 樣式 是給 cell 的移動準備的,這里永遠也不會打印}}functableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCellEditingStyle{print(#function)// 獲取對應的數據進行設置letnumber = cellEditingStyle[indexPath.row] %3switchnumber {case0:returnUITableViewCellEditingStyle.Deletecase1:returnUITableViewCellEditingStyle.Insertdefault:returnUITableViewCellEditingStyle.None}}

使用這種方式

3.gif

編輯模式的數據可以和 cell 對應的模型數據綁定。一種 MVC 的思想

5、 編輯模式中的選中操作

編輯模式中的選中操作用到的 API:

// 允許在編輯模式下進行單選// 默認為 NopublicvarallowsSelectionDuringEditing:Bool// default is NO. Controls whether rows can be selected when in editing mode// 允許在編輯模式進行多選// 默認為 NopublicvarallowsMultipleSelectionDuringEditing:Bool// default is NO. Controls whether multiple rows can be selected simultaneously in editing mode// 當前選中的索引的獲取// 獲取當前選中單行的索引publicvarindexPathForSelectedRow:NSIndexPath? {get}// returns nil or index path representing section and row of selection.// 獲取當前選中多行的索引publicvarindexPathsForSelectedRows: [NSIndexPath]? {get}// returns nil or a set of index paths representing the sections and rows of the selection.

代碼演示:

// 進入編輯模式tableView.editing? = !tableView.editing// 編輯模式下單選tableView.allowsSelectionDuringEditing =true// 編輯模式下多選tableView.allowsMultipleSelectionDuringEditing =true

我使用的是tableView.allowsMultipleSelectionDuringEditing = true來實現單選和多選操作。

tableView.allowsSelectionDuringEditing = true效果后面介紹。

這種效果也是我們在項目中最常見的

關鍵代碼@IBActionfunceditItemAction(sender: AnyObject){// 非動畫//? ? ? ? tableView.editing = !tableView.editing//? ? ? ? tableView.allowsSelectionDuringEditing = !tableView.editing// 在編輯模式下多選tableView.allowsMultipleSelectionDuringEditing = !tableView.editing// 動畫 ( 建議使用這個 )tableView.setEditing(!tableView.editing, animated:true)}/*? 注釋掉這個代碼就可實現多選? */// cell 將要選中的回調代理// 在這個方法中主要進行的是取消上一次選中functableView(tableView: UITableView, willSelectRowAtIndexPath indexPath: NSIndexPath)->NSIndexPath? {// 這個方法第一次調用的時候 indexPath 為 nilifletselectedRowIndexPath = tableView.indexPathForSelectedRow {// 去除上一次選中tableView.deselectRowAtIndexPath(selectedRowIndexPath, animated:true)? ? }returnindexPath}

選中效果演示:

單選

多選操作

當前選中的索引的獲取

// 獲取當前選中單行的索引

public var indexPathForSelectedRow: NSIndexPath? { get }

// 獲取當前選中多行的索引

public var indexPathsForSelectedRows: [NSIndexPath]? { get }

最簡單的獲取選中 cell 的方式就是下面的兩個接口。使用這兩個接口,我們就不需要另外的再去定義變量記錄選中的 cell 。

tableView.allowsSelectionDuringEditing = true 的特別說明:

這個tableView.allowsSelectionDuringEditing設置效果是有點讓人疑惑的。在看到多選的效果后,我一直以為 編輯模式下,單選 的效果 和 多選的效果類似,也應該有個圈圈事實證明我是錯的!

單選和多選的效果:

普通模式下的不能選擇,單選和多選:

// 這個屬性,默認是 true 的,設置為 false 后,不能進行 cell 的選中操作。// 同時也禁止了 代理方法選中的回調tableView.allowsSelection =false

點擊 cell 沒人任何效果!

tableView.allowsSelection = false

tableView.allowsSelection =true

tableView.allowsSelection = true

// 多選為 true 后,單選肯定也為 truetableView.allowsMultipleSelection =true

3.gif

編輯模式下的單選:

tableView.editing =true// 編輯模式下,cell 默認是不能進行選中操作的tableView.allowsSelectionDuringEditing =false

在編輯模式下,默認 cell 默認是不能響應點擊事件的。并且,control view 還是會根據 cell 編輯模式的進行顯示(我們看到的加號 ,減號,空白)。

tableView.allowsMultipleSelection = false

tableView.editing =truetableView.allowsSelectionDuringEditing =true

單選是沒有圈圈效果的,就是單純的 cell 高亮。并且,control view 還是會根據 cell 編輯模式的進行顯示(我們看到的加號 ,減號,空白)。

tableView.allowsSelectionDuringEditing = true

tableView.editing =truetableView.allowsMultipleSelectionDuringEditing =true

多選模式下,會修改 control view 的顯示,將 加號,減號,空白替換為圈圈

4.gif

6、 編輯模式中 cell 的 Move (移動操作)

默認情況下tableView 中的 cell 是不能進行移動操作, 只有在編輯模式下,tableView? 的 cell 可以進行移動操作。

簡單的顯示 cell 移動的附加視圖

這只是簡單的效果顯示

// Data manipulation - reorder / moving supportoptionalpublicfunctableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath)// 進入編輯模式tableView.editing? = !tableView.editing// cell 的移動和排序操作 ( 方法的簡單實現)functableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath){}// 消除不必要的影響/*!

設置某一行的編輯樣式

*/functableView(tableView: UITableView, editingStyleForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCellEditingStyle{// 獲取 cell 對應的編輯模式的緩存數據letnumber = cellEditingStyle[indexPath.row] %3switchnumber {// 注釋這里,主要是為了消除,其他功能的影響。//? ? ? ? case 0://? ? ? ? ? ? print("0")//? ? ? ? ? ? return UITableViewCellEditingStyle.Delete//? ? ? ? case 1://? ? ? ? ? ? print("1")//? ? ? ? ? ? return UITableViewCellEditingStyle.Insertdefault:print("2")// 這一個模式是用來排序移動準備用的returnUITableViewCellEditingStyle.None}}

效果:

4.gif

7、 編輯模式中指定某一行 cell 可以 Move

// 指定哪一個 cell 能夠移動functableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath)->Bool{// 單數 row 行進入可移動模式ifindexPath.row %2==0{returnfalse}returntrue}

效果:

4.gif

3、tableView 的移動和排序

// Moving/reordering// Allows the reorder accessory view to optionally be shown for a particular row. By default, the reorder control will be shown only if the datasource implements -tableView:moveRowAtIndexPath:toIndexPath:// 允許某一行的排序的附加視圖顯示,只用在數據源 實現了 -tableView:moveRowAtIndexPath:toIndexPath: 方法的時候 這個方法才有效@available(iOS2.0, *)optionalpublicfunctableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath)->Bool

傳說中支持移動和排序的方法

// Data manipulation - reorder / moving support@available(iOS2.0, *)optionalpublicfunctableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath)

代碼體現

// cell 的移動和排序操作functableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath){}// 指定哪一個 cell 能夠移動functableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath)->Bool{// 單數 row 行進入可移動模式ifindexPath.row %2==0{returnfalse}returntrue}

效果圖

Snip20160602_31.png

4、tableView 索引設置

// Index@available(iOS2.0, *)// 通過實行這個方法,返回一個 string 的數組就可以設置索引optionalpublicfuncsectionIndexTitlesForTableView(tableView: UITableView)-> [String]?// return list of section titles to display in section index view (e.g. "ABCD...Z#")@available(iOS2.0, *)// 索引選中的回調optionalpublicfunctableView(tableView: UITableView, sectionForSectionIndexTitle title: String, atIndex index: Int)->Int// tell table which section corresponds to section title/index (e.g. "B",1))

單獨設置索引

// 索引設置funcsectionIndexTitlesForTableView(tableView: UITableView)-> [String]? {return["A","B","C","D","E","F","G"]}

效果圖

Snip20160602_32.png

當只實行單獨設置索引的方法,點擊索引會默認的滾動到索引對應順序的組。

// 索引設置funcsectionIndexTitlesForTableView(tableView: UITableView)-> [String]? {return["A","B","C","D","E","F","G"]}// 告訴表部分對應部分標題/索引(當點擊索引的時候回調用這個方法)/*

實現這個方法,點擊索引的只會滾動一次,滾動后執行的是索引的回調

*/functableView(tableView: UITableView, sectionForSectionIndexTitle title: String, atIndex index: Int)->Int{print(title , index)return3}

作者:Laughingg

鏈接:http://www.lxweimin.com/p/aaf2c88c58f0

來源:簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容