[Kotlin Android] 라이브러리를 활용한 CustomSearchView 구현

이번 프로젝트의 최종 목표

구현 방법

gradle 파일 설정

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

프로젝트 단위의 gradle 파일 allprojects 태그에 해당 코드를 삽입한다

dependencies {
	implementation 'com.github.mancj:MaterialSearchBar:0.7.1'
}

app 단위의 gradle 파일 dependencies 태그에 해당 코드를 삽입한다

layout 파일 설정

해당 레이아웃은 ConstraintLayout으로 작성되었음. 이에 유의하여 태그 내 설정에 변화를 주면 됨

<com.mancj.materialsearchbar.MaterialSearchBar
        android:id="@+id/searchBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        //ConstraintLayout 설정
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        //아무것도 입력 안 했을 때 default text
        app:mt_hint="Custom hint"
        app:mt_maxSuggestionsCount="5"
        // 음성검색 사용
        app:mt_speechMode="true"
        app:theme="@style/AppTheme.PopupOverlay" />

	//검색 결과가 띄워지는 ListView
    <ListView
        android:id="@+id/mListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/searchBar"
        />

위의 코드를 layout 파일에 삽입한다

Activity 파일에 코드 추가

		//View - 변수 연결
		val lv = findViewById(R.id.mListView) as ListView
        val searchBar = findViewById<MaterialSearchBar>(R.id.searchBar)
        searchBar.setHint("Search")
        //음성검색모드 끄기
        searchBar.setSpeechMode(false)
        //검색어 목록 넣기
        var galaxies = arrayOf("Sombrero", "Cartwheel", "Pinwheel", "StarBust", "Whirlpool", "Ring Nebular", "Own Nebular", "Centaurus A", "Virgo Stellar Stream", "Canis Majos Overdensity", "Mayall's Object", "Leo", "Milky Way", "IC 1011", "Messier 81", "Andromeda", "Messier 87")

        val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, galaxies)
        //리스트뷰 초기에 안보이게 설정
        lv.visibility = View.INVISIBLE
        //SearchBar와 ListView 연동
        lv.setAdapter(adapter)
        searchBar.setOnSearchActionListener(object : MaterialSearchBar.OnSearchActionListener{
            override fun onButtonClicked(buttonCode: Int) {
                TODO("Not yet implemented")
            }
			//검색창 누른 상태 여부 확인
            override fun onSearchStateChanged(enabled: Boolean) {
                //맞으면 리스트뷰 보이게 설정
                if(enabled){
                    lv.visibility = View.VISIBLE
                }else{ //아니면 안 보이게
                    lv.visibility = View.INVISIBLE
                }
            }

            override fun onSearchConfirmed(text: CharSequence?) {
                TODO("Not yet implemented")
            }

        })
        
        searchBar.addTextChangeListener(object : TextWatcher{
            override fun afterTextChanged(s: Editable?) {

            }

            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {

            }
			//검색어 변경하면 ListView 내용 변경
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                adapter.getFilter().filter(s)
            }

        })

		//ListView 내의 아이템 누르면 Toast 발생
        lv.setOnItemClickListener(object : AdapterView.OnItemClickListener{
            override fun onItemClick(
                parent: AdapterView<*>?,
                view: View?,
                position: Int,
                id: Long
            ) {
                Toast.makeText(this@MainActivity, adapter.getItem(position)!!.toString(), Toast.LENGTH_SHORT).show()
            }

        })

해당 코드를 Activity의 onCreate 함수에 삽입한다

참고 코드

mancj's MaterialSearchBar
https://github.com/mancj/MaterialSearchBar

참고 구현 코드
https://github.com/l2hyunwoo/AndroidOunceSearchBar