ViewPager의 다양한 페이지 변환 효과를 적용하는 방법.

Q1: ViewPager에서 페이지 변환 효과(Page Transformer)란 무엇인가요?
A1: 페이지 변환 효과란 사용자가 페이지를 넘길 때, 각 페이지가 전환되는 동안 보이는 시각적 효과를 의미합니다. ViewPager는 이를 위해 `ViewPager.PageTransformer` 인터페이스를 제공하며, 이를 구현해 다양한 애니메이션 효과를 적용할 수 있습니다.

---

Q2: ViewPager에 커스텀 페이지 변환 효과를 적용하는 기본 방법은?
A2:
1. `ViewPager.PageTransformer` 인터페이스를 구현한 클래스를 생성합니다.
2. `transformPage(View page, float position)` 메서드 내에서 페이지가 현재 화면에서 어디에 위치하는지에 따라 변환 효과를 적용합니다.
3. ViewPager에 `setPageTransformer()` 메서드로 적용합니다.

```java
viewPager.setPageTransformer(false, new CustomPageTransformer());
```

---

Q3: `transformPage(View page, float position)` 메서드에서 position 파라미터의 의미는?
A3:
- position은 현재 변환 중인 페이지가 화면에서 차지하는 위치를 나타냅니다.
- 0이면 현재 화면에 완전히 중앙에 위치한 페이지입니다.
- 음수 값(-1, -2...)는 왼쪽에 있는 페이지, 양수 값(1, 2...)는 오른쪽에 있는 페이지를 의미합니다.
- 즉, position이 -1이면 페이지의 왼쪽 끝, 0은 중앙, 1은 오른쪽 끝을 뜻합니다.

---

Q4: 기본 변환 효과 예제는?
A4: 알파(투명도)를 이용해서 페이지가 점점 사라지고 나타나는 효과:

```java
public class FadePageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(@NonNull View page, float position) {
page.setTranslationX(-position * page.getWidth());
if (position <= -1 || position >= 1) {
page.setAlpha(0);
} else if (position == 0) {
page.setAlpha(1);
} else {
page.setAlpha(1 - Math.abs(position));
}
}
}
```
적용:
```java
viewPager.setPageTransformer(false, new FadePageTransformer());
```

---

Q5: ViewPager에서 제공하거나 많이 쓰이는 대표적인 페이지 변환 효과는?
A5:
- DepthPageTransformer : 페이지가 중앙으로 올 때 깊이감 있게 축소 및 투명해짐
- ZoomOutPageTransformer : 페이지 축소와 알파 효과를 조합
- Carousel (계단식) 효과
- RotationPageTransformer : 회전 효과
- StackPageTransformer : 페이지가 쌓이듯 겹침 효과

---

Q6: 안드로이드에서 기본 제공되는 `DepthPageTransformer` 적용 예제는?
A6: Android 공식 샘플에서 제공하는 코드:

```java
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();

if (position < -1) { // 왼쪽 범위 밖
view.setAlpha(0);
} else if (position <= 0) { // 현재 페이지 이동 중 view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // 오른쪽 페이지로 전환 중
view.setAlpha(1 - position);
view.setTranslationX(pageWidth * -position);
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - position);
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // 오른쪽 범위 밖
view.setAlpha(0);
}
}
}
```

적용:
```java
viewPager.setPageTransformer(true, new DepthPageTransformer());
```

---

Q7: `setPageTransformer` 메서드의 첫 번째 boolean 파라미터는 무엇인가요?
A7: 이 파라미터는 역방향 스크롤(가로 스크롤시 RTL 방향) 지원 여부입니다.

- `true` : 기본으로 특수한 하드웨어 가속 및 역방향 스크롤 렌더링을 활성화
- `false`: 단순 전환 효과 적용

보통 보간 및 복잡한 효과가 필요할 때 `true`로 설정하며, 단순 변환은 `false`로도 충분합니다.

---

Q8: 커스텀 PageTransformer에서 고려해야 할 점은?
A8:
- position 값은 범위가 -Infinity ~ +Infinity가 아니라 보통 -1 ~ +1 사이지만 빠르게 스크롤하면 범위를 벗어날 수 있습니다.
- 페이지가 완전히 보이지 않을 때(off screen 위치)에도 transformPage가 호출되니 성능 최적화를 위해 투명도나 크기를 0으로 처리하는 것이 좋습니다.
- 변환 시 뷰마다 다른 속성(translationX/Y, scale, rotation, alpha 등)을 적절히 조합하여 자연스러운 효과를 만드세요.
- 애니메이션이 너무 과하지 않도록 조절하고, 사용성 및 가독성에 영향을 주지 않도록 해야 합니다.

---

Q9: ViewPager2에서는 어떻게 페이지 변환 효과를 적용하나요?
A9: ViewPager2 역시 `setPageTransformer()` 메서드를 지원합니다. 사용법과 원리는 동일하며, `ViewPager2.PageTransformer` 인터페이스를 사용합니다.

```java
viewPager2.setPageTransformer(new ViewPager2.PageTransformer() {
@Override
public void transformPage(@NonNull View page, float position) {
// 커스텀 변환 코드
}
});
```

---

Q10: 외부 라이브러리를 활용할 수도 있나요?
A10: 네, 아래와 같은 라이브러리들이 다양한 효과와 커스터마이징을 제공합니다.
- [Transformers for ViewPager](https://github.com/ToxicBakery/ViewPagerTransforms)
- [ViewPagerAnimations](https://github.com/daimajia/AndroidViewAnimations)

직접 커스텀하기 어렵거나 다양한 사전 제작 효과를 즉시 사용하고 싶을 때 권장합니다.

---

요약:
- 페이지 변환 효과는 `ViewPager.PageTransformer` 구현체를 만들어 `setPageTransformer()`에 전달해 적용
- `transformPage` 내 position 부동 소수점 값으로 효과 구현
- 기본 제공 효과나 외부 라이브러리 활용 가능
- ViewPager2도 동일하게 지원

이렇게 하면 ViewPager에 원하는 시각적 페이지 전환 효과를 다양하게 적용할 수 있습니다.

ViewPager는 Android 개발에서 페이지 레이아웃 전환을 관리하는 데 유용한 위젯입니다.

기본적으로 페이지 전환은 단순한 오프셋 기반의 효과를 가지지만, 다양한 애니메이션 효과를 추가하여 사용자 경험을 개선할 수 있습니다.

다음은 ViewPager에 다양한 페이지 변환 효과를 적용하는 방법입니다.

1. ViewPagerAdapter 설정 기본적인 ViewPagerAdapter를 설정합니다.

이 어댑터는 데이터 소스와 ViewPager 간의 브리지 역할을 합니다.

```kotlin class MyPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) { override fun getItem(position: Int): Fragment { return MyFragment.newInstance(position) } override fun getCount(): Int { return TOTAL_PAGES } } ```

2. Transformer 구현 ViewPager의 setPageTransformer() 메서드를 사용하여 페이지 전환 효과를 적용할 수 있습니다.

Transformer 인터페이스를 구현해야 하며, `transformPage` 메서드에서 효과를 정의합니다.

a. 기본 변환기 구현 ```kotlin class DepthPageTransformer : ViewPager.PageTransformer { override fun transformPage(view: View, position: Float) { when { position < -1 -> { // 페이지가 현재 페이지 왼쪽에 있을 때 view.alpha = 0f } position <= 1 -> { // 페이지가 현재 페이지에 있거나 오른쪽에 있을 때 view.alpha = 1 - Math.abs(position) view.translationY = if (position < 0) { 0f } else { 0f } view.scaleY = 0.75f + (1 - Math.abs(position)) * 0.25f } else -> { // 페이지가 현재 페이지 오른쪽에 있을 때 view.alpha = 0f } } } } ``` b. Zoom Out 변환기 구현 ```kotlin class ZoomOutPageTransformer : ViewPager.PageTransformer { override fun transformPage(view: View, position: Float) { when { position < -1 -> { // 페이지가 현재 페이지 왼쪽에 있을 때 view.alpha = 0f } position <= 1 -> { // 페이지가 현재 페이지에 있거나 오른쪽에 있을 때 val scaleFactor = Math.max(0.85f, 1 - Math.abs(position)) view.scaleX = scaleFactor view.scaleY = scaleFactor view.alpha = (scaleFactor - 0.15f) / 0.85f } else -> { // 페이지가 현재 페이지 오른쪽에 있을 때 view.alpha = 0f } } } } ```

3. ViewPager에 Transformer 설정 ViewPager의 인스턴스를 생성한 후, custom transformer를 setPageTransformer() 메서드로 설정합니다.

```kotlin val viewPager: ViewPager = findViewById(R.id.viewPager) viewPager.adapter = MyPagerAdapter(supportFragmentManager) viewPager.setPageTransformer(true, DepthPageTransformer()) // 혹은 ZoomOutPageTransformer() ```

4. 사용자 정의 전환 효과 추가 필요에 따라 더 많은 변환 효과를 디자인할 수 있습니다.

직접적으로 `transformPage` 메서드를 수정하여 회전, 스케일링, 이동 등의 다양한 애니메이션을 조합할 수 있습니다.



5. XML 설정 ViewPager의 레이아웃을 XML 파일에 добавим할 수 있습니다.

```xml ``` 결론 ViewPager에 페이지 변환 효과를 추가하면 사용자 인터페이스의 전환을 더욱 매력적으로 만들 수 있습니다.

다양한 효과를 구현하여 사용자 경험을 향상시키고, 필요에 따라 직접 정의한 효과를 추가할 수 있습니다.