検索窓を柔軟に実装する場合はEditTextを使いましょう ~Androidアプリ開発~

はじめに

こんにちは。モバイルソリューショングループの ozaki.k です。
この記事はアイソルート Advent Calendar 2023 の20日目の記事になります。

Androidアプリ開発で初めて検索窓を実装したので、その時に学んだことを書いてきます。

検索窓の実装には SearchView? EditText?

検索機能といえば文字通りSearchViewが良いだろうと考え、最初はSearchViewで検索窓の実装を進めました。

プレースホルダが常に表示されるようにし、SearchViewの虫眼鏡アイコンと入力欄のどちらをタップしてもキーボードが表示されるよう実装したかったのですが、SearchViewではどうしてもそれができませんでした。

そこでSearchViewをEditTextに切り替えたところ、無事実装できました。
(見た目上もSearchViewと同じものを作れます。)

EditTextは汎用的なテキストボックスを生成できますが、検索窓に必要な機能にも柔軟に対応することができたわけです。

EditTextでの検索窓実装

私がEditTextでの検索窓実装に用いた機能について紹介します。

EditText入力欄の下線を無くす

android:background="@null"

EditTextのView内の左端、右端に画像を表示

android:drawableStart
android:drawableEnd

画像と入力テキストの距離を確保

android:drawablePadding

プレースホルダ

android:hint="入力してください"

入力したテキスト表示を一行表示にする

android:maxLines="1" 
android:singleLine="true"

検索モード(キーボードの実行ボタンが虫眼鏡になる)

android:imeOptions="actionSearch"

以下からはViewBindingでの実装です。『binding.editText』の部分は適切に置き換えてください。

入力可能文字数(50文字に設定したい場合)

binding.editText.filters = arrayOf(InputFilter.LengthFilter(50))

キーボードによる入力時、キーボードの実行ボタン押下時に発火するリスナー

//テキスト入力時に発火するリスナー
binding.editText.addTextChangedListener()

//キーボードの実行ボタン押下時に発火するリスナー
binding.editText.setOnEditorActionListener { _, actionId, _ ->
    if (actionId == EditorInfo.IME_ACTION_SEARCH) {
    //実行ボタン押下時の時の処理
    }
    return@setOnEditorActionListener true
}

簡略化してありますが、以下が実装例になります。

<EditText
    android:id="@+id/edit_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:drawableStart="@drawable/search_icon"
    android:drawablePadding="8dp"
    android:hint="入力してください"
    android:textColorHint="#73333333"
    android:imeOptions="actionSearch"
    android:maxLines="1"
    android:singleLine="true"
    android:textSize="16dp" />

companion object { 
    const val SEARCH_TEXT = "search_text" 
} 

..

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState) 
.. 
    binding.editText.filters = arrayOf(InputFilter.LengthFilter(50)) 
    binding.editText.setOnEditorActionListener { _, actionId, _ ->
        val searchText = binding.editText.text.toString() 
        if (actionId == EditorInfo.IME_ACTION_SEARCH && searchText.isNotBlank()) { 
            val intent = Intent(requireActivity(), NextActivity::class.java) 
            intent.putExtra(SEARCH_TEXT, searchText) 
            startActivity(intent) 
        } 
        return@setOnEditorActionListener true 
    } 
}

最後に

個人的に驚いたのは、EditTextでもキーボードの決定ボタンを虫眼鏡アイコンに変えたり、キーボードの決定ボタン押下時の処理を簡単に入れられたことです。
簡単に検索窓を実装したいときはSearchViewが良いですが、自分の好きなデザインで検索窓を作りたい場合はEditTextがおすすめです！

ブログ記事一覧へ戻る

ozakikのブログ

ブログ内検索