[Firebase] 전체 식물 정보 리스트2

식물원의 전체 식물 정보를 볼 수 있는 ‘식물 정보’ 창을 구현하려고 한다.

 

 

전체 식물 정보를 보여줄 화면은 ListView를 사용하였고, 식물 검색 기능에 필요한 EditText와 돋보기 이미지를 넣은 ImageButton도 추가하였다.

 

식물의 데이터는 Firebase를 이용해서 불러온다.

 

 

ListView에 Adapter를 적용시켜준다.

 

 

실행시켜보면 Firebase DB에 계절별 식물을 분리해 놓은 대로 데이터를 잘 불러온다.

 

 

그리고 리스트뷰에서 식물 이름을 클릭했을 때 프래그먼트 창을 띄워서 식물 정보를 제공하기 위해 먼저 식물마다 각각의 프래그먼트 창을 생성해놓았다. 프래그먼트 창 생성은 주제원 프래그먼트 창 생성과 방법이 동일하다.

그리고 AdapterView.OnItemClickListenner라는 리스트뷰 클릭 이벤트 함수를 사용하였다.

위의 함수를 사용할 때 자동 오버라이드 되는 onItemClick() 메소드 안에서 listView의 position 값을 이용해 프래그먼트 창을 불러오게 구현하였다.

주의할 점은 switch case문의 인수값과 position 값이 같아야 한다. 다를 경우 프래그먼트 창을 불러오지 못한다.

 

 

실행시켜보면 Firebase에 넣어놓았던 데이터를 불러와 프래그먼트 창이 잘 뜬다.

 

 

그리고 ‘전체 식물 정보’ 창이기 때문에 검색해서 식물을 검색해서 찾아볼 수 있도록 EditText에서 제공하는 addTextChangedListenner 함수를 사용하였다.

위의 함수를 사용하면 beforeTextChanged(), onTextchanged(), afterTextChanged() 이 세 가지 메소드가 자동 오버라이딩 된다.

beforeTextChanged()는 텍스트를 입력하기 전의 이벤트,

onTextchanged()는 텍스트를 입력하는 중의 이벤트,

afterTextChanged()는 텍스트를 입력한 후의 발생할 이벤트를 말한다.

검색 기능은 afterTextChanged() 메소드 안에 구현한다.

 

 

xml에서 ListView 속성에 textFilterEnabled를 true로 해줘야 검색 필터링 기능을 이용할 수 있다.

 

 

실행시켜서 식물 이름을 검색해보면 필터링이 잘 되는 모습을 볼 수 있다.