[Android][RecyclerView][NestedScrollView] 리사이클러뷰 성능 향상

시작

이번 프로젝트에서 '습관 기르기'라는 테마로 3, 7, 21, 30, 66일의 사진 인증 리스트 화면을 개발하게 되었다.

화면에 기르고자 하는 습관의 정보들과 인증 사진 리스트(작은 정사각형 이미지들이 가로 3 X 세로 n줄로 노출됨)가 모두 나와야 하기 때문에, NestedScrollView를 root view로 두고 화면 layout을 구성했다. 습관과 이미지 정보들은 화면 진입 시 서버에서 받아와 노출한다.

뿌듯하게 다 만들고 나서, 테스트를 하는데 66일치 화면은 성능이 너무 구렸다. 화면이 로드되는 시간이 오래 걸렸다. 이를 개선하고자 마음 먹고 작업에 나선다.

 

왜 성능 문제가 발생하는가

NestedScrollView가 어떻게 돌아가는지 알게 되었다.

https://stackoverflow.com/a/44581288

Recycler View loading very slow for large data when inside NestedScrollView

RecyclerView의 특징이 뷰의 재사용인데, 알고보니 NestedScrollView는 뷰들을 결코 재사용하지 않는 거였다. NestedScrollView는 자식 RecyclerView의 뷰들을 처음에 onCreateViewHolder()로 싸그리 모두 다 만들어 놓고 시작했던 거였다. 처음에 화면에 진입해서 66개의 뷰들을 다 생성하기 때문에 성능이 떨어지는 것이었다.

안드로이드 디벨로퍼스 공식문서에서는 NestedScrollView에 대해 상세 설명을 못 찾아서, stack overflow를 통해서 알게되었다. 

 

해결 방법 찾기 시도

문제 해결을 위해 여러 시도를 한다. 그러나 그 어떤 시도를 해도, 문제의 근본 원인은 NestedScrollView였기에 NestedScrollView를 안쓰는 게 가장 성능이 좋았다.

 

1) 첫 시도. NestedScrollView 안의 리사이클러뷰의 높이를 미리 지정하기.

https://stackoverflow.com/a/42808874

RecyclerView item height and width change dynamically Android

성능 개선이 미미하다. NestedScrollView를 쓰니까... 66개 다 처음에 만드니까.🤦‍♀️

 

2) 두 번째 시도. Adapter의 뷰 타입으로 리사이클러뷰를 넣음. 

RecyclerView를 ViewHolder 로 한 번 더 감싸준 것이다. NestedScrollView 안에 있으니 어짜피 성능 개선은 없다. 왜 이런 시도를 했었는지 지금은 이해가 안 간다고 생각했는데, Wrapper 하나가 생기면 뭔가 달라지지 않을까란 희망을 붙잡고 싶어했던 거 같다🙄 

 

3) 세 번째 시도. NestedScrollView를 없애고, RecyclerView 하나를 root view로 둔다. 습관 정보에 대한 UI들을 넣은 Header Adapter와, 기존 인증 리스트 Adapter를 ConcatAdapter로 묶어 사용한다.

성능 개선이 많이 이루어졌다. 그런데 스크롤 시 버벅인다. 

최초 화면 로드 시간이 줄어 들었다는 성능 개선은 이루어졌지만, 해결해야할 이슈들이 있다.

> 1. 스크롤 시 화면이 버벅인다.

> 2. Header Adpater와 기존 Adapter와 하나의 LayoutManager를 공유한다. Header Adpater는 vertical LinearLayoutManager를 쓰는 게 맞고(다른 말로 하자면 span count가 1인 GridLayoutManger), 기존 Adapter는 span count가 3인 GridLayoutManager를 쓰는 게 적합한 상태다.

 

4) 네 번째 시도. ConcatAdapter 용 커스텀 Adapter 만들기 

https://medium.com/@gsaillen95/how-to-inflate-different-layoutmanagers-for-each-adapter-with-concatadapter-76cdee6266ca

How to inflate different LayoutManagers for each adapter with ConcatAdapter

세 번째 시도에서 서로 다른 LayoutManger를 써야하는 Adapter들을 ConcatAdapter로 묶어야 하는 이슈를 고민하다가 발견함. 결국엔 Wrapper Adapter를 쓴다. 리사이클러뷰 안에 리사이클러 뷰 또 하나 넣는 것이었다. 성능 개선이나, 구현 방식이나 딱히 메리트를 찾지 못했다.

 

선택한 해결 방법

세 번째 방법을 선택했다. NestedScrollView는 없애고 리사이클러뷰 하나로 다 해결하는 방식이다. 결국엔 기능과 화면을 새로 만드는 것을 택할 수 밖에 없었다.🥴🙃

세 번째 방법을 택하면서 나온 이슈들은 다음과 같이 해결했다.

 

1) 스크롤 시 화면 버벅임 

> 이것도 성능 문제이기에 리사이클러뷰 성능 향상을 위해 작업했다.

https://gift123.tistory.com/67

안드로이드 개발 (34) RecyclerView 성능 향상

 

<Adpater> 

•  setHasStableIds(true) 사용
• fun getItemId(position: Int) : Long 사용
•  ListAdapter, DiffUtil 사용 (원래부터 쓰고 있기는 했다.)

<RecyclerView>

• setHasFixedSize(true) 사용
• 애니메이션 제거 : setItemAnimator(null)

<Glide>

• image size 조절 : T override(int size) 사용
• 이미지 노출에 fade in 애니메이션 사용 : transition(DrawableTransitionOptions.withCrossFade())

등

 

2) ConcatAdapter에서 하나의 GridLayoutManager를 쓰는 이슈. Adapter 마다 span count가 달라야 한다.

GridLayoutManager가 리사이클러뷰의 뷰 아이템의 뷰타입 별로 span count를 적용하도록 해야한다. 이것을 가능하도록 하려면, 아이템이 차지하는 span 개수를 변경해서  span count가 변경된 것처럼 보이게 할 수 있다. 

이 방법이 네 번째 방법(Wrapper Adapter 방법)보다 공수가 덜 드는 것처럼 보였다.

 

1. ConcatAdapter 생성 시 Config 값으로 setIsolateViewType(false)를 설정한다.

https://developer.android.com/reference/androidx/recyclerview/widget/ConcatAdapter

ConcatAdapter  |  Android Developers

 

ConcatAdapter는 기본적으로 각 뷰가 각각의 뷰 타입을 갖도록 한다.

 

2. GirdLayoutManager가 뷰 타입에 따라 Span size가 변경되도록 SpanSizeLoopUp을 설정해준다. 그럼 Span count가 변경된 것과 같은 효과가 있다.

 

https://developer.android.com/reference/kotlin/androidx/recyclerview/widget/GridLayoutManager

GridLayoutManager  |  Android Developers

뷰 타입 별 span size를 지정하게 하는 핵심이다.

3칸 중 3칸을 차지하면 span count가 1이 된 것처럼 보인다.

3) GirdLayoutManager 사용 전용 RecyclerView의 뷰 아이템 간 space 영역을 지정하는 커스텀 ItemDecoration 수정

NestedScrollView를 사용하는 것으로 첫 기능 및 화면 구현을 하면서, GridLayoutManager가 설정된 RecyclerView의 뷰 사이의 margin 간격을 넣어주는 커스텀 Item Decoration을 작성했다. 사실 매우 뿌듯했다. 이 정도면 사용하기에도 편하고, 재사용가능한 커스텀 Item Decoration이라 나 외에도 이 프로젝트를 담당하는 다른 개발자들이 사용할 것을 기대했는데, ConcatAdapter에 쓰게 되면서 수정이 필요해졌다. ConcatAdapter에서 원하는 뷰에만 space 처리하기가 까다롭다는 것을 알았다. 원래는 뷰와 뷰 사이(내부 간격) 뿐만이 아니라 가장자리에 위치한 뷰들의 바깥 마진 값(외부 간격)도 처리할 수 있었다. 그런데 ConcatAdapter에 쓰이게 되면서, 뷰타입과 뷰의 위치를 판단하는 조건이 너무나 까다로워졌다. 프로젝트 기간은 맞춰야 되고, 다른 기능들 개발도 해야해서 이것만 붙잡을 수는 없는 상황이고, 당장 쉽게 해결될 것처럼 보이지는 않고. 내부 간격 처리만 하고, 외부 간격 처리 기능은 빼는 쪽으로 타협했다.😔😞😟🥺

 

https://stackoverflow.com/questions/28531996/android-recyclerview-gridlayoutmanager-column-spacing

Android Recyclerview GridLayoutManager column spacing

처음 커스텀 item decoration 개발 시 참고했었다.

 

4) RecyclerView 뷰 재사용하며 발생한 이슈들 수정

NestedScrollView에서는 뷰 아이템들을 재사용하지 않으니 문제가 없었는데, 이제는 뷰를 재사용하니 현재 상태가 아니라 이전 상태의 뷰를 보여주는 이슈가 나타났다. 이전 뷰 상태들을 초기화하는 코드들을 넣어줬다. 

뷰 상태들을 초기화하면서, Glide로 로드한 이미지를 초기화하는 코드도 이번에 알게 됐다.

로드한 이미지 초기화