[JAVA][Android] SearchView 구현하기

SearchView란?

검색할 수 있는 메뉴입니다. 앱의 상단에 검색할 수 있는 메뉴를 만들어보겠습니다.

 

(1) 검색 메뉴 선택하기 전 모습

(2) 검색 메뉴 선택한 후 모습

 

1. 먼저 메뉴 XML을 만듭니다.

-> res 폴더 아래에 menu 디렉토리를 만들고 "searhview_menu" 이름의 xml 파일을 만들어줍니다.

searchview_menu.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"
        android:title="@string/app_name"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="collapseActionView|ifRoom"
        app:actionViewClass="android.widget.SearchView" />
</menu>

2. activity_main.xml 코드 작성하기

searhview가 동작할 화면의 레이아웃을 만들어 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtsearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="검색한 내용 : "
        android:textSize="25dp"/>

    <TextView
        android:id="@+id/txtresult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="검색 결과 : "
        android:textSize="25dp"/>

    <TextView
        android:id="@+id/txtstatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="현재 SearchView 상태 : "
        android:textSize="25dp"/>

    <Button
        android:id="@+id/btnexpand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="OnClick"
        android:text="확장하기"
        />

    <Button
        android:id="@+id/btncollapse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="OnClick"
        android:text="축소하기"/>

</LinearLayout>

 

 

3. MainActivity를 작성해보겠습니다.

(1) setOnActionExpandListener - 메뉴의 확장과 축소 이벤트를 관리합니다.

(2) setOnQueryTextListener - 검색,변경 이벤트를 관리합니다.

(3) setSubmitButtonEnable(true) - X 버튼 옆에 검색 버튼을 생성할 수 있습니다.

 

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.SearchView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    MenuItem menuItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //검색 메뉴를 생성하는 메서드 - onCreateOptionsMenu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);

        //searchview_menu.xml 등록
        MenuInflater inflater=getMenuInflater();
        // MenuInflater를 통해 옵션 메뉴를 객체화 시킴. 즉 메뉴와 연결하기위한 객체
        inflater.inflate(R.menu.searchview_menu,menu);
        // inflate : res의 메뉴를 실제 메뉴로 전개하기 위함.
        menuItem=menu.findItem(R.id.search);

        //검색 메뉴 아이콘 클릭했을 시 확장, 취소했을 시 축소
        menuItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                TextView text=(TextView)findViewById(R.id.tx_status);
                text.setText("현재 SearchView 상태 : 확장됨");
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                TextView text=(TextView)findViewById(R.id.tx_status);
                text.setText("현재 SearchView 상태 : 축소됨");
                return true;
            }
        });


        //menuItem을 이용해서 SearchView 변수 생성
        SearchView sv=(SearchView)menuItem.getActionView();
        //검색 버튼 활성화
        sv.setSubmitButtonEnabled(true);

        //SearchView의 검색 이벤트
        sv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            //검색버튼을 눌렀을 경우
            @Override
            public boolean onQueryTextSubmit(String query) {
                TextView text = (TextView)findViewById(R.id.tx_result);
                text.setText("검색 결과 : "+ query + "를 검색합니다.");
                return true;
            }

            //텍스트가 바뀔때마다 호출
            @Override
            public boolean onQueryTextChange(String newText) {
                TextView text = (TextView)findViewById(R.id.tx_search);
                text.setText("검색한 내용 : "+newText);
                return true;
            }
        });
        return true;
    }

    // 검색 메뉴 확장하기, 축소하기 버튼 클릭했을 경우
    public void OnClick(View v) {
        switch (v.getId()) {
            case R.id.btn_expand:
                menuItem.expandActionView();
                break;
            case R.id.btn_collapse:
                menuItem.collapseActionView();
                break;
        }
    }
}

 

검색하고 있을 땐 "검색한 내용" 부분의 text가 바뀌는 것을 확인할 수 있습니다.

검색버튼을 눌렀을 경우 "(검색한 내용) 을 검색합니다"로 text가 바뀌는것을 확인할 수 있습니다.