안드로이드 개발 (24) - 페이징 처리 실제 구현

 

https://gift123.tistory.com/52

안드로이드 개발 (23) - 페이징 처리 1편

 

연습용 api:

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

Kakao Developers

(위에서 daum Api 이미지검색을 사용)

 

안녕하세요 Loner 입니다. 1편에 이어서 작성해가보도록 하겠습니다. 

1편은 페이징 처리에 관한 간단한 점화식을 만들었습니다.

결과는 (현재데이터갯수/20) +1로 다음 필요한 페이지 수를 구하는 방법이었습니다.

 

그래서 api(page = (현재데이터갯수/20) +1, count = 20) 와 같은 수식으로 서버로부터 필요한 데이터만 추가로 

더 가져올 수 있습니다.

이번에는 실제 안드로이드 스튜디오 환경에서 어떻게 구현을 할 수 있을지 살펴보도록 하겠습니다.

 

1. 준비

1편에서 설명햇듯이 검색창이 검색어를 입력하면 그에 맞는 아이템들이 검색이 되고 20개씩 데이터를 가져옵니다.

용자가 맨 아래로 스크롤 하면 20개를 추가로 더 가져옵니다. 이에 맞는 필요한 것들을 우선 셋팅해보겠습니다.

 

(1) RecyclerView 사용

데이터 갯수만큼 Item을 생성해줄 RecyclerView를 사용합시다.

 

(2) Bouncy 사용 혹은 NestedScrollView 사용

NestedScrollView를 사용하거나 아래 Bouncy 라이브러리 

두개 중에 하나만 고릅시다. 

 

Bouncy 라이브러리를 사용하면

스크롤 맨 위나 맨 아래에서 바운스 효과를 줄 수 있습니다.

 

UI로 유저와 상호작용하길 좋아하시는 분에게 추천합니다.

https://github.com/Valkriaine/Bouncy

Valkriaine/Bouncy

(다음기회에 안드로이드에서 기본 지원해주는 NestedScrollView에서

Bounce 효과를 만드는 법을 포스팅 할 예정입니다.)

 

두개 중 무엇을 사용하던간에 RecyclerView의 부모 노드로 설정하면 됩니다.

xml에서 아래와 같은 구조를 가지면 됩니다. 

<NestedScrollView>

   <EditText/>

  <RecyclerView/>

</NestedScrollView>

 

(3) EditText 

검색어를 검색할 EditText 입니다. 상단에 가볍게 하나 배치합시다.

검색어 입력시 api를 호출해서 데이터를 받아옵시다.

 

2. 구현

방법은 매우 간단합니다.

 

1) xml에서 3개의 UI를 선언

2) 에딧텍스트의 검색어 입력시 콜백 설정

  -> 기존 RecyclcerView Adapter의 Data를 모두 초기화 

   -> Api(page= 1 , count = 20) 호출로 RecyclerView의 Adapter에 dataList를 update

     -> Update된 데이터를 RecyclerView Adpater에 다시 설정 

 

3) NestedScrollView (혹은 Bouncy)에서 사용자가 맨아래로 움직였을 때 콜백 설정

   -> Api(page= (현재데이터갯수/20)+1 , count = 20) 호출로 RecyclerView의 Adapter에 dataList를 update

     -> Update된 데이터를 RecyclerView Adpater에 다시 설정 

      

위 3가지만 설정한다면 페이징 처리가 완료 됩니다.

 

EditText의 Callback 은 addTextedListener를 사용해서 설정하시면 됩니다.

 editText.addTextChangedListener {
 // fun getData(page:Int, count:Int):List<Data>
 getData(1,20)
   ...
  
        }

나머지는 위 예제 생략...에

기존 db를 다 지우고 

새로 recyclerView Adpater에 값을 갱신해주는 로직을 설정하시면 됩니다.

아니면 위 사안들을 getData함수 내부적으로 셋팅해주셔도 됩니다.

 

 

ScrollView의 Callback은 setOnScrollChangeListener를 사용하시면 됩니다. 

  scrollView.setOnScrollChangeListener { v, _, scrollY, _, _ ->
            if (scrollY == scrollViewRoot.getChildAt(0).measuredHeight - v.measuredHeight){
                getData((dataList.size/20)+1,20)
                ...
                }
 }

그 다음 if문으로 if (scrollY == scrollViewRoot.getChildAt(0).measuredHeight - v.measuredHeight) 조건을 만듭시다.

->  scrollView의 mesauseredHeight와 scrollView의 첫번째 자식 뷰의 mesuredHeighht를 뺀 값에서   

     현재의 scroll 좌표를 표시하는 scrollY와 비교하는 것.

     ->if문의 조건이 true면 사용자가 스크롤을 맨 아래로 이동했다는 의미가 됩니다. 

        ->맨 아래로 이동했을때 api를 호출해줍시다. 

 

editText에서 콜백으로 사용했을 때와 달리

현재데이터 총 갯수를 이용해서 계산하여 다음 페이지 값 구한다음 구한 페이지 값을 api 매개변수로 넣어서 데이터를 호출해줍니다.

getData((dataList.size/20)+1,20)

editText 콜백과 마찬가지로

나머지는 위 예제 생략...에 recyclerView Adpater에 값을 갱신해주는 로직을 설정하거나

혹은 getData함수 내부적으로 셋팅해주시면 됩니다. 

 

3. 마무리 

위와 같이 사용하면 아주 간단한 페이징 처리 구현은 끝이 납니다.

하지만 EditText의 addTextedListener는 글자가 하나라도 바뀌면 바로 콜백을 타서 api가 호출된다는 것을 알 수 있습니다.

 

다음 포스팅에서 코루틴의 job 을 이용해서 필요한때만 addTextedListener에서 셋팅한 로직이 사용되도록 하는 방법과 더 나아가 사용자가 검색했던 검색어를 미리보기 추천으로 표시하는 법을 알아보도록 하겠습니다.