導(dǎo)讀

簡(jiǎn)單用Swift寫(xiě)了一個(gè)collectionview的拖拽點(diǎn)擊排序效果;
拖拽排序是新聞?lì)惖腁pp可以說(shuō)是必有的交互設(shè)計(jì)，如今日頭條，網(wǎng)易新聞等。

• GitHub地址：https://github.com/wangliujiayou/Swift-dragLabel 歡迎Star.

效果

效果

主要代碼

手勢(shì)長(zhǎng)按移動(dòng)

• 1.給CollectionViewCell添加一個(gè)長(zhǎng)按手勢(shì).

private lazy var collectionView: UICollectionView = {

        let clv = UICollectionView(frame: self.view.frame, collectionViewLayout: ChannelViewLayout())
        clv.backgroundColor = UIColor.white
        clv.delegate = self
        clv.dataSource = self
        clv.register(ChannelViewCell.self, forCellWithReuseIdentifier: ChannelViewCellIdentifier)
        clv.register(ChannelHeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: ChannelViewHeaderIdentifier)
        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(longPressGesture(_:)))
        clv.addGestureRecognizer(longPress)
        
        return clv
    }()

• 2.開(kāi)始長(zhǎng)按時(shí)對(duì)cell進(jìn)行截圖或拷貝一個(gè)cell，并隱藏cell.

    //MARK: - 長(zhǎng)按開(kāi)始
    private func dragBegan(point: CGPoint) {
        
        indexPath = collectionView.indexPathForItem(at: point)
        if indexPath == nil || (indexPath?.section)! > 0 || indexPath?.item == 0
        {return}
        
        let item = collectionView.cellForItem(at: indexPath!) as? ChannelViewCell
        item?.isHidden = true
        dragingItem.isHidden = false
        dragingItem.frame = (item?.frame)!
        dragingItem.text = item!.text
        //放大效果(此處可以根據(jù)需求隨意修改)
        dragingItem.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
        
    }

• 3.在手勢(shì)移動(dòng)的時(shí)候，找到目標(biāo)是的indexPatch，再調(diào)用系統(tǒng)的api交換這個(gè)cell和隱藏cell的位置，并且更新數(shù)據(jù).

    //MARK: - 移動(dòng)過(guò)程
    private func drageChanged(point: CGPoint) {

        if indexPath == nil || (indexPath?.section)! > 0 || indexPath?.item == 0 {return}
        dragingItem.center = point
        targetIndexPath = collectionView.indexPathForItem(at: point)
        if targetIndexPath == nil || (targetIndexPath?.section)! > 0 || indexPath == targetIndexPath || targetIndexPath?.item == 0 {return}
        // 更新數(shù)據(jù)
        let obj = selectedArr[indexPath!.item]
        selectedArr.remove(at: indexPath!.row)
        selectedArr.insert(obj, at: targetIndexPath!.item)
        //交換位置
        collectionView.moveItem(at: indexPath!, to: targetIndexPath!)
        //進(jìn)行記錄
        indexPath = targetIndexPath

    }

• 4.手勢(shì)停止或取消時(shí)，移除view，顯示隱藏cell. (這里手勢(shì)取消也要掉用此方法)

//MARK: - 長(zhǎng)按結(jié)束或取消
    private func drageEnded(point: CGPoint) {
        
        if indexPath == nil || (indexPath?.section)! > 0 || indexPath?.item == 0 {return}
        let endCell = collectionView.cellForItem(at: indexPath!)
        
        UIView.animate(withDuration: 0.25, animations: {
        
            self.dragingItem.transform = CGAffineTransform.identity
            self.dragingItem.center = (endCell?.center)!
            
        }, completion: {
        
            (finish) -> () in
            
            endCell?.isHidden = false
            self.dragingItem.isHidden = true
            self.indexPath = nil
            
        })
        
    }

點(diǎn)擊移動(dòng)

• collectionView的點(diǎn)擊方法,我這里分為兩段,第一段為點(diǎn)擊處理事件,第二段為點(diǎn)擊添加添加標(biāo)簽(編輯狀態(tài)下第一段可以點(diǎn)擊排序)

   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
        
        
        if indexPath.section > 0 {
            
            // 更新數(shù)據(jù)
            let obj = recommendArr[indexPath.item]
            recommendArr.remove(at: indexPath.item)
            selectedArr.append(obj)
            //移動(dòng)方法
            collectionView.moveItem(at: indexPath, to: NSIndexPath(item: selectedArr.count - 1, section: 0) as IndexPath)
            
        } else {
            
            if isEdite {
                
                if indexPath.item == 0 {return}
                // 更新數(shù)據(jù)
                let obj = selectedArr[indexPath.item]
                selectedArr.remove(at: indexPath.item)
                recommendArr.insert(obj, at: 0)
                //移動(dòng)方法
                collectionView.moveItem(at: indexPath, to: NSIndexPath(item: 0, section: 1) as IndexPath)
                
            } else {
                
                if switchoverCallback != nil {
                    //處理點(diǎn)擊的閉包
                    switchoverCallback!(selectedArr, recommendArr, indexPath.item)
                    _ = navigationController?.popViewController(animated: true)
                }
            }
        }
        
        
        
    }

其他

此代碼只是一個(gè)效果,沒(méi)有怎么封裝,如果仔細(xì)看過(guò)的朋友可以知道其實(shí)沒(méi)有多么復(fù)雜

• 點(diǎn)擊移動(dòng)

collectionView.moveItem(at: indexPath, to: NSIndexPath(item: 0, section: 1) as IndexPath)

• 拖拽移動(dòng)

collectionView.moveItem(at: indexPath!, to: targetIndexPath!)

主要就是這兩個(gè)方法,其他都是處理邏輯以及視圖效果.

提示

如果你們是從iOS9開(kāi)始適配的話，那么可以用系統(tǒng)的Api，非常簡(jiǎn)單好用,大家這里可以自己去試試.

    // Support for reordering
    @available(iOS 9.0, *)
    open func beginInteractiveMovementForItem(at indexPath: IndexPath) -> Bool // returns NO if reordering was prevented from beginning - otherwise YES

    @available(iOS 9.0, *)
    open func updateInteractiveMovementTargetPosition(_ targetPosition: CGPoint)

    @available(iOS 9.0, *)
    open func endInteractiveMovement()

    @available(iOS 9.0, *)
    open func cancelInteractiveMovement()

• 源碼可以從這里下載