如何将静态单元格拖入tableView swift?

时间:2015-10-31 18:26:16

标签: ios swift uitableview drag-and-drop uicollectionviewcell

我在storyBoard中有一个tableView我在其中添加了4个静态单元格,而我的storyBoard看起来像:

enter image description here

我没有这个tableView的数据源,因为我的单元格是静态的。

我使用下面的代码来拖动一个单元格,它正常工作,直到我滚动一个表格。

import UIKit

class TableViewController: UITableViewController {

    var sourceIndexPath: NSIndexPath = NSIndexPath()
    var snapshot: UIView = UIView()
    let longPress: UILongPressGestureRecognizer = {
        let recognizer = UILongPressGestureRecognizer()
        return recognizer
        }()

    override func viewDidLoad() {
        super.viewDidLoad()

        longPress.addTarget(self, action: "longPressGestureRecognized:")
        self.tableView.addGestureRecognizer(longPress)

        self.tableView.allowsSelection = false
    }

    override func viewWillAppear(animated: Bool) {

        self.tableView.reloadData()
    }

    // MARK: UIGestureRecognizer
    func longPressGestureRecognized(gesture: UILongPressGestureRecognizer){

        let state: UIGestureRecognizerState = gesture.state
        let location:CGPoint = gesture.locationInView(self.tableView)
        if let indexPath: NSIndexPath = self.tableView.indexPathForRowAtPoint(location){

            switch(state){

            case UIGestureRecognizerState.Began:
                sourceIndexPath = indexPath

                let cell: UITableViewCell = self.tableView .cellForRowAtIndexPath(indexPath)!

                //take a snapshot of the selected row using helper method
                snapshot = customSnapshotFromView(cell)

                //add snapshot as subview, centered at cell's center
                var center: CGPoint = cell.center
                snapshot.center = center
                snapshot.alpha  = 0.0
                self.tableView.addSubview(snapshot)
                UIView.animateWithDuration(0.25, animations: { () -> Void in
                    center.y = location.y
                    self.snapshot.center = center
                    self.snapshot.transform = CGAffineTransformMakeScale(1.05, 1.05)
                    self.snapshot.alpha = 0.98
                    cell.alpha = 0.0
                    }, completion: { (finished) in
                        cell.hidden = true
                })

            case UIGestureRecognizerState.Changed:
                let cell: UITableViewCell = self.tableView.cellForRowAtIndexPath(indexPath)!

                var center: CGPoint = snapshot.center
                center.y = location.y
                snapshot.center = center
                print("location \(location.y)")

                //is destination valid and is it different form source?
                if indexPath != sourceIndexPath{
                    //update data source
                    //I have commented this part because I am not using any dataSource.
//                    self.customArray.exchangeObjectAtIndex(indexPath.row, withObjectAtIndex: sourceIndexPath.row)
                    //move the row
                    self.tableView.moveRowAtIndexPath(sourceIndexPath, toIndexPath: indexPath)
                    //and update source so it is in sync with UI changes
                    sourceIndexPath = indexPath
                }

                if (location.y < 68) || (location.y > 450) {
                    print("cancelled")
                    self.snapshot.alpha = 0.0
                    cell.hidden = false
                    UIView.animateWithDuration(0.10, animations: { () -> Void in

                        self.snapshot.center = cell.center
                        self.snapshot.transform = CGAffineTransformIdentity
                        self.snapshot.alpha = 0.0
                        //undo fade out
                        cell.alpha = 1.0

                        }, completion: { (finished) in
                            self.snapshot.removeFromSuperview()
                    })
                }

            case UIGestureRecognizerState.Ended:
                //clean up
                print("ended")
                let cell: UITableViewCell = tableView.cellForRowAtIndexPath(indexPath)!
                cell.hidden = false

                UIView.animateWithDuration(0.25, animations: { () -> Void in

                    self.snapshot.center = cell.center
                    self.snapshot.transform = CGAffineTransformIdentity
                    self.snapshot.alpha = 0.0
                    //undo fade out
                    cell.alpha = 1.0

                    }, completion: { (finished) in
                        self.snapshot.removeFromSuperview()
                })
                break

            default:
                break
            }
        }else{
            gesture.cancelsTouchesInView = true
        }
    }

    func customSnapshotFromView(inputView: UIView) -> UIView {

        // Make an image from the input view.
        UIGraphicsBeginImageContextWithOptions(inputView.bounds.size, false, 0)
        inputView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        // Create an image view.
        let snapshot = UIImageView(image: image)
        snapshot.layer.masksToBounds = false
        snapshot.layer.cornerRadius = 0.0
        snapshot.layer.shadowOffset = CGSize(width: -5.0, height: 0.0)
        snapshot.layer.shadowRadius = 5.0
        snapshot.layer.shadowOpacity = 0.4

        return snapshot
    }

}

拖动后滚动时,它看起来像:

enter image description here

正如您所看到的,细胞不再出现。我想拖放静态单元格,我想保存它的位置,所以当我滚动时我不会再重新排列。

Sample项目获取更多信息。

这只是一个演示项目但是我在我的单元格中添加了许多元素,每个单元格都有不同的UI。

4 个答案:

答案 0 :(得分:2)

有一个库可以完全按照您非常类似的方法进行操作。它被称为FMMoveTableView,但它适用于具有数据源的单元格。

我认为造成问题的原因是当您移动单元格然后从故事板滚动数据源时不再与表格同步,因此您的单元格对象无法重绘。< / p>

我认为你应该这样实现你的表:

  1. 制作4个单元格自定义单元格。
  2. 每个子类。
  3. 创建一个数字为1到4的数组
  4. 对长拖动重新排序数组
  5. 覆盖cellForRowAtIndexPath以显示正确数字的正确单元格

答案 1 :(得分:2)

您可以从uitableview委托中拖出uitableview单元格....... 1)在其委托中将表视图编辑样式设置为none。

2)实现表视图委托以启用单元格拖动,即canMoveRowAtIndexPath方法......

答案 2 :(得分:1)

您可以创建多个动态单元格。 您只需要使用正确的标识符对单元格进行出列。

答案 3 :(得分:1)

您是仅仅出于布局目的而做的,可能UICollectionView或定制的UIScrollView可以完成这项工作吗?

从来没有,我有一个解决方案:

  1. 创建一个包含所有静态UITableViewCell
  2. 的IBOutlet集合
  3. 创建索引列表以模拟“数据源”
  4. 使用您自己的索引列表覆盖cellForRowAtIndexPath以进行绘制
  5. 更新列表顺序时,请更新indexList,以便视图“记住”此更改
  6. 此表视图控制器解释了所有内容:

    class TableViewController: UITableViewController {
    
      @IBOutlet var outletCells: [UITableViewCell]!
      var indexList = [Int]()
    
      override func viewDidLoad() {
        super.viewDidLoad()
        // Prepare a index list.
        // We will move positions in this list instead
        // of trying to move the view's postions.
        for (index, _) in outletCells.enumerate() {
          indexList.append(index)
        }
      }
    
      override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // Use dynamic count, not needed I guess but
        // feels better this way.
        return outletCells.count
      }
    
      override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        // Use the index path to get the true index and return
        // the view on that index in our IBOutlet collection
        let realIndexForPos = indexList[indexPath.row]
        return outletCells[realIndexForPos]
      }
    
      @IBAction func onTap(sender: AnyObject) {
        // Simulating your drag n drop stuff here... :)
        let swapThis = 1
        let swapThat = 2
    
        tableView.moveRowAtIndexPath(NSIndexPath(forItem: swapThis, inSection: 0), toIndexPath: NSIndexPath(forItem: swapThat, inSection: 0))
    
        // Update the indexList as this is the "data source"
        // Do no use moveRowAtIndexPath as this is never triggred
        // This one line works: swap(&indexList[swapThis], &indexList[swapThat])
        // But bellow is easier to understand
        let tmpVal = indexList[swapThis]
        indexList[swapThis] = indexList[swapThat]
        indexList[swapThat] = tmpVal
      }
    }
    

    要创建IBOutlet,请使用Interface Builder。 在每个表视图单元格上使用Referencing Outlet Collection,然后将每个表格单元格拖动到控制器代码中的相同@IBOutlet

    enter image description here