<div id="readability-page-1" class="page"><div><div><a rel="noopener follow" href="/@hongbeomi?source=post_page-----303b66a1269f--------------------------------"><div aria-hidden="false"><img alt="hongbeom" src="https://miro.medium.com/v2/resize:fill:88:88/1*Mok6UmeBD0xatCqaYrkAUQ.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a><a href="https://medium.com/hongbeomi-dev?source=post_page-----303b66a1269f--------------------------------" rel="noopener follow"><div aria-hidden="false"><img alt="hongbeomi dev" src="https://miro.medium.com/v2/resize:fill:48:48/1*RPsG8oEn86cWemnlV1GoRA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"></div></a></div>ViewPager2의 child view인 RecyclerView와 애니메이션 구현에 대해 알아봅니다.<figure><figcaption>Photo by <a href="https://unsplash.com/@brandi1?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Brandi Redd</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure><h2 id="adfd">ViewPager2</h2><code>ViewPager2</code>는 2019년에 등장한 androidx 라이브러리 입니다. 기존의 오른쪽에서 왼쪽(RTL) 레이아웃, 수직 스크롤, <code>RecyclerView.Adapter</code> 사용 지원 등 기존의 <code>ViewPager</code>와 차이를 두고 있습니다. 이 중에서 <code>RecyclerView.Adapter</code>를 지원할 수 있게 된 방식과 애니메이션 구현 시 주의점에 대해 다뤄보겠습니다.<h2 id="c0e3">구조</h2><figure></figure>기본적으로 <code>ViewPager2</code>를 Layout Inspector로 살펴봤을 땐 특별히 눈에 띄는 부분은 없습니다. 하지만 내부 코드를 살펴보면, <code>ViewGroup</code>을 상속받고 <code>RecyclerView</code>를 생성하여 첫 번째 child view로 보유하고 있는 것을 확인 할 수 있습니다.<pre>public final class ViewPager2 extends ViewGroup { ... RecyclerView mRecyclerView; ... private void initialize(Context context, AttributeSet attrs) { ... mRecyclerView = new RecyclerViewImpl(context); mRecyclerView.setLayoutManager(mLayoutManager); mLayoutManager = new LinearLayoutManagerImpl(context); mScrollEventAdapter = new ScrollEventAdapter(this); mRecyclerView.addOnScrollListener(mScrollEventAdapter); ... attachViewToParent(mRecyclerView, 0, mRecyclerView.getLayoutParams()); } ... }</pre>또한 <code>RecyclerView</code>의 구성에 필요한 <code>layoutManager</code>를 지정하고 <code>scrollEventListener</code>를 등록하여 Snap 동작을 구현합니다. 마지막으로 구성된 <code>RecyclerView</code>를 attach하여 child view로 보유합니다.그렇다면 기본적인 <code>ViewPager</code>의 동작들은 어떻게 <code>RecyclerView</code>로 전달되는지 살펴보겠습니다.<h2 id="2b7d">setOffscreenPageLimit</h2>현재 보이는 페이지의 양쪽을 읽어들일 페이지 수를 지정하는 옵션인 <code>setOffscreenPageLimit</code> 함수는 어떻게 <code>RecyclerView</code>에서 구현될까요? 우선 코드를 살펴보면 RecyclerView의 requestLayout이 호출되는 것을 확인할 수 있습니다.<pre>public void setOffscreenPageLimit(@OffscreenPageLimit int limit) { ... mOffscreenPageLimit = limit; // Trigger layout so prefetch happens through getExtraLayoutSize() mRecyclerView.requestLayout(); }</pre>주석을 보면 <code>getExtraLayoutSize</code>를 트리거한다고 적혀 있습니다. <code>getExtraLayoutSize</code> 함수는 <code>LinearLayoutManager</code>에서 호출되는 함수인데, 배치해야 하는 추가 공간의 양을 가져오는 역할을 합니다.이 함수는 정확히는 <code>LinearLayoutManager</code>의 <code>calculateExtraLayoutSpace</code> 함수에서 호출되는 함수이며, <code>calculateExtraLayoutSpace</code>는 이름에서 알 수 있듯이 현재 배치해야 하는 child view의 추가 공간을 계산하는 함수입니다.<pre>private class LinearLayoutManagerImpl extends LinearLayoutManager { ... @Override protected void calculateExtraLayoutSpace( @NonNull RecyclerView.State state, @NonNull int[] extraLayoutSpace ) { int pageLimit = getOffscreenPageLimit(); if (pageLimit == OFFSCREEN_PAGE_LIMIT_DEFAULT) { // Only do custom prefetching of offscreen pages if requested super.calculateExtraLayoutSpace(state, extraLayoutSpace); return; } final int offscreenSpace = getPageSize() * pageLimit; extraLayoutSpace[0] = offscreenSpace; extraLayoutSpace[1] = offscreenSpace; } }</pre>이전에 본 <code>ViewPager2</code>의 <code>initialize</code> 함수에서 생성되는 <code>LinearLayoutManagerImpl</code> 클래스는 <code>ViewPager2</code> 클래스 내부에 구현되어 있으며 <code>LinearLayoutManager</code>의 <code>calculateExtraLayoutSpace</code> 함수를 <code>override</code> 하고 있습니다. <code>initialize</code> 함수에서 <code>mRecyclerView</code>에 <code>LinearLayoutManagerImpl</code> 클래스를 연결해두었기에 <code>setOffscreenPageLimit</code>에서 <code>mRecyclerView</code>의 <code>requestLayout</code>이호출되는 경우 자연스럽게 override된 <code>calculateExtraLayoutSpace</code>이 호출되어 <code>prefetching</code> 동작이 구현되는 것입니다.따라서 <code>ViewPager2</code>의 <code>setOffscreenPageLimit</code> 동작은 아래와 같은 모습으로 이뤄질 것입니다.<figure></figure><h2 id="c9c3">OnPageChangeCallback</h2><code>Viewpager2</code>에서는 선택된 페이지에 대한 상태 콜백을 제공받기 위해서는 인 <code>OnPageChangeCallback</code> 를 사용해야 합니다. <code>onPageScrolled</code>, <code>onPageSelected</code>, <code>onPageScrollStateChanged</code> 3가지 콜백 함수를 제공하는데, 각각 아래와 같은 상황에 대응합니다.<ul><li id="1924"><code>onPageScrolled</code> : 프로그래밍 방식이나 사용자의 스크롤로 인해 현재 페이지가 스크롤 될 때 호출됩니다. 이 함수는 세 가지 인자를 보유하고 있는데, <code>position</code> 값은 현재 표시되고 있는 페이지의 index 값을 나타냅니다. 다른 인자인 <code>positionOffset</code>의 값이 0이 아닐 경우, 현재 index + 1 값이 떨어집니다. <code>positionOffset</code> 값은 <code>position</code>의 offset 값을 나타냅니다.(0~1 사이의 값) 마지막으로 <code>positionOffsetPixels</code> 값은 픽셀 단위로 표현되는 offset 값입니다.</li><li id="66e5"><code>onPageSelected</code> : 새로운 페이지가 선택될 때 호출됩니다.</li><li id="2bc6"><code>onPageScrollStateChanged</code> : 스크롤 상태가 변경될 때 호출됩니다. 사용자가 드래그를 시작할 때, fake 드래그가 시작될 때, 현재 페이지에 자동으로 이동될 때 또는 완전히 중지(stop)되거나 유휴(idle)상태일 때의 상태 값을 인자로 보유하고 있습니다. (<code>SCROLL_STATE_IDLE</code>, <code>SCROLL_STATE_DRAGGING</code> or <code>SCROLL_STATE_SETTLING</code>)</li></ul><h2 id="46f5">애니메이션 구현</h2>ViewPager2를 사용한다면 흔히 애니메이션을 구현해야 하는 상황에 마주칠 수 있습니다. 이 때 애니메이션을 쉽게 구현할 수 있도록 제공되는 인터페이스가 <code>PageTransformer</code> 입니다. 해당 인터페이스의 콜백 함수는 사용자의 눈에 보이거나 attach된 페이지가 스크롤 될 때마다 호출됩니다.이것은 애플리케이션이 애니메이션 속성을 사용하여 페이지 뷰에 사용자 정의 변환을 적용할 수 있는 기회를 제공합니다.TextView 3개가 들어있는 <code>Viewpager2</code>에 transformer를 지정하고 콜백으로 들어오는 child view의 index, position을 각각 확인해보겠습니다. (child view의 index는 <code>Viewpager2</code>가 아닌, <code>ViewPager2</code>의 child view인 <code>Recyclerview</code>에서 검색해야 합니다.)<pre>val recyclerView = vpMain.getChildAt(0) as? RecyclerView vpMain.setPageTransformer { page, position -&gt; println("ViewPager2 index: ${recyclerView?.getChildAdapterPosition(page)}, position: $position") }</pre><figure><figcaption>0 -&gt; 1번째 페이지로 슬라이드</figcaption></figure>0번째 페이지를 바라보고 있다가, 1번째 페이지로 슬라이드 했을 경우 아래 사진처럼 0, 1번째 페이지의 콜백이 들어오는 것을 볼 수 있습니다. 0번째 페이지의 position 값은 0에서 -1로, 1번째 페이지의 position 값은 1에서 0으로 값이 흐릅니다.<figure></figure>반대로 1번째 페이지를 바라보고 있다가 0번째 페이지로 슬라이드 하면 position 값은 어떻게 들어올까요?<figure><figcaption>1 -&gt; 0번째 페이지로 슬라이드</figcaption></figure>이번엔 0번째 페이지의 position 값은 -1에서 0으로, 1번째 페이지의 position 값은 0에서 1로 흐르는 것을 확인할 수 있습니다.<figure></figure>콜백으로 들어오는 <code>position</code> 값의 변화를 확인했으니 alpha, scale 등의 애니메이션을 간단하게 적용해 볼 수 있습니다. <code><a href="https://developer.android.com/reference/androidx/viewpager2/widget/CompositePageTransformer" rel="noopener ugc nofollow" target="_blank">CompositePageTransformer</a></code>를 사용하면 여러 개의 transformer를 결합하여 사용할 수 있습니다.<pre>private fun getPageTransformer() = CompositePageTransformer().apply { addTransformer { page, position -&gt; page.alpha = 1 - abs(position) } addTransformer { page, position -&gt; val absPosition = abs(position) val requestScale = if (absPosition &gt;= 1) { MIN_SCALE } else { MIN_SCALE + (1 - absPosition) * (1 - MIN_SCALE) } page.scaleY = requestScale page.scaleX = requestScale } }companion object { private const val MIN_SCALE = 0.5f }// using vpMain.setPageTransformer(getPageTransformer())</pre>몇 줄의 코드로 페이지 애니메이션이 쉽게 구현되었습니다.<figure><figcaption>애니메이션이 적용된 페이저</figcaption></figure>페이저 개발 시 페이지와 페이지 사이의 간격을 넣어야 할 상황은 빈번하게 발생합니다. 이 때 각각의 페이지에 Margin/Padding을 넣어서 구현하거나 Transformer를 이용하여 구현하는 방법들도 존재할 수 있는데, 이렇게 구현할 경우 페이지와 페이지 사이의 간격은 터치가 먹지 않거나 올바르게 구현되지 않는 사이드 이펙트가 발생할 수 있습니다. 이 경우에는 <code>RecyclerView</code>의 <code>ItemDecoration</code>을 사용하면 쉽게 구현할 수 있습니다. <code>ViewPager2</code>의 child view는 <code>RecyclerView</code>로 구현되어 있기 때문에 우리는 <code>ItemDecoration</code>도 사용할 수 있게 됩니다.<pre>// ViewPager2 내부 코드 public void addItemDecoration(@NonNull ItemDecoration decor) { mRecyclerView.addItemDecoration(decor); }</pre>간단하게 양 옆에 간격을 추가하는 <code>ItemDecoration</code>을 구현했습니다.<pre>vpMain.addItemDecoration(object : ItemDecoration() { override fun getItemOffsets( outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State ) { outRect.right = 48 outRect.left = 48 } })</pre><figure><figcaption>페이지 간 간격이 추가된 페이저</figcaption></figure><h2 id="e8ae">마치며</h2>ViewPager2는 기존의 ViewPager를 대체할 수 있으며 더 많은 기능을 제공하지만 내부적으론 다른 부분이 매우 많고 1.0.0 스테이블 버전에서 발생하는 <a href="https://android-review.googlesource.com/c/platform/frameworks/support/+/1211984" rel="noopener ugc nofollow" target="_blank">버그도</a> 존재(1.1.0-alpha01에서 해결됨) 하기에, 내부 동작이나 버전 로그를 잘 살펴보고 의도에 맞게 사용하는 것이 좋을 것 같습니다👍🏻<h2 id="a170">참조</h2><figure></figure></div></div>

Stories by hongbeom on Medium

ViewPager2의 child view인 RecyclerView와 애니메이션 구현에 대해 알아봅니다.
ViewPager2
ViewPager2는 2019년에 등장한 androidx 라이브러리 입니다. 기존의 오른쪽에서 왼쪽(RTL) 레이아웃, 수직 스크롤, RecyclerView.Adapter 사용 지원 등 기존의 ViewPager와 차이를 두고 있습니다. 이 중에서 RecyclerView.Adapter를 지원할 수 있게 된 방식과 애니메이션 구현 시 주의점에 대해 다뤄보겠습니다.
구조
기본적으로 ViewPager2를 Layout Inspector로 살펴봤을 땐 특별히 눈에 띄는 부분은 없습니다. 하지만 내부 코드를 살펴보면, ViewGroup을 상속받고 RecyclerView를 생성하여 첫 번째 child view로 보유하고 있는 것을 확인 할 수 있습니다.
public final class ViewPager2 extends ViewGroup {
  ...
  RecyclerView mRecyclerView;
  ...
  private void initialize(Context context, AttributeSet attrs) {
    ...
    mRecyclerView = new RecyclerViewImpl(context);
    mRecyclerView.setLayoutManager(mLayoutManager);
    
    mLayoutManager = new LinearLayoutManagerImpl(context);
    
    mScrollEventAdapter = new ScrollEventAdapter(this);
    mRecyclerView.addOnScrollListener(mScrollEventAdapter);
    ...
    attachViewToParent(mRecyclerView, 0, mRecyclerView.getLayoutParams());
  }
  ...
}
또한 RecyclerView의 구성에 필요한 layoutManager를 지정하고 scrollEventListener를 등록하여 Snap 동작을 구현합니다. 마지막으로 구성된 RecyclerView를 attach하여 child view로 보유합니다.
그렇다면 기본적인 ViewPager의 동작들은 어떻게 RecyclerView로 전달되는지 살펴보겠습니다.
setOffscreenPageLimit
현재 보이는 페이지의 양쪽을 읽어들일 페이지 수를 지정하는 옵션인 setOffscreenPageLimit 함수는 어떻게 RecyclerView에서 구현될까요? 우선 코드를 살펴보면 RecyclerView의 requestLayout이 호출되는 것을 확인할 수 있습니다.
public void setOffscreenPageLimit(@OffscreenPageLimit int limit) {
  ...
  mOffscreenPageLimit = limit;
  // Trigger layout so prefetch happens through getExtraLayoutSize()
  mRecyclerView.requestLayout();
}
주석을 보면 getExtraLayoutSize를 트리거한다고 적혀 있습니다. getExtraLayoutSize 함수는 LinearLayoutManager에서 호출되는 함수인데, 배치해야 하는 추가 공간의 양을 가져오는 역할을 합니다.
이 함수는 정확히는 LinearLayoutManager의 calculateExtraLayoutSpace 함수에서 호출되는 함수이며, calculateExtraLayoutSpace는 이름에서 알 수 있듯이 현재 배치해야 하는 child view의 추가 공간을 계산하는 함수입니다.
private class LinearLayoutManagerImpl extends LinearLayoutManager {
  ...
  @Override
  protected void calculateExtraLayoutSpace(
    @NonNull RecyclerView.State state,
    @NonNull int[] extraLayoutSpace
  ) {
    int pageLimit = getOffscreenPageLimit();
    if (pageLimit == OFFSCREEN_PAGE_LIMIT_DEFAULT) {
        // Only do custom prefetching of offscreen pages if requested
        super.calculateExtraLayoutSpace(state, extraLayoutSpace);
        return;
    }
    final int offscreenSpace = getPageSize() * pageLimit;
    extraLayoutSpace[0] = offscreenSpace;
    extraLayoutSpace[1] = offscreenSpace;  
  }
}
이전에 본 ViewPager2의 initialize 함수에서 생성되는 LinearLayoutManagerImpl 클래스는 ViewPager2 클래스 내부에 구현되어 있으며 LinearLayoutManager의 calculateExtraLayoutSpace 함수를 override 하고 있습니다. initialize 함수에서 mRecyclerView에 LinearLayoutManagerImpl 클래스를 연결해두었기에 setOffscreenPageLimit에서 mRecyclerView의 requestLayout이호출되는 경우 자연스럽게 override된 calculateExtraLayoutSpace이 호출되어 prefetching 동작이 구현되는 것입니다.
따라서 ViewPager2의 setOffscreenPageLimit 동작은 아래와 같은 모습으로 이뤄질 것입니다.
OnPageChangeCallback
Viewpager2에서는 선택된 페이지에 대한 상태 콜백을 제공받기 위해서는 인 OnPageChangeCallback 를 사용해야 합니다. onPageScrolled, onPageSelected, onPageScrollStateChanged 3가지 콜백 함수를 제공하는데, 각각 아래와 같은 상황에 대응합니다.
onPageScrolled : 프로그래밍 방식이나 사용자의 스크롤로 인해 현재 페이지가 스크롤 될 때 호출됩니다. 이 함수는 세 가지 인자를 보유하고 있는데, position 값은 현재 표시되고 있는 페이지의 index 값을 나타냅니다. 다른 인자인 positionOffset의 값이 0이 아닐 경우, 현재 index + 1 값이 떨어집니다. positionOffset 값은 position의 offset 값을 나타냅니다.(0~1 사이의 값) 마지막으로 positionOffsetPixels 값은 픽셀 단위로 표현되는 offset 값입니다.
onPageSelected : 새로운 페이지가 선택될 때 호출됩니다.
onPageScrollStateChanged : 스크롤 상태가 변경될 때 호출됩니다. 사용자가 드래그를 시작할 때, fake 드래그가 시작될 때, 현재 페이지에 자동으로 이동될 때 또는 완전히 중지(stop)되거나 유휴(idle)상태일 때의 상태 값을 인자로 보유하고 있습니다. (SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING or SCROLL_STATE_SETTLING)
애니메이션 구현
ViewPager2를 사용한다면 흔히 애니메이션을 구현해야 하는 상황에 마주칠 수 있습니다. 이 때 애니메이션을 쉽게 구현할 수 있도록 제공되는 인터페이스가 PageTransformer 입니다. 해당 인터페이스의 콜백 함수는 사용자의 눈에 보이거나 attach된 페이지가 스크롤 될 때마다 호출됩니다.
이것은 애플리케이션이 애니메이션 속성을 사용하여 페이지 뷰에 사용자 정의 변환을 적용할 수 있는 기회를 제공합니다.
TextView 3개가 들어있는 Viewpager2에 transformer를 지정하고 콜백으로 들어오는 child view의 index, position을 각각 확인해보겠습니다. (child view의 index는 Viewpager2가 아닌, ViewPager2의 child view인 Recyclerview에서 검색해야 합니다.)
val recyclerView = vpMain.getChildAt(0) as? RecyclerView
vpMain.setPageTransformer { page, position ->
  println("ViewPager2 index: ${recyclerView?.getChildAdapterPosition(page)}, position: $position")
}
0번째 페이지를 바라보고 있다가, 1번째 페이지로 슬라이드 했을 경우 아래 사진처럼 0, 1번째 페이지의 콜백이 들어오는 것을 볼 수 있습니다. 0번째 페이지의 position 값은 0에서 -1로, 1번째 페이지의 position 값은 1에서 0으로 값이 흐릅니다.
반대로 1번째 페이지를 바라보고 있다가 0번째 페이지로 슬라이드 하면 position 값은 어떻게 들어올까요?
이번엔 0번째 페이지의 position 값은 -1에서 0으로, 1번째 페이지의 position 값은 0에서 1로 흐르는 것을 확인할 수 있습니다.
콜백으로 들어오는 position 값의 변화를 확인했으니 alpha, scale 등의 애니메이션을 간단하게 적용해 볼 수 있습니다. CompositePageTransformer를 사용하면 여러 개의 transformer를 결합하여 사용할 수 있습니다.
private fun getPageTransformer() = CompositePageTransformer().apply {
  addTransformer { page, position -> page.alpha = 1 - abs(position) }
  addTransformer { page, position ->
    val absPosition = abs(position)
    val requestScale = if (absPosition >= 1) {
      MIN_SCALE
    } else {
      MIN_SCALE + (1 - absPosition) * (1 - MIN_SCALE)
    }
    page.scaleY = requestScale
    page.scaleX = requestScale
  }
}
companion object {
  private const val MIN_SCALE = 0.5f
}
// using
vpMain.setPageTransformer(getPageTransformer())
몇 줄의 코드로 페이지 애니메이션이 쉽게 구현되었습니다.
페이저 개발 시 페이지와 페이지 사이의 간격을 넣어야 할 상황은 빈번하게 발생합니다. 이 때 각각의 페이지에 Margin/Padding을 넣어서 구현하거나 Transformer를 이용하여 구현하는 방법들도 존재할 수 있는데, 이렇게 구현할 경우 페이지와 페이지 사이의 간격은 터치가 먹지 않거나 올바르게 구현되지 않는 사이드 이펙트가 발생할 수 있습니다. 이 경우에는 RecyclerView의 ItemDecoration을 사용하면 쉽게 구현할 수 있습니다. ViewPager2의 child view는 RecyclerView로 구현되어 있기 때문에 우리는 ItemDecoration도 사용할 수 있게 됩니다.
// ViewPager2 내부 코드
public void addItemDecoration(@NonNull ItemDecoration decor) {
  mRecyclerView.addItemDecoration(decor);
}
간단하게 양 옆에 간격을 추가하는 ItemDecoration을 구현했습니다.
vpMain.addItemDecoration(object : ItemDecoration() {
  override fun getItemOffsets(
    outRect: Rect,
    view: View,
    parent: RecyclerView,
    state: RecyclerView.State
  ) {
    outRect.right = 48
    outRect.left = 48
  }
})
마치며
ViewPager2는 기존의 ViewPager를 대체할 수 있으며 더 많은 기능을 제공하지만 내부적으론 다른 부분이 매우 많고 1.0.0 스테이블 버전에서 발생하는 버그도 존재(1.1.0-alpha01에서 해결됨) 하기에, 내부 동작이나 버전 로그를 잘 살펴보고 의도에 맞게 사용하는 것이 좋을 것 같습니다👍🏻
참조
CompositePageTransformer | Android Developers
ViewPager2 | Jetpack | Android Developers
https://medium.com/media/cab731ba20ce0ab8d8000c333f37548d/href
ViewPager2의 RecyclerView와 애니메이션 was originally published in hongbeomi dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

ViewPager2의 RecyclerView와 애니메이션

댓글