· Android Jetpack Compose Room

Jetpack Composeでインクリメンタルサーチ(SearchBar UI)を実装するには

  • このエントリーをはてなブックマークに追加

はじめに

composeバージョンは 1.0.0-beta04 です。

検索入力欄に検索した文字列を入れるとリストが絞り込まれる、いわゆるインクリメンタルサーチを実装したいとおもいます。下の動画のようなイメージです。

SearchBarのUIを作るには?

だいたいこんな感じで作れます。

ROOMで部分検索するには

@Dao
interface QrResultDao {

    @Query("SELECT * from qr_results WHERE text LIKE '%' || :query || '%' " +
            "OR name LIKE '%' || :query || '%' ORDER BY updated_at DESC")
    suspend fun search(query: String): List<QrResultEntity>
}

こんな感じ。

ViewModelの実装は

SearchQrResultUseCaseを使ってますが、基本的にはDaoのsearchまでの橋渡しなので省略。型変換とかはしています。

SearchBarとリストをくっつけると

listを監視して、検索されたらUIに通知するみたいな感じです。

以上です。

  • このエントリーをはてなブックマークに追加
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket