質問編集履歴

問題となる部分が違うことに気がついたので、問題の根本的な部分にフォーカスするように修正しました。

2020/12/26 05:17

投稿

iMASAKI

スコア12

test CHANGED Viewed

	@@ -1 +1 @@
1	- LiveD~~ata~~の更新による~~DiffUtil~~の挙動
1	+ [RecyclerView] DBの更新による並び替えの挙動

test CHANGED Viewed

@@ -1,76 +1,120 @@
 ### 問題になっていること
-`ItemTouchHelper.SimpleCallback`を用いてリストの並び替えを行っているのですが、
-並び替えの方法によって`RecyclerView`が期待に反した更新になってしまいます。
-### 並び替えの対象となるクラス
-```kotlin
-data class Task(
-    val id: TaskId = TaskId(),
-    val title: TaskTitle,
-    val isDone: Boolean = false
-)
-```
-### 並び替えの方法
-メソッドの戻り値としてはどちらの方法をとっても同じ値を取るのですが、
-1番の方法をとると`RecyclerView`の更新が正常に行われません。
-1  `remove()`と`add()`メソッドを利用して更新
-```kotlin
-fun reorder(start: Int, end: Int): List<Task> {
-        if (start < 0 || start > this.tasks.size) throw RuntimeException()
-        if (end < 0 || end > this.tasks.size) throw RuntimeException()
-        if (start == end) throw RuntimeException()
-        val reordered = tasks.toMutableList()
-        val target = reordered[start]
-        reordered.removeAt(start)
-        reordered.add(end, target)
-        return reordered
-    }
-```
-2  `Collections.swap`を利用して更新
-```
-fun reorder(start: Int, end: Int): List<Task> {
+`ItemTouchHelper.SimpleCallback`を用いてRecyclerViewの並び替えの実装をしています。
+並び替えをする際にDBと同期するようにしているのですが、DBの更新によるコールバックを受けると、
+並び替えが期待するものと違った動作をしてしまいます。
+```kotlin
+// DBからの更新を受け取り、リストを更新
+Repository.items.observe(viewLifecycleOwner) {
+    adapter.submitList(it)
+}
+```
+- 初期状態
+![初期状態](9f793c0b33255ef5334cb3b455f01480.png)
+- 並び替え直後
+ 最初のタイルを最後へ移動します。
+![並び替え直後](09106009101dbab97fd080e1121a71f2.png)
+- DBのコールバックによる更新
+  DBから並び替えが行われたデータの通知が来ます。
+  このデータは(1,2,3,4,0)と正しく並び替えられていて、リストの更新は起きないことが期待されます。
+　しかし、実装によって以下のようにリストが勝手に更新されてしまいます。
+![DBのコールバックによる更新](4c804506933d829bd7bde578182cc706.png)
+### 並び替えの実装
+この実装の方法によって問題となっている並び替えが発生しないことがあります。
+まず、問題が発生してしまう実装から提示します。
+ItemListでItemの順番を管理しています。
+ややこしいですが、私はDBにFirestoreを利用していて、どうしてもこのような実装になってしまいます。
+```kotlin
+// Itemの順番をIDにより管理する
+data class ItemList(
+    val itemIds: List<Int>
+)
+// データの中身
+data class Item(
+    val id: Int,
+    val value: Int
+)
+```
+```kotlin
+object Repository {
+    private val _items = List(5) { Item(id = it, value = it) }
+    private val _list = ItemList(itemIds = List(5) { it })
+    private val list = MutableLiveData(_list)
+    val items: LiveData<List<Item>> = list.map { list ->
+        // データをlist.itemIdsの順番に並び替える
+        list.itemIds.map { id ->
+            _items.first { it.id == id }
+        }
+    }
+    suspend fun reorder(start: Int, end: Int) {
+        delay(500)
         if (start < end) {
             for (i in start until end) {
-                Collections.swap(this.tasks, i, i + 1)
+                Collections.swap(_list.itemIds, i, i + 1)
             }
@@ -78,97 +122,73 @@
             for (i in start downTo end + 1) {
-                Collections.swap(this.tasks, i, i - 1)
+                Collections.swap(_list.itemIds, i, i - 1)
             }
         }
-        return tasks
-    }
-```
-### 実際に発生する問題
-並び替えの方法の一番目の方法をとると、以下のように２回更新がかけられてしまいます。
-###### 例) 1 -> 2に並び替え
-1. 初期状態
-![初期状態](62e0e101112e1ee5356b324656f89028.png)
-1. onMove内の`notifyItemMoved`による並び替え(期待する状態)
-![並び替え](79092f8d6c7031d7ced766937c3cadbf.png)
-1. LiveData更新にともなうDiffUtilによる並び替え(再び並び替えが発生)
-![LiveData](62e0e101112e1ee5356b324656f89028.png)
-### 関連するコード
-```kotlin
-// ListAdapter内のデータの更新処理
-viewModel.tasks.observe(lifecycleOwner, { tasks ->
-     adapter.submitList(tasks)
-})
-```
-```kotlin
-// Adapter
-class EditTaskListAdapter(private val viewModel: TaskViewModel) :
-    ListAdapter<Task, EditTaskViewHolder>(EditTaskListDiffItemCallback()) {
-    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): EditTaskViewHolder {
-        return EditTaskViewHolder.from(parent)
-    }
-    override fun onBindViewHolder(holder: EditTaskViewHolder, position: Int) {
-        val task = getItem(position)
-        holder.bind(viewModel, task)
-    }
-}
-```
-```kotlin
-// DiffUtil
-class EditTaskListDiffItemCallback : DiffUtil.ItemCallback<Task>(){
-    override fun areItemsTheSame(oldItem: Task, newItem: Task): Boolean {
+        list.value = _list
+    }
+}
+```
+次に、問題になっている並び替えが発生しない実装です。
+素直にItemをListで保持し、それを並び替えています。
+```kotlin
+object Repository {
+    private val _items = List(5) { Item(id = it, value = it) }
+    val items: MutableLiveData<List<Item>> = MutableLiveData(_items)
+    suspend fun reorder(start: Int, end: Int) {
+        delay(500)
+        if (start < end) {
+            for (i in start until end) {
+                Collections.swap(_items, i, i + 1)
+            }
+        } else {
+            for (i in start downTo end + 1) {
+                Collections.swap(_items, i, i - 1)
+            }
+        }
+        items.value = _items
+    }
+}
+```
+### RecyclerView周りの実装
+```kotlin
+class MyDiffUtil : DiffUtil.ItemCallback<Item>() {
+    override fun areItemsTheSame(oldItem: Item, newItem: Item): Boolean {
         return oldItem.id == newItem.id
@@ -176,18 +196,214 @@
-    override fun areContentsTheSame(oldItem: Task, newItem: Task): Boolean {
+    override fun areContentsTheSame(oldItem: Item, newItem: Item): Boolean {
         return oldItem == newItem
     }
-}
+}
-```
+```
+```
+class MyViewHolder(private val binding: FragmentFirstBinding) :
+    RecyclerView.ViewHolder(binding.root) {
+    companion object {
+        fun from(parent: ViewGroup): MyViewHolder {
+            val inflater = LayoutInflater.from(parent.context)
+            val binding = FragmentFirstBinding.inflate(inflater, parent, false)
+            return MyViewHolder(binding)
+        }
+    }
+    fun bind(num: Int) {
+        binding.myText.text = num.toString()
+    }
+}
+```
+```
+class MyAdapter : ListAdapter<Item, MyViewHolder>(MyDiffUtil()) {
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
+        return MyViewHolder.from(parent)
+    }
+    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
+        return holder.bind(getItem(position).value)
+    }
+}
+```
+### ItemTouchHelper
+DBの更新頻度を減らすために、並び替え終了時にDBを更新しています
+```kotlin
+class MyItemTouchHelperCallback(
+    private val callback: Callback
+) : SimpleCallback(
+    UP or DOWN or LEFT or RIGHT,
+    0
+) {
+    private var start: Int? = null
+    private var end: Int? = null
+    override fun onMove(
+        recyclerView: RecyclerView,
+        viewHolder: RecyclerView.ViewHolder,
+        target: RecyclerView.ViewHolder
+    ): Boolean {
+        val from = viewHolder.adapterPosition
+        val to = target.adapterPosition
+        start = start ?: from
+        end = to
+        recyclerView.adapter?.notifyItemMoved(from, to)
+        return true
+    }
+    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
+        super.clearView(recyclerView, viewHolder)
+        if (start != null && end != null)
+            callback.reorder(start!!, end!!)
+        start = null
+        end = null
+    }
+    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
+    }
+    interface Callback {
+        fun reorder(start: Int, end: Int)
+    }
+}
+```
+```kotlin
+class MainFragment : Fragment(), MyItemTouchHelperCallback.Callback {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // ...
+        Repository.items.observe(viewLifecycleOwner) {
+            adapter.submitList(it)
+        }
+        val itemTouchHelper = ItemTouchHelper(MyItemTouchHelperCallback(this))
+        itemTouchHelper.attachToRecyclerView(binding.listView)
+        return binding.root
+    }
+    override fun reorder(start: Int, end: Int) {
+        lifecycleScope.launch {
+            Repository.reorder(start, end)
+        }
+    }
+}
+```
 ### 回答していただきたいこと
-なぜ`Collections.swap`を利用して並び替えを行うと、上記のような問題が発生しないのかを教えていただきたいです。
+データの本体とデータの順番を分けた実装で、どのようにすれば正しく並び替えができるのかを教えていただきたいです。
+また、何故この方法ではうまく行かないのかを教えていただけると助かります。

問題となるところを回避する方法を見つけたので、根本的な問題と関係ないところを削除しました。

2020/12/26 05:17

投稿

iMASAKI

スコア12

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~RecyclerViewのItemTouchHelper内での更新と~~LiveDataの更新の競合
1	+ LiveDataの更新によるDiffUtilの挙動

test CHANGED Viewed

@@ -1,120 +1,118 @@
 ### 問題になっていること
-以下、順を追って問題点を共有させていただきますが、主となる問題点はItemTouchHelper内の`notifyItemMoved`と
+`ItemTouchHelper.SimpleCallback`を用いてリストの並び替えを行っているのですが、
-データの更新時にDiffUtilが発生させる`notify`系のメソッドが競合して、**予期しないリストの更新**が発生するという点です。
-このとき**データは正常に更新されており**、Viewの更新に問題が発生しています。
+並び替えの方法によって`RecyclerView`が期待に反した更新になってしまいます。
-###### ItemTouchHelperによるリストの更新
+### 並び替えの対象となるクラス
-RecyclerViewにItemTouchHelperを適用して、リストアイテムの並び替え処理を実装しています。
-DBとして`Firestore`を採用しており、更新を頻繁にできないので並び替えが終了した段階でDBを更新しています。
 ```kotlin
-class EditTaskItemTouchHelperCallback(
+data class Task(
-    private val action: ItemCallbackAction
+    val id: TaskId = TaskId(),
-) : SimpleCallback(
+    val title: TaskTitle,
-    UP or DOWN,
+    val isDone: Boolean = false
-    0
+)
-) {
+```
-    interface ItemCallbackAction{
+### 並び替えの方法
+メソッドの戻り値としてはどちらの方法をとっても同じ値を取るのですが、
+1番の方法をとると`RecyclerView`の更新が正常に行われません。
+1  `remove()`と`add()`メソッドを利用して更新
+```kotlin
-        fun onReorder(start: Int, end: Int)
+fun reorder(start: Int, end: Int): List<Task> {
+        if (start < 0 || start > this.tasks.size) throw RuntimeException()
+        if (end < 0 || end > this.tasks.size) throw RuntimeException()
+        if (start == end) throw RuntimeException()
+        val reordered = tasks.toMutableList()
+        val target = reordered[start]
+        reordered.removeAt(start)
+        reordered.add(end, target)
+        return reordered
     }
+```
+2  `Collections.swap`を利用して更新
-    // 並び替えの最初と最後だけを保持
+```
-    private var start: Int? = null
+fun reorder(start: Int, end: Int): List<Task> {
+        if (start < end) {
+            for (i in start until end) {
+                Collections.swap(this.tasks, i, i + 1)
+            }
+        } else {
-    private var end: Int? = null
+            for (i in start downTo end + 1) {
+                Collections.swap(this.tasks, i, i - 1)
+            }
+        }
-    override fun onMove(
+        return tasks
-        recyclerView: RecyclerView,
+    }
-        viewHolder: RecyclerView.ViewHolder,
+```
-        target: RecyclerView.ViewHolder
+### 実際に発生する問題
-    ): Boolean {
+並び替えの方法の一番目の方法をとると、以下のように２回更新がかけられてしまいます。
-        val positionStart = viewHolder.adapterPosition
+###### 例) 1 -> 2に並び替え
+1. 初期状態
+![初期状態](62e0e101112e1ee5356b324656f89028.png)
-        val positionEnd = target.adapterPosition
+1. onMove内の`notifyItemMoved`による並び替え(期待する状態)
+![並び替え](79092f8d6c7031d7ced766937c3cadbf.png)
+1. LiveData更新にともなうDiffUtilによる並び替え(再び並び替えが発生)
+![LiveData](62e0e101112e1ee5356b324656f89028.png)
-        start = start ?: positionStart
-        end = positionEnd
-        // (問題となる箇所)
-        // リストに更新を通知
-        recyclerView.adapter?.notifyItemMoved(positionStart, positionEnd)
-        return true
-    }
-    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
-        super.clearView(recyclerView, viewHolder)
-        if (start != null && end != null)
-　　　　　　 // 並び替えが完了後、DBが更新される
-            action.onReorder(start!!, end!!)
-        start = null
-        end = null
+### 関連するコード
-    }
-    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
-    }
-}
-```
-###### ListAdapter(DiffUtil)によるリストの更新
-リストのデータはDBからのLiveDataに従い、更新がかけられます。
 ```kotlin
@@ -128,49 +126,7 @@
 ```
-###### 問題発生
-ItemTouchHelperのonMove内で`notifyItemMoved`の処理があるので,並び替えが発生します。
-並び替えが完了するとDBにデータの更新処理をかけます。
-次にDBからLiveDataを受け取りAdapter内で再びリストを更新しようとします。
-リストが更新されるとDiffUtilが動作し、内部で`notify`系のメソッドが動作するので、ここでも並び替えが発生します。
-結果、以下のような状況が発生します。
-例) 1 -> 2に並び替え
-1. 初期状態
-![初期状態](62e0e101112e1ee5356b324656f89028.png)
-1. onMove内の`notifyItemMoved`による並び替え
-![並び替え](79092f8d6c7031d7ced766937c3cadbf.png)
-1. LiveData更新にともなうDiffUtilによる並び替え(再び並び替えが発生)
-![LiveData](62e0e101112e1ee5356b324656f89028.png)
-### 補足
-- 並び替え後、DBからのLiveDataは期待通りに並べ替えられています。
-- DiffUtilを適用せずにRecyclerViewを用いるとこのような状況は発生しません。
-- DBの更新処理をかけなければView自体は正常に並び替えられます。(データを更新することはできませんが...)
-### 他の関連するコード
-RecyclerViewにDiffUtilを適用させた状態で実装しています。
 ```kotlin
@@ -232,8 +188,6 @@
 ```
-### 解答をしていただきたいこと
+### 回答していただきたいこと
-DiffUtilの利用をしながらも、並び替え時に発生するDBの更新処理を最低限にできる方法があれば教えていただきたいです。
+なぜ`Collections.swap`を利用して並び替えを行うと、上記のような問題が発生しないのかを教えていただきたいです。
-他のデバイスとのデータの同期をしたいので、ページを戻るときにデータを一括更新するなどはしたくないです。