Nested Scrollable List in Android

in Google I/O 2024 Watch Party in Busan

Transcript

1. 최성훈 | GDG Busan Organizer Nested Scrollable List in Android
2. 최성훈 - GDG Busan Organizer - Pukyong national university Computer Engineering - Woowacourse 5th - Studying Android & Server Introduction
3. Let’s Make GDG Busan App Android
4. Design like… Design
5. Nested Scrollable List with RecyclerView Section 1 Views
6. RecyclerView? Android View System 에서 정적, 동적 목록을 그리기 위해 사용 findViewById 의 Cost 를 줄이기 위해 ListView 와 달리 ViewHolder 패턴을 강제. LayoutManager 로 Linear, Grid, StaggeredGrid 형태를 쉽게 구현 Animation 전용 클래스 제공 Section 1
7. 목록을 보여주면서 스크롤이 가능해야… Horizontal Linear RecyclerView Vertical Linear RecyclerView Section 1 ScrollView
8. Horizontal Linear RecyclerView Vertical Linear RecyclerView Section 1 ScrollView Organizer Adapter PastEvents Adapter Organizer ViewHolder PastEvents ViewHolder
9. Section 1 Organizer Adapter Organizer ViewHolder
10. Section 1 Horizontal Linear RecyclerView Vertical Linear RecyclerView ScrollView
11. Section 1
12. Section 1 Horizontal Linear RecyclerView Vertical Linear RecyclerView NestedScrollView
13. Section 1
14. Section 1 해결…?
15. Section 1
16. How to make it Recyclable? Section 1
17. Section 1 Using Multi View Type RecyclerView 는 ViewType 에 따라 다른 ViewHolder 를 사용하도록 할 수 있다. RecyclerView 의 ViewHolder 안에 RecyclerView 를 넣을 수 있음. 출처: https://medium.com/androiddevelopers/merge-adapters-sequentially-with-mergeadapter-294d2942127a ViewType1 ViewType2
18. ViewType2 ViewType3 Section 1 ViewType1 ViewType4
19. Using Multi View Type ViewType2 ViewType3 Section 1 ViewType1 ViewType4
20. Horizontal Linear RecyclerView Section 1 Organizer Adapter Organizer ViewHolder PastEvent ViewHolder GdgBusan RecyclerView GdgBusan Adapter Organizers ViewHolder PastEvents TitleViewHolder NowHere ViewHolder View Types
21. Section 1
22. RecyclerVIew 1.2.0 부터 추가 여러 Adapter 를 하나의 Adapter 로 합쳐서 사용가능 ConcatAdapter Section 1
23. WrapContent 높이를 예측할 수 없어 아이템 개수 만큼 객체 생성. 재사용이 불가해 성능 문제 야기. But, 구현이 매우 간단하기 때문에 아이템 개수가 적다면 충분히 고려해볼 수 있음. 재사용 가능. Layout 파일을 수정하지 않아도 아이템만 추가해주면 같은 뷰를 몇 번이든 띄울 수 있음. But, 구현이 복잡하고 시간이 오래 걸림. NestedScrollView Multi View Type 재사용 가능하며 Multi View Type 보다는 비교적 간단. Adapter 를 여러 개 이어 붙이는 방식. But. 아이템이 하나여도 어댑터로 구현해야 함. ConcatAdapter.Config 에 대해 제대로 이해하지 못하는 개발자와 협업한다면 사이드 이펙트 발생 가능성. ConcatAdapter Section 1 01 02 03 Epoxy of Airbnb etc..
24. Jetpack Compose Nested Scrollable List with Lazy Layouts Section 2
25. 많은 아이템을 보여줄 때 Column, Row 등의 Layout 을 사용하면 성능 이슈를 마주할 수 있다. Compose 는 화면에 보이는 아이템만 구현하는 컴포넌트 Lazy Layouts 을 제공한다. Composable content block 을 인자로 받는 다른 Compose Layout 과 다르게 않고 LazyListScope.() block 을 인자로 받는다. Section 2 Lazy Layouts in Compose
26. Using LazyListScope Functions Section 2
27. Section 2 GdgBusanScreen LazyColumn Organizers LazyRow Organizer Item PastEvents LazyColumn Event Item Event Item Event Item Organizer Item Organizer Item
28. Section 2 LazyRow Organizers LazyColumn Past Events LazyColumn GdgBusanScreen
29. Section 2 짜잔~ java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope.
30. Section 2 checkScrollableContainerConstraints..kt Compose 에서는 중첩해서 같은 방향으로 Scrollable container 를 사용할 때 컨테이너 크기가 고정되어 있지 않으면 성능 저하 문제가 발생할 수 있어 권장하지 않는다.
31. Section 2 GdgBusanScreen LazyColumn Organizers LazyRow Organizer Item PastEvents LazyColumn Event Item Event Item Organizer Item Organizer Item 내부 LazyColumn 의 높이를 고정시키거나 Event Item
32. Section 2 GdgBusanScreen LazyColumn Organizers LazyRow Organizer Item Event Item Event Item Event Item Event Item Organizer Item Organizer Item 외부 LazyColumn 의 LazyListScope 에 위치시켜야 함.
33. Section 2 LazyRow Organizers Past Events items LazyColumn GdgBusanScreen
34. Section 2
35. Section 2
36. - Smart Recomposition, not Recycling - No ViewHolders, Easy Implimentation - Add items with Kotlin collections … Lazy Layouts RecyclerView NestedScrollView, Multi View Type, ConcatAdapter, Epoxy, Motion layout, … View Compose
37. “There’s no right answer.” 팀과 프로젝트에 적합한 기술을 선택하자. 그러려면 명확한 근거를 제시할 수 있어야 한다. 레거시 코드를 고쳐야 할 수도 재사용이 중요한 게 아닐 수도 혹은 재사용이 필요 없을 수도 Compose 를 모르는 팀원이 있을 수도