UICollectionViewの並び替え（よくある編）

並び替えが出来るUICollectionViewに関する備忘録です。


まず、単純にUICollectionViewを表示するプロジェクトを作成しておきます。セルにラベルを用意して、番号を表示させているだけです。storyboardで、セルに色を付けておくと動作チェックがやりやすいかと思います。


ViewController.swift

	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var collectionView: UICollectionView!
	var numbers: [Int] = []
	override func viewDidLoad() {
	super.viewDidLoad()
	for n in 0..<100 {
	numbers.append(n)
	}
	}
	}

view raw ViewController.swift hosted with ❤ by GitHub

ラベルに表示するデータを用意しています。
UICollectionViewDataSourceとUICollectionViewDelegateへの、selfのセットがありませんが、storyboard上で設定しておくと良いと思います。

右ドラッグで、クイっと。

ViewController+UICollectionViewDataSource.swift

	import UIKit
	extension ViewController: UICollectionViewDataSource {
	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
	return numbers.count
	}
	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
	let kReorderCardsCollectionViewCell = "CollectionViewCell"
	let c = collectionView.dequeueReusableCell(withReuseIdentifier: kReorderCardsCollectionViewCell, for: indexPath)
	guard let cell = c as? CollectionViewCell else {
	return c
	}
	cell.label.text = "\(numbers[indexPath.item])"
	return cell
	}
	}

view raw ViewController+UICollectionViewDataSource.swift hosted with ❤ by GitHub

セル上のラベルにインデックスを表示しています。

忘れがちですね、reuse idの設定

ViewController+UICollectionViewDelegate.swift

	import UIKit
	extension ViewController: UICollectionViewDelegate {
	}

view raw ViewController+UICollectionViewDelegate.swift hosted with ❤ by GitHub

ラベルの表示だけなので、特に処理はありません。



CollectionViewCell.swift

	import UIKit
	class CollectionViewCell: UICollectionViewCell {
	@IBOutlet weak var label: UILabel!
	}

view raw CollectionViewCell.swift hosted with ❤ by GitHub

セルにはラベルだけです。



これで実行すれば、とりあえずCollectionViewが表示されます。

とりあえず表示だけ

この状態のプロジェクトは次回にまた使うので、コミットをしておいてください。単純にコピーして取っておいてもかまいません。

♪　♪　♪

さて、ここから並べ替えが出来るように修正します。行うことは3つだけです。

1. CollectionViewのセルの移動を可能にする。
2. セルの移動処理を追加する。
3. ロングタップのリスナーを登録する

ViewController+UICollectionViewDataSource.swift

	import UIKit
	extension ViewController: UICollectionViewDataSource {
	//省略//
	func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
	return true
	}
	func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
	reorderCells(sourceIndex: sourceIndexPath.item, destinationIndex: destinationIndexPath.item)
	}
	// MARK: - PRIVATE METHODS
	/// セルの移動
	///
	/// - Parameters:
	/// - sourceIndex: 移動元の位置
	/// - destinationIndex: 移動先の位置
	private func reorderCells(sourceIndex: Int, destinationIndex: Int) {
	let n = numbers.remove(at: sourceIndex)
	numbers.insert(n, at: destinationIndex)
	}
	}

view raw ViewController+UICollectionViewDataSource.swift hosted with ❤ by GitHub

collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath)でtrueを返して、セルの移動を可能にしています。

移動したときの挙動を、collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)に書きます。この例では元データの配列を移動しているだけです。



ViewController+LongPress.swift

	import UIKit
	extension ViewController {
	/// セルの長押しのリスナーの登録
	func addLongPressGestureListner() {
	let longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(handleLongGesture(gesture:)))
	collectionView.addGestureRecognizer(longPressGesture)
	}
	// MARK: - PRIVATE METHODS
	/// セルの長押しジェスチャーのアクション
	///
	/// - Parameters: gesture
	@objc
	private func handleLongGesture(gesture: UILongPressGestureRecognizer) {
	switch gesture.state {
	case .began:
	guard let selectedIndexPath = collectionView.indexPathForItem(at: gesture.location(in: collectionView)) else {
	break
	}
	collectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
	case .changed:
	collectionView.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view))
	case .ended:
	collectionView.endInteractiveMovement()
	default:
	collectionView.cancelInteractiveMovement()
	}
	}
	}

view raw ViewController+LongPress.swift hosted with ❤ by GitHub

CollectionViewの長押しのリスナーです。



ViewController.swift

	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var collectionView: UICollectionView!
	var numbers: [Int] = []
	override func viewDidLoad() {
	super.viewDidLoad()
	for n in 0..<100 {
	numbers.append(n)
	}
	addLongPressGestureListner() //セルの長押しのリスナーの登録
	}
	}

view raw ViewController.swift hosted with ❤ by GitHub

あとは、ViewControllerのviewDidLoad()で、長押しのリスナーを登録します。
これで、セルの移動が可能になります。


めでたし、めでたし。で、「UICollectionViewの並び替え（iOS11編）」に続きます。