【AndroidStudio】KotlinでToolBarに検索欄を作りたい

やりたいことはタイトルの通りToolBarに検索欄をつけたかったので，その方法について載せる．
# 完成イメージ
上の画像のように検索アイコンがあり，アイコンをタップすると下の画像のように文字入力ができるようになる
![2022-09-11 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/dcd6243c-1707-fe0c-f7f1-60e7c660d3ac.png)
![2022-09-11 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/11fb444e-a123-4662-b4de-fd8b3078c606.png)

# ToolBarを追加する
まずはToolBarを表示させたいレイアウトにToolBarを追加する
```xml: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.appcompat.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
    </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>
```
テーマは特に変えていない．私の場合は以下のようになっている．
```xml:AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.nokopi.toolbarsample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ToolBarSample">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
```
```xml:themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ToolBarSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
```

# ToolBarに表示するレイアウトを追加する
ToolBarに表示するレイアウトを作るために新しくリソースディレクトリを作る
まずはresフォルダで右クリック →　New -> Android Resource Directoryの順にクリック　→　Directory nameにmenuと名付けてOK
![2022-09-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/b831b292-d630-b9a7-9cf6-8e5ca3706982.png)
![2022-09-11 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/770841c3-dd12-9292-009b-7eb9673fa90e.png)

作成したmenuフォルダで右クリック →　New -> Menu Resource Fileの順にクリック　→ File Nameに好きな名前を付けてFinish
![2022-09-11 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/481301d4-5222-ad91-eb19-978b4d059eed.png)
![2022-09-11 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/86d7d685-8c58-813a-227f-d43b9fd67273.png)

作成したファイルに検索欄であるSearchViewを追加
ここに書くことで自由にToolBarにwidget等を追加できる．
```xml:toolbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/search_bar"
        android:title="search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="always"/>

</menu>
```
## 余談
ちなみにapp:showAsActionの設定はalwaysにすると完成イメージのように常に表示される状態となる．neverにすると上の画像のようにToolBar右端のメニューにまとめられタップすると下の画像のようにまとめられたものが表示される．ifRoomはToolBarに表示するスペースがあれば常に表示され，なければ右端のメニューにまとめられる.
![2022-09-11 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/825fc55b-d124-08a5-7f8e-2b98c9fa8670.png)
![2022-09-11 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2671458/a1d2a32e-914e-4335-6e92-a000dbabc6e2.png)

# 検索欄に文字が入力されたときの処理を書く
```kotlin:MainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.Menu
import android.widget.SearchView

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

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar_layout, menu)
        val searchItem = menu?.findItem(R.id.search_bar)
        val searchView = searchItem?.actionView as SearchView
        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextChange(newText: String?): Boolean {
                // 文字が入力されるたびに実行することを書く
                return false
            }

            override fun onQueryTextSubmit(newText: String?): Boolean {
                // キーボードの検索ボタンが押されたりとか文字入力が確定されたときに実行されることを書く
                return false
            }
        })
        return true
    }

}
```
onCreateOptionsMenuのmenuInflater.inflateには作成したToolBarのレイアウトを指定
onQueryTextChangeに書いた処理は文字が入力されるたびに実行される．文字が入力された段階でリアルタイムに検索結果を表示したいときはここに書くといい．
onQueryTextSubmitに書いた処理はキーボードの検索ボタンとか決定ボタンが押されて文字入力が確定されたときに実行される．文字を入力して文字を確定した時に検索結果を表示したいときはここに書くといい．

# 参考資料
* [kotlinでToolbarを表示して検索バーやスイッチを設置する方法](http://android.techblog.jp/archives/8578501.html "kotlinでToolbarを表示して検索バーやスイッチを設置する方法")

# おわりに
これで割と自分好みにToolBarをカスタマイズできるようになるはず．
最後まで読んでいただきありがとうございました！何かありましたらコメントお願いします．