[Swift]UITableViewのセルの入れ替えが簡単に実装できるライブラリ「SwiftReorder」

投稿日：2017年11月29日更新日：2017年11月25日

1 はじめに
2 準備
3 実装
4 さいごに

はじめに

こんにちは、nukkyです。
今回は、UITableViewでセルを入れ替えたい際に、ドラッグ&ドロップ操作を簡単に実装できるライブラリ「SwiftReorder」を紹介したいと思います。

準備

今回はCocoaPodsを使いたいと思います。
Podfileに以下を追加してください。

 pod 'SwiftReorder', '~> 3.0'

1	pod 'SwiftReorder', '~> 3.0'

追加したらターミナルから以下のコマンドを実行してください。

 pod install

1	pod install

実装

まずは「SwiftReorder」をインポートします

 import SwiftReorder

1	import SwiftReorder

テーブルビューを実装したいコントローラーに以下を継承します

 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

1	class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

StoryboardにUITableViewを設置し、コード上のIBOutletに紐づけてください

 @IBOutlet weak var tableView: UITableView!

1	@IBOutlet weak var tableView: UITableView!

UITableViewのセルに表示するテキストを宣言します
今回は並べ替えがわかりやすい様にナンバリングしたいと思います

 var items = (1...10).map { "Item \($0)" }

1	var items = (1...10).map { "Item \($0)" }

tableViewの初期化をViewDidLoadで行います

 // SwiftReorderのTableViewReorderDelegate tableView.reorder.delegate = self // delegateの初期化 tableView.dataSource = self tableView.delegate = self // セルの初期化 tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")

// SwiftReorderのTableViewReorderDelegate

tableView.reorder.delegate = self

// delegateの初期化

tableView.dataSource = self

tableView.delegate = self

// セルの初期化

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")

UITableViewのrowとSectionを設定をします

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func numberOfSections(in tableView: UITableView) -> Int { return 1 }

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return items.count

}

func numberOfSections(in tableView: UITableView) -> Int {

return 1

}

セルの表示を設定します、ここで先ほど宣言したitemsを表示する様にします
また、表示が更新されない様にドラッグされているセルを最初に返します

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // ドラッグされているセルを返す if let spacer = tableView.reorder.spacerCell(for: indexPath) { return spacer } let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) cell.textLabel?.text = items[indexPath.row] return cell }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

// ドラッグされているセルを返す

if let spacer = tableView.reorder.spacerCell(for: indexPath) {

return spacer

}

let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

cell.textLabel?.text = items[indexPath.row]

return cell

}

extensionでTableViewReorderDelegateを設定します
ここでドラッグ中のセルの更新処理を書いてます

 extension ViewController: TableViewReorderDelegate { func tableView(_ tableView: UITableView, reorderRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) { // Update data model let item = items[sourceIndexPath.row] items.remove(at: sourceIndexPath.row) items.insert(item, at: destinationIndexPath.row) } }

extension ViewController: TableViewReorderDelegate {

func tableView(_ tableView: UITableView, reorderRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {

// Update data model

let item = items[sourceIndexPath.row]

items.remove(at: sourceIndexPath.row)

items.insert(item, at: destinationIndexPath.row)

}

sourceIndexPathにドラッグ中のセルのindexPathが、
destinationIndexPathに移動先のindexPathが入っているので
その情報に習ってmodelを入れ替えています。

実行すると、以下の様な動きができるようになっていると思います

さいごに

「SwiftReorder」いかがでしょうか、
この様な動きを自前で用意するのは面倒なので、ここまで簡単に実装できると便利だと思います。

執筆者：nukky

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

[Swift]UITableViewのセルの入れ替えが簡単に実装できるライブラリ「SwiftReorder」

はじめに

準備

実装

さいごに

フォロー

アプリ情報