はじめに

だいぶComposeで実装しやすい環境が整ってきましたが、AndroidViewの機能であるSearchViewをComposeで実装したらどんな感じになるのか調べる機会がありましたので、備忘録的に残しておこうと思います。

SearchViewをComposeで実装する

まず旧実装は以下になります。

main.xml

<SearchView
    android:id="@+id/search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:iconifiedByDefault="false"
    android:queryHint="検索" />

Composeが普及してきているとはいえ、XMLを使用したAndroidViewの実装はまだまだ現役ですよね。
上記に対してComposeの実装は以下になります。

main.kt

val focusManager = LocalFocusManager.current
SearchBar(
    query = input,
    onQueryChange = { new -> input = new },
    onSearch = { _ -> focusManager.clearFocus()},
    active = true,
    onActiveChange = { ... },
){
    
}

比べてわかる通り、Composeは直感的に実装ができて良いですね、、、！
このSearchBarが追加されたのは比較的最近なようですが、SearchViewで実現できることはSearchBarでも問題なく実装ができそうです。

ComposeでTextFieldで頑張って実現しようとしている方はSearchBarを使用いただくことを検討しても良さそうです。

さいごに

やはりComposeはいいですね、まだ課題はありつつも着実に使用しやすいように改良されていっています。
もはや新規機能はComposeで作らない理由はなさそうですが、SearchViewのような特殊なUIがComposeでも変わらず実装できるかどうか今後も調べていこうと思います。