当前位置: > > > Swift - 给表格添加移动单元格功能(拖动行)

Swift - 给表格添加移动单元格功能(拖动行)

(本文代码已升级至Swift3)

1,给表格 UITableView 添加单元格移动功能  

(1)给表格添加长按功能,长按后表格进入编辑状态 
(2)在编辑状态下,可以看到单元格后面出现拖动按钮 
(3)鼠标按住拖动按钮,可以拖动单元格到任意位置
(4)拖动完毕后,还会触发 TabelView 对应的代理事件

2,效果图

 

3,代码如下

import UIKit

class ViewController: UIViewController,UITableViewDelegate,
UITableViewDataSource,UIGestureRecognizerDelegate {
    
    var tableView:UITableView?
    
    var ctrlnames:[String] = ["UILabel 标签","UIButton 按钮","UIDatePiker 日期选择器",
                              "UITableView 表格视图"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建表视图
        self.tableView = UITableView(frame: self.view.frame,
                                     style:.plain)
        self.tableView!.delegate = self
        self.tableView!.dataSource = self
        //创建一个重用的单元格
        self.tableView!.register(UITableViewCell.self, forCellReuseIdentifier: "SwiftCell")
        self.view.addSubview(self.tableView!)
        
        //绑定对长按的响应
        let longPress =  UILongPressGestureRecognizer(target:self,
                         action:#selector(tableviewCellLongPressed(gestureRecognizer:)))
        //代理
        longPress.delegate = self
        longPress.minimumPressDuration = 1.0
        //将长按手势添加到需要实现长按操作的视图里
        self.tableView!.addGestureRecognizer(longPress)
    }
    
    //在本例中,只有一个分区
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    //返回表格行数(也就是返回控件数)
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.ctrlnames.count
    }
    
    //创建各单元显示内容(创建参数indexPath指定的单元)
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
        -> UITableViewCell {
        //为了提供表格显示性能,已创建完成的单元需重复使用
        let identify:String = "SwiftCell"
        //同一形式的单元格重复使用,在声明时已注册
        let cell = tableView.dequeueReusableCell(withIdentifier: identify, for: indexPath)
            as UITableViewCell
        cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicator
        cell.textLabel?.text = self.ctrlnames[indexPath.row]
        return cell
    }
    
    //长按表格
    func tableviewCellLongPressed(gestureRecognizer:UILongPressGestureRecognizer)
    {
        if (gestureRecognizer.state == UIGestureRecognizerState.ended)
        {
            print("UIGestureRecognizerStateEnded")
            //在正常状态和编辑状态之间切换
            if(self.tableView!.isEditing == false){
                self.tableView!.setEditing(true, animated:true)
            }
            else{
                self.tableView!.setEditing(false, animated:true)
            }
        }
    }
    
    //在编辑状态,可以拖动设置cell位置
    func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
        return true
    }
    
    //移动cell事件
    func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath,
                   to destinationIndexPath: IndexPath) {
        if sourceIndexPath != destinationIndexPath{
            //获取移动行对应的值
            let itemValue:String = ctrlnames[sourceIndexPath.row]
            //删除移动的值
            ctrlnames.remove(at: sourceIndexPath.row)
            //如果移动区域大于现有行数,直接在最后添加移动的值
            if destinationIndexPath.row > ctrlnames.count{
                ctrlnames.append(itemValue)
            }else{
                //没有超过最大行数,则在目标位置添加刚才删除的值
                ctrlnames.insert(itemValue, at:destinationIndexPath.row)
            }
        }
    }
}

附:让单元格只能在自己的分区中拖动

1,问题描述

如果我们的 tableView 有多个 section,那么使用上面代码会发现,单元格 cell 可以自由地在各个分区间拖动。比如我们可以把第1section 里的 cell 移动到第2section 中,反之亦然。

2,解决办法 

如果想要限制单元格只能在其所属的 section 内部拖动,可以增加如下代理方法进行判断。该方法在拖动某行到一个目标上方时会被触发,我们可以在方法内部判断是否允许移动,或者进行修正。
//拖拽某行到一个目标上方时触发该方法,询问是否移动或者修正
func tableView(_ tableView: UITableView,
               targetIndexPathForMoveFromRowAt sourceIndexPath: IndexPath,
               toProposedIndexPath proposedDestinationIndexPath: IndexPath) -> IndexPath {
    //如果目标位置和拖动行不是同一个分区,则拖动行返回自己原来的分区
    if sourceIndexPath.section != proposedDestinationIndexPath.section {
        var row = 0
        //如果是往下面的分区拖动,则回到原分区末尾
        //如果是往上面的分区拖动,则会到原分区开头位置
        if sourceIndexPath.section < proposedDestinationIndexPath.section {
            row = tableView.numberOfRows(inSection: sourceIndexPath.section)-1
        }
        return IndexPath(row: row, section: sourceIndexPath.section)
    }
    return proposedDestinationIndexPath
}

3,效果图 

我们这里将第2section cell 拖到第1section 中,当松开手指后这个 cell 又会自动回到之前的 section 中。返回后的位置是:
  • 如果从上方的 section 回到下方的 section,则这个 cell 自动插入到原 section 的头部。
  • 如果从下方的 section 回到上方的 section,则这个 cell 自动插入到原 section 的尾部。
        
评论2
  • 2楼
    2017-08-16 12:52
    苦茶。

    航哥,又是我。请问如何禁止tableview的cell在不同分区之间的拖动呢?我的tableview,有两个section,我设置了tableview的编辑模式。我的目的是section0中的cell只可以在该section中拖动排序,section0中的cell不能够拖到section1中。但是现在:section0中的cell,在编辑模式下也可以拖到section1中,怎么禁止呢

    站长回复

    我在文章末尾补充了相关内容,你可以看下。

  • 1楼
    2017-04-17 11:21
    苦茶。

    航哥啊,打开tableview的编辑模式,左边会有默认的红色删除按钮出来,我不想要这个,在editingStyleForRowAtIndexPath方法中设置了cell的样式为NONE,删除按钮是没了,但是左边还是会有一段空白的偏移。怎么不要这个偏移呢?

    站长回复

    这个可以去掉,参考我的这篇文章:Swift - 去除tableView在编辑模式下的自动缩进(单元格头部不留空白)