ViewPager에서 페이지 전환 시 스타일 변경하기.

Q1: ViewPager에서 페이지 전환 시 현재 페이지의 스타일을 다르게 보여주려면 어떻게 하나요?
A1: ViewPager의 페이지가 바뀔 때 콜백을 받아 스타일을 변경하면 됩니다. 일반적으로 `ViewPager.OnPageChangeListener`를 사용해서 `onPageSelected(int position)` 메서드 내에서 현재 페이지에 맞는 UI 스타일(색상, 크기, 속성 등)을 변경합니다.

---

Q2: ViewPager.OnPageChangeListener는 어떻게 사용하나요?
A2: ViewPager에 리스너를 추가합니다:

```java
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 페이지 스크롤 중 호출, 필요시 구현
}

@Override
public void onPageSelected(int position) {
// 페이지가 완전히 전환되었을 때 호출
updatePageStyle(position);
}

@Override
public void onPageScrollStateChanged(int state) {
// 스크롤 상태 변화 감지, 필요시 구현
}
});
```

`updatePageStyle(position)`에서 현재 페이지에 맞게 스타일을 조정합니다.

---

Q3: 페이지 전환 시 ViewPager 안에 있는 Fragment 또는 View의 스타일을 어떻게 변경하나요?
A3: 보통 Fragment를 반환할 때 Fragment 내부에 스타일 관련 함수(`updateStyle()` 등)를 구현합니다. `onPageSelected`에서 현재 Fragment를 찾아 스타일 변경 함수 호출합니다.

예시:

```java
@Override
public void onPageSelected(int position) {
MyFragment fragment = (MyFragment) adapter.getItem(position);
if (fragment != null) {
fragment.updateStyle(true); // 선택된 페이지 스타일
}
// 이전 페이지 fragment도 스타일 초기화 처리 필요
}
```

만약 프래그먼트 인스턴스를 직접 못 받는 경우 `FragmentManager`에서 찾아서 처리합니다.

---

Q4: ViewPager2에서는 어떻게 스타일 변경을 처리하나요?
A4: ViewPager2도 비슷하게 `registerOnPageChangeCallback`을 사용합니다.

```java
viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
updatePageStyle(position); // 스타일 업데이트 함수 호출 }
});
```

---

Q5: 페이지 전환 애니메이션과 연계해서 스타일을 변화시키려면?
A5: `onPageScrolled(int position, float positionOffset, int positionOffsetPixels)` 콜백을 활용해 페이지와 페이지 사이 스크롤 진행 정도(0.0 ~ 1.0)에 따라 점진적으로 스타일 변화(예: 투명도, 색상 전환) 효과를 줄 수 있습니다.

예시:

```java
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
View currentPage = viewPager.findViewWithTag("page" + position);
View nextPage = viewPager.findViewWithTag("page" + (position + 1));
if(currentPage != null) currentPage.setAlpha(1 - positionOffset);
if(nextPage != null) nextPage.setAlpha(positionOffset);
}
```

---

Q6: ViewPager 내 페이지가 View라면 각 페이지 View에 태그를 달아 스타일 변경을 쉽게 할 수 있나요?
A6: 네, 각 페이지 View에 태그 또는 id를 부여해 `findViewWithTag()`로 직접 찾아 스타일을 업데이트 하는 방식이 간편합니다. 다만, 페이지 재활용이 있을 수 있으니 상황에 맞게 관리해야 합니다.

---

Q7: TabLayout 연동 시 탭 스타일과 연동해서 ViewPager 페이지 전환 시 탭 스타일도 바꾸려면?
A7: 보통 `TabLayoutMediator`를 사용하며, 탭 선택 상태에 따라 `TabLayout.Tab`의 커스텀 뷰 또는 스타일을 변경해줍니다. 탭 선택 리스너(`addOnTabSelectedListener`)를 등록하고 각 탭 선택 시 스타일을 조정합니다.

---

Q8: 커스텀 ViewPager 페이지 효과(예: 크기, 색상, 회전 등)를 적용하려면?
A8: `ViewPager.PageTransformer` 인터페이스를 구현해서 페이지 스크롤 위치(`position` 값 -1.0 ~ 1.0) 기반으로 커스텀 애니메이션 및 스타일을 적용할 수 있습니다.

예시:

```java
viewPager.setPageTransformer(new ViewPager.PageTransformer() {
@Override
public void transformPage(@NonNull View page, float position) {
if (position >= -1 && position <= 1) {
page.setScaleX(1 - Math.abs(position) * 0.3f);
page.setScaleY(1 - Math.abs(position) * 0.3f);
page.setAlpha(1 - Math.abs(position));
} else {
page.setAlpha(0);
}
}
});
```

---

요약:
- 페이지 전환 시 `OnPageChangeListener`나 `OnPageChangeCallback`에서 현재 페이지 인식을 한다.
- 현재 페이지와 이전 페이지의 스타일을 별도로 관리해 변경한다.
- `PageTransformer`를 활용해 스크롤 중 애니메이션 및 스타일 변화를 줄 수 있다.
- Fragment 내부 메서드를 활용하거나 View 태그를 통해 스타일 변경 처리를 한다.
- TabLayout 등과 연동 시 탭 스타일도 함께 조절할 수 있다.

ViewPager에서 페이지 전환 시 스타일을 변경하는 방법은 여러 가지가 있습니다.

아래에서는 Android에서 ViewPager를 사용해 페이지 전환 시 스타일을 변경하는 기본적인 예제를 설명하겠습니다.

1. ViewPager 설정하기 먼저, ViewPager와 FragmentPagerAdapter를 설정해야 합니다.

여기서는 기본적인 ViewPager와 Fragment를 사용하여 여러 페이지를 표시합니다.

build.gradle 수정 ```gradle dependencies { implementation 'androidx.viewpager2:viewpager2:1.0.0' } ``` 레이아웃 파일 설정 (activity_main.xml) ```xml ``` Fragment 생성 (SampleFragment.java) ```java public class SampleFragment extends Fragment { private static final String ARG_COLOR = "color"; public static SampleFragment newInstance(int color) { SampleFragment fragment = new SampleFragment(); Bundle args = new Bundle(); args.putInt(ARG_COLOR, color); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_sample, container, false); view.setBackgroundColor(getArguments().getInt(ARG_COLOR)); return view; } } ``` Fragment 레이아웃 (fragment_sample.xml) ```xml ```

2. ViewPager Adapter 설정 ```java public class MyFragmentStateAdapter extends FragmentStateAdapter { private final int[] colors = {Color.RED, Color.GREEN, Color.BLUE}; public MyFragmentStateAdapter(FragmentActivity fa) { super(fa); } @Override public Fragment createFragment(int position) { return SampleFragment.newInstance(colors[position % colors.length]); } @Override public int getItemCount() { return colors.length; } } ```

3. PageTransformer 구현 페이지 전환 시 스타일을 변경하기 위해 `ViewPager.PageTransformer`를 구현합니다.

```java public class ZoomOutPageTransformer implements ViewPager2.PageTransformer { @Override public void transformPage(@NonNull View page, float position) { if (position < -1) { // [-Infinity,-1) page.setAlpha(0); } else if (position <= 1) { // [-1,1] float scaleFactor = Math.max(0.85f, 1 - Math.abs(position)); page.setScaleY(scaleFactor); page.setAlpha(scaleFactor); } else { // (1,+Infinity] page.setAlpha(0); } } } ```

4. MainActivity 설정 마지막으로 MainActivity에서 ViewPager와 Adapter를 연결하고 PageTransformer를 적용합니다.

```java public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager2 viewPager = findViewById(R.id.viewPager); MyFragmentStateAdapter adapter = new MyFragmentStateAdapter(this); viewPager.setAdapter(adapter); viewPager.setPageTransformer(new ZoomOutPageTransformer()); // 페이지 변환 효과 적용 } } ```

5. 결과 확인 위의 코드를 통합하면 ViewPager에서 페이지를 전환할 때 ZoomOut 효과가 적용됩니다.

이와 같은 방법으로 다양한 효과 (예: Fade, Slide 등)를 적용할 수 있습니다.

결론 위 예제에서는 ViewPager 페이지 전환 시 스타일을 변경하는 방법에 대해 설명했습니다.

`ViewPager.PageTransformer`를 구현하여 페이지 전환 시의 애니메이션 효과를 쉽게 조정할 수 있습니다.

필요에 따라 다른 효과를 시도해 보세요!