SearchView, 속성 사용법

안녕하세요! Landroid입니다~!

 

보통 안드로이드에서 검색 기능을 구현할 때 많이들 사용하시는데요.

의외로 자료가 많이 없어 구현하는데 애를 먹는 뷰이기도 합니다.

 

그래서 오늘은 SearchView 사용법에 대해 설명하겠습니다.

 

우선 여러분은 검색 기능을 어떻게 구현하시나요?

보통 ToolBar 안에 검색 창을 구현하시는 게 대부분인데

EditText를 이용해서 구현하신가 하면

메뉴에 아이템을 추가해서 검색을 구현하신 분들도 계십니다.

 

하지만 SearchView를 쓰시는 개발자는 그렇게 많지 않습니다.

이유는 커스텀해서 원하는 시는 대로 꾸미지 못하기 때문이라네요.

 

 

그럼 SearchView 속성 만으로 간단하게 사용하는 방법을 알아보겠습니다.

우선 툴바 안에 SearchView를 넣으시고 나중을 위해 아이콘 같은 것도 추가하시면 되겠습니다.

<?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:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:contentInsetStart="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingStart="16dp"
            android:paddingEnd="16dp">

            <androidx.appcompat.widget.SearchView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.appcompat.widget.Toolbar>
</androidx.constraintlayout.widget.ConstraintLayout>

 

searchIcon

SearchView의 검색 아이콘을 지정하는 속성입니다.

기본 아이콘은 아래 왼쪽 그림과 같고 이 속성으로 오른쪽처럼 검색 아이콘을 바꿀 수 있습니다.

왼(searchIcon 사용 X) 오(searchIcon 사용 O)

app:searchIcon="@drawable/ic_search"

 

 

closeIcon

보통 검색 창 오른쪽 끝에 X 표시에 아이콘이 있죠?

네, 그거입니다. 클릭 시 SearchView를 닫아주며 그것을 나타내는 아이콘을 지정하는 속성입니다.

 

지정 안했을 시 기본 아이콘

app:closeIcon="@drawable/ic_baseline_clear_24"

 

iconifiedByDefault

SearchView는 기본적으로 접혀 있는 상태로 시작합니다.

iconifiedByDefault는 기본적으로 true로 설정되어있으며 boolean으로 SearchView의 상태를 나타내는 속성입니다.

 

true로 설정(왼) false로 설정(오)

app:iconifiedByDefault="false"

 

queryBackground

SearchView는 이미지 뷰처럼 백그라운드가 안 먹히는 뷰입니다.

그래서 이를 해결하기 위한 속성이 바로 queryBackground입니다.

queryBackground는 SearchView의 형태를 지정하는 속성입니다.

 

app:queryBackground="@drawable/searchview_background"

 

queryHint

SearchView에 hint를 표시해주는 속성입니다.

 

app:queryHint="검색어를 입력하시오"

 

maxWidth

SearchView의 최대 너비를 지정하는 속성입니다.

그래서 큰 값을 넣으면  SearchView가 좌우 꽉 차게 열리고 닫을 때 원래 모습으로 돌아갑니다.

maxWidth는 보통 xml 보다는 java/kotlin으로 지정하는 경우가 많습니다.

이와 반대로 maxHeight도 있지만 잘 안 씁니다.

 

searchView.maxWidth = Int.MAX_VALUE

 

isSubmitButtonEnabled

SearchView 옆에 검색 버튼을 나타내는 코드

해당 버튼을 클릭 시 검색 처리가 된다.

true일 때

searvhView.isSubmitButtonEnabled = true

 

isIconified (kotlin)

SearchView가 펼쳐져있나 닫혀있나 Boolean으로 나타내는 값

보통 뒤로 가기를 한 번 누르면 검색창이 닫히고 한 번 더 누르면 뒤로 가도록 설계하는데 쓰입니다.

 

override fun onBackPressed() {
    if (!home_search_searchView.isIconified) {
        home_search_searchView.isIconified = true
    } else {
        super.onBackPressed()
    }
}

 

setOnQueryTextListener

SearchView에서 검색 및 변경을 처리하는 코드

searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
        override fun onQueryTextSubmit(query: String?): Boolean {
            
            // 검색 버튼 누를 때 호출
            
            return true
        }

        override fun onQueryTextChange(newText: String?): Boolean {
            
            // 검색창에서 글자가 변경이 일어날 때마다 호출
            
            return true
        }
})