【Android】recyclerview + roomで境界線を動的に表示したい

Question

前提

現在android studioでtodoリストを作っております。
仕様は次の通りになります。

• roomに登録したtodoリストデータを、recyclerviewで一覧表示する（データは登録、更新、削除が別画面にて行える）
• リスト行の左側にはチェックボックスが用意されており、チェックが入ると次を行う

①番号リスト文字をグレー化する
②取り消し線が表示される
③行を自動的に下部に移動する（チェックがついていない行とついている行でソートする）
④右下のFABボタンを押下する事でチェック状況をroomに更新する

アプリのイメージは次の通りになります。

todoリスト作成時

チェック押下後

実現したいこと

チェックがついていない行とついている行に、次のイメージのような境界線を
導入したいと考えております。

リスト内にチェックが1つもついていない場合は境界線を表示せず、1つ以上チェックがついたら
境界線を表示させる処理を実現したいのですが、アイデアが思い浮かばず悩んでおります。

リストデータに境界線用のデータを追加し、todoデータ用レイアウトと境界線用レイアウトを表示させる方法を考えたのですが、
roomに更新・取得する際に次の処理を行うことに違和感を感じました。
①更新時に境界線用のデータを除外しなくてはならない
②取得時に境界線用のデータを作成しなくてはならない

アドバイスなど御座いましたら、ご教示頂けませんでしょうか。
宜しくお願い致します。

Comments

[jimbe]

"違和感を感じている" コードやレイアウトをご提示頂けませんでしょうか。

[hoshi-takanori]

例えば 1 と 3 にチェックした場合、順番はそのままで 1 と 2 の間と 2 と 3 の間にそれぞれ境界線が入るのでしょうか？ それとも、チェックのついてない 2 と、チェックされた 1 と 3 をグループ分けして、境界線は 1 本だけ？

[bunjin]

>jimbeさん
早速のご回答ありがとうございます。
ごめんなさい、"違和感を感じている"コードについては実装手段を考えている段階に留まっており、まだ実装はしていないです...

＞hoshi-takanori
ご回答ありがとうございます。
ごめんなさい、ソートについて説明が不十分でした。

１と３にチェックした場合ですが、例えば次の状態でリストがあるとします。
-----------------
□１
□２
□３
-----------------

ここで、1にチェックを入れると、チェックを入れたtodoが自動的に最下部にソートします。
-----------------
□２
□３
☑１
-----------------

更に、２にチェックを入れると、２が最下部にソートします。
-----------------
□３
☑１
☑２
-----------------

実装では、各todoにソート番号を持たせて、第一ソートをチェックの有無、第二ソートをtodoのソート番号としてソートさせております。
チェックに設定したイベントハンドラーを用いて上記ソートを行い、ソート後のポジション番号をnotifyItemChangedメソッドに渡し、アニメーション表示で移動をさせています。
そのため、リストの上部にはチェック無し、下部にはチェック有りで表示される仕様となっております。

やりたい事は、チェック無しと有りの間に境界線を1本入れたいと考えております。先ほどの例でいうと、１のみチェックをいれた場合は
-----------------
□２
□３
ーー境界線ーー
☑１
-----------------

１と２にチェックを入れた場合は
-----------------
□３
ーー境界線ーー
☑１
☑２
-----------------

と表示されるように出来ればと考えております。

[jimbe]

> "違和感を感じている"コードについては実装手段を考えている段階に留まっており
感覚だけで躊躇していても埒が明きません。ご提示の「イメージ」はどのように作成されたのでしょうか。
とにかく書いてみてそれをご提示頂いた上で「これはどうにかならないものか」というご質問のほうが具体的かつ修正等の提案も受け易いと思うのですが、如何でしょうか。

Answer 1

表示だけのことですので、リストデータを弄る必要はありません。
complete と表示したい position のデータを求められたら complete のレイアウトデータを返すようにし、 それ以降のデータを求められたら position-1 の位置の実際のデータを返すだけです。

---

Room は関係しなくても良さそうですので、表示部分だけテキトウに作って見ました。
(単に kotlin も Room も不慣れ(or ほぼ分からない)なだけですが...)

package com.teratail.q372341

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.CheckBox
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.ViewModelProvider
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val adapter = ToDoAdapter()
    val recyclerView = findViewById<RecyclerView>(R.id.recyclerview)
    recyclerView.adapter = adapter
    recyclerView.layoutManager = LinearLayoutManager(this)

    val todoViewModel = ViewModelProvider(this).get(ToDoViewModel::class.java)
    todoViewModel.readAllData.observe(this, { todo -> adapter.setData(todo) })

    todoViewModel.add(ToDo(1, false, "todo 1"))
    todoViewModel.add(ToDo(2, true, "todo 2"))
    todoViewModel.add(ToDo(3, false, "todo 3"))
  }
}

data class ToDo(
  val id: Int,
  val complete: Boolean,
  val text: String
)

class ToDoAdapter: RecyclerView.Adapter<ToDoAdapter.ToDoViewHolder>() {
  private var todoList = emptyList<ToDo>()
  private val layouts = arrayOf(R.layout.recyclerview_item, R.layout.recyclerview_separator)

  class ToDoViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
    val checkBox: CheckBox?
    val textView: TextView?
    init {
      checkBox = itemView.findViewById(R.id.checkBox)
      textView = itemView.findViewById(R.id.textView)
    }
  }

  override fun getItemViewType(position: Int) = if(position == separateIndex()) 1 else 0

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
    ToDoViewHolder(LayoutInflater.from(parent.context).inflate(layouts[viewType], parent, false))

  override fun getItemCount() = todoList.size + if(separateIndex() >= 0) 1 else 0

  override fun onBindViewHolder(holder: ToDoViewHolder, position: Int) {
    val separateIndex = separateIndex()
    if(position == separateIndex) return //セパレータに表示するデータは無い

    val pos = position - if(position > separateIndex) 1 else 0
    val todo = todoList[pos]
    holder.checkBox?.isChecked = todo.complete
    holder.textView?.text = todo.text
  }

  fun setData(todoList: List<ToDo>) {
    this.todoList = todoList.sortedWith(compareBy<ToDo> { it.complete }.thenBy { it.id })
    notifyDataSetChanged()
  }

  private fun separateIndex() = todoList.indexOfFirst { it.complete }
}

class ToDoViewModel() : ViewModel() {
  private var allData : MutableList<ToDo> = mutableListOf()
  val readAllData = MutableLiveData<List<ToDo>>(allData)

  fun add(todo: ToDo) {
    allData.add(todo)
    readAllData.value = allData //LiveData発火
  }
}

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

  <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/recyclerview"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/layout/recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <CheckBox
      android:id="@+id/checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/textView"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toRightOf="@id/checkBox"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintBaseline_toBaselineOf="@id/checkBox" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/layout/recyclerview_separator.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:text="Complete"
      android:layout_marginTop="5dp"
      android:layout_marginBottom="10dp"
      android:paddingLeft="5dp"
      android:background="@drawable/upperline"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

res/drawable/upperline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item>
    <shape android:shape="rectangle">
      <solid android:color="#FFFFFF"/>
      <stroke android:width="1dp" android:color="#AAAAAA" />
    </shape>
  </item>

  <item android:top="1dp">
    <shape android:shape="rectangle">
      <solid android:color="#FFFFFF"/>
    </shape>
  </item>
</layer-list>