SearchView, SearchAutoComplete

 

인강에 질문이 들어왔길래 정리해 봅니다.

 

 

 

 

 

 

단순 검색 기능을 ActionBar 혹은 Toolbar 에 추가하겠다면 SearchView 만 이용해도 되지만 검색 추천단어를 제공하려면 SearchAutoComplete를 이용해야 한다.

 

이곳에서 소개하는 SearchView, SearchAutoComplete 모두 androidx 의 클래스들이다.

 

 

SearchView 이용

 

l  menu xml 에 SearchView 등록

 

<?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/menu3"
        android:title="search"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView"/>
</menu>

 

l  onCreateOptionsMenu() 에서 SearchView 획득

 

SearchView 객체를 획득해 이벤트 등록만 하였다.

이벤트 함수는 두개이며 onQueryTextSubmit() 함수가 키보드의 검색 버튼이 클릭된 순간의 이벤트이며 이곳에서 검색 업무를 처리해 주면 된다.  아래의 코드에서는 입력된 검색어를 지우고 검색 아이콘으로 화면을 조정되게 처리하였다.

onQueryTextChange() 함수가 검색어를 입력할 때마다 호출되는 함수이며 주로 추천단어 서비스 할 때 이용하면 된다. 물론 추천단어가 동적이지 않다면 이 함수에 로직을 작성하지 않아도 SearchAutoComplete 만으로도 가능하다. 그런데 유저가 검색어를 입력하는 순간의 문자열을 서버에 보내 그 순간의 추천단어를 동적으로 획득한다면 이 함수에서 서버 연동을 해주고 SearchAutoComplete 의 adapter 를 갱신해 주면 된다.

 

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

        menuInflater.inflate(R.menu.menu_main, menu)



        val menuItem = menu?.findItem(R.id.menu3)

        val searchView = menuItem?.actionView as SearchView



        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener{

            override fun onQueryTextChange(newText: String?): Boolean {

                //검색어 입력 순간마다의 이벤트...

                return true

            }



            override fun onQueryTextSubmit(query: String?): Boolean {

                //키보드에서 검색 버튼을 누르는 순간의 이벤트

                Toast.makeText(this@MainActivity,"$query",Toast.LENGTH_SHORT).show()

                searchView.setQuery("", false)

                searchView.isIconified = true

                return true

            }

        })



        return super.onCreateOptionsMenu(menu)

    }

  

 

SearchAutoComplete 이용

 

SearchView 의 추천단어 서비스를 목적으로 한다.

SearchView 를 이용해 획득해야 하며 검색어 입력 화면 혹은 추천단어 서비스되는 항목의 컬러등을 설정 할 수 있다.

추천 검색어는 Adapter 로 설정이 되며 Adapter 에서 추천단어 서비스가 되는 항목을 원하는 대로 구성하면 된다. 아래에서는 단순히 android.R.layout.simple_list_item_1 을 사용하였다.

 

추천단어 중 하나를 선택했을 때 이벤트 처리 해야 하며 SearchAutoComplete 에 OnItemClickListener 를 등록하면 된다. 아래의 예에서는 유저가 선택한 항목의 추천단어를 SearchView 에 입력하게 하고 토스트 정도 띄웠다.

 

//SearchAutoComplete
val searchAutoComplete: SearchAutoComplete =
    searchView.findViewById(androidx.appcompat.R.id.search_src_text)

searchAutoComplete.setBackgroundColor(Color.RED)
searchAutoComplete.setTextColor(Color.WHITE)
searchAutoComplete.setDropDownBackgroundResource(android.R.color.holo_orange_light)
val datas = arrayOf(
    "android",
    "and",
    "apple"
)
searchAutoComplete.setAdapter(ArrayAdapter(this, android.R.layout.simple_list_item_1, datas))

//항목 선택 이벤트 추가하지 않으면 추천단어 선택시 NPE 발생
searchAutoComplete.setOnItemClickListener { adapterView, view, itemIndex, id ->
    val query = adapterView.getItemAtPosition(itemIndex) as String
    searchAutoComplete.setText("$query")
    Toast.makeText(this,"$query",Toast.LENGTH_SHORT).show()
}

 

사용한 색상은 안 이쁘지만 구분을 위해…