[Android Clone App] 당근마켓(#005) 지역 선택 화면 만들기(Room, Paging)

이동현·2020년 9월 2일
0

(위 사진의 출처 : 당근마켓)

다음으로는 지역 정보를 선택하는 화면을 만들기로 결정했다.
아무래도 지역 기반 앱이기 때문에, 모든 기능에 지역에 관련된 값이 인수로 사용되는 경우가 많기 때문이다.

010 : 지역 정보 Room Database 삽입

간단한 지역 정보를 만들어 넣어주었다.

데이터는 JSON 형식의 파일로 제공하며,
값은 id, name, latitude, longitude로 구성되어있다.

Room DB가 만들어 질 때 최초 1회 삽입 되도록 구현을 했다. (Work 사용)

Dao, Repository, Database 등이 만들어 지기 때문에,
앞으로의 재활용성 향상을 위해 Koin을 사용하기로 결정했다.
만들기는 했는데 어떻게 사용하는지 도무지 모르겠어서.. 우선은 일반적인 사용방법으로 Room을 사용했다. (여기서 정말 많은 시간을 쏟은듯..)

011 : 지역 정보 리스트 값 뿌려주기

지명 정보는 전국적으로 보았을 때 적은 양의 데이터가 아닐 것이다.
만약 이 정보를 한꺼번에 불러와서 recyclerview에 뿌려주려고 한다면 당연 버벅임이 생길 것이다.

실제로 당근마켓 지역 리스트는 일정 갯수의 지명 데이터만 보여준 뒤, 스크롤을 일정 부분 내렸을 경우 추가적으로 데이터를 뷰에 업데이트 해주는 방식을 취한다.
(이 방식은 당근마켓 뿐 아니라 각종 SNS, 전화번호부 등에서도 사용한다.)

이번에 구현을 해보고 싶었던 부분이다.

최초에 일부의 데이터만 꺼내와서 화면에 보여주고, 일정 스크롤을 내렸을 경우 추가적으로 데이터를 불러와서 화면에 뿌려주기!

예전에는 이런 기능까지 각종 이벤트 탐지 리스너를 사용해서 직접 구현했었어야 했다고 하지만.. 지금은 Paging Library를 사용하여 간단하게 구현할 수 있다고 한다.

더군다나 Paging은 내가 사용하고 있는 Room 데이터베이스에 대한 지원이 확실하다.

그래서 바로 인터넷을 보면서 공부하기 시작했다.
꽤나 많은 자료들이 있었고, 충분히 이해 한 다음! 적용을 해보았다.
(조만간 Paging에 대해 포스팅을 해보는 시간을 가지는 것도 좋겠다.)

class RegionListViewModel(
    application: Application
): AndroidViewModel(application) {
    private var allRegionsLiveData: LiveData<PagedList<Region>>

    init {
        val config = PagedList.Config.Builder()
        	.setEnablePlaceholders(false)
        	.setPageSize(16)
        	.build()

        val factory: DataSource.Factory<Int, Region> =
            AppDatabase.getInstance(getApplication()).regionDao().selectAllRegions()

        val pagedListBuilder: LivePagedListBuilder<Int, Region> =
            LivePagedListBuilder<Int, Region>(factory, config)

        allRegionsLiveData = pagedListBuilder.build()
    }

    fun getRegionsLiveData() = allRegionsLiveData

처음에 전체 데이터가 한 번에 load 되어 recyclerview에 뿌려졌다.
왜 그런지 구글링을 열심히 하다가.. Config에서 setEnablePlaceholders 속성을 false로 만들어주어 데이터를 연이어 받아오는 작업을 막아주어야 한다는 것을 알았다.

그 이후 PagedList 객체가 페이징 동작을 수행하는 방식이다.

확인은 스크롤바를 통해 가능했다.

사진에는 스크롤바가 보이지 않지만, 처음에는 스크롤바가 엄청 컸다.
스크롤을 내리면서 옆의 스크롤바가 점점 작아지는 것을 확인했는데, 이를 통해 데이터가 계속해서 로딩 되고 뷰가 업데이트 됐음을 확인할 수 있겠다.


다음에는 UI를 조금 더 예쁘게 꾸미고, 검색 기능까지 구현을 해보도록 하겠다.

profile
영차영차

1개의 댓글

comment-user-thumbnail
2021년 6월 5일

안녕하세요 앱 너무 잘만드시는거 같아요 ^^
그런데 저도 중고거래 앱을 제작중인대 참고하고 싶은데
혹시 제작중인 앱 githup 에서 소스 볼수있을가요?

답글 달기