「Swift」类似微信九宫格图片任意拖拽图片更改顺序

前言：需要完成一个UGC添加图片，并且可以实现图片任意拖拽更改图片顺序的需求

需求分析：添加图片需要用到UICollectionView，然后添加图片用使用UICollectionView的系统方法进行实现开始拖拽的记录，拖拽过程中的处理，拖拽放下的处理

贴代码：

class collectionViewDragAndDropViewController: BaseViewController {
    private var myCollectionView: UICollectionView!
    
    /// 开始拖动时的数据暂存
    private var dragingIndexPath: IndexPath?
    
    private var imageList = [UIImage.image(.fruit_lemon),
                             UIImage.image(.fruit_mango),
                             UIImage.image(.fruit_litchi),
                             UIImage.image(.fruit_orange),
                             UIImage.image(.fruit_raspberry),
                             UIImage.image(.fruit_strawberry),
                             UIImage.image(.fruit_watermelon),
                             UIImage.image(.fruit_blueberries)]

    override func viewDidLoad() {
        super.viewDidLoad()

        setupNav()
        initView()
        setupLayout()
    }
    
    private func setupNav() {
        isNavBarisTranslucent = true
        isNavBarisHidden = false
        
        setBarButtonItem(.image(UIImage.image(.back_icon), size: CGSize(width: 44, height: 44)), RightBarButtonItemType.none)
    }
    
    override func leftItemAction() {
        self.navigationController?.popViewController(animated: true)
    }
    
    private func initView() {
        self.view.backgroundColor = UIColor.color(.color_FFFFFF)
        
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        
        myCollectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        myCollectionView.showsVerticalScrollIndicator = false
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        myCollectionView.dragInteractionEnabled = true
        myCollectionView.dragDelegate = self
        myCollectionView.dropDelegate = self
        
        myCollectionView.register(myCollectionViewCell.self, forCellWithReuseIdentifier: NSStringFromClass(myCollectionViewCell.self))
        
        self.view.addSubview(myCollectionView)
    }
    
    private func setupLayout() {
        myCollectionView.snp.makeConstraints { make in
            make.top.equalTo(Common.navigatorHeight).offset(8.fit())
            make.left.equalTo(16.fit())
            make.right.equalTo(-16.fit())
            make.bottom.equalTo(self.view)
        }
    }
}

extension collectionViewDragAndDropViewController: UICollectionViewDelegate,
                                                   UICollectionViewDataSource,
                                                   UICollectionViewDelegateFlowLayout {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
         return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 8
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let row = indexPath.row
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: NSStringFromClass(myCollectionViewCell.self), for: indexPath) as! myCollectionViewCell
        cell.updateCellBgImageView(image: self.imageList[row])
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: (Common.screenWidth - 52.fit()) / 3, height: (Common.screenWidth - 52.fit()) / 3)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return .zero
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10.fit()
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

extension collectionViewDragAndDropViewController: UICollectionViewDragDelegate {
    ///处理首次拖动时，是否响应
    func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
        /// 如果是最后一个Cell，不响应拖动事件
        if indexPath.row == 7 {
            return []
        }
        
        let row = indexPath.row
        let item = self.imageList[row]
        let itemProvider = NSItemProvider(object: item)
        let dragItem = UIDragItem(itemProvider: itemProvider)
        dragItem.localObject = item
        dragingIndexPath = indexPath
        return [dragItem]
    }
}

extension collectionViewDragAndDropViewController: UICollectionViewDropDelegate {
    ///处理拖动放下后如何处理
    func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {
        guard let destinationIndexPath = coordinator.destinationIndexPath else {
            return
        }
        switch coordinator.proposal.operation {
        case .move:
            let items = coordinator.items
            if let item = items.first, let sourceIndexPath = item.sourceIndexPath {
                //执行批量更新
                myCollectionView.performBatchUpdates({
                    self.imageList.remove(at: sourceIndexPath.row)
                    self.imageList.insert(item.dragItem.localObject as! UIImage, at: destinationIndexPath.row)
                    myCollectionView.deleteItems(at: [sourceIndexPath])
                    myCollectionView.insertItems(at: [destinationIndexPath])
                })
                //将项目动画化到视图层次结构中的任意位置
                coordinator.drop(item.dragItem, toItemAt: destinationIndexPath)
            }
            break
            
        default:
            return
        }
    }
    
    ///处理拖动过程中
    func collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UICollectionViewDropProposal {
        if self.imageList.count < 8 && destinationIndexPath?.row == self.imageList.count {
            return UICollectionViewDropProposal(operation: .forbidden)
        }
        
        if session.localDragSession != nil {
            if collectionView.hasActiveDrag {
                return UICollectionViewDropProposal(operation: .move, intent: .insertAtDestinationIndexPath)
            } else {
                return UICollectionViewDropProposal(operation: .copy, intent: .insertAtDestinationIndexPath)
            }
        } else {
            return UICollectionViewDropProposal(operation: .forbidden)
        }
    }
}

效果图：

ps：因为设定数组最后一个cell不能进行拖动，所以动图最后无法移动蓝莓图片(此功能用于如添加图片的Cell无法进行移动的情况)

整理不易，望对大家有所帮助，多多点赞，谢谢大家！