상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
수정하기 - ViewPager의 다양한 페이지 변환 효과를 적용하는 방법.
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
ViewPager는 Android 개발에서 <a href='https://sangseek.com/sangseeks/페이지 레이아웃/ko'>페이지 레이아웃</a> 전환을 관리하는 데 유용한 <a href='https://sangseek.com/sangseeks/위젯/ko'>위젯</a>입니다. 기본적으로 페이지 전환은 단순한 오프셋 기반의 효과를 가지지만, 다양한 애니메이션 효과를 추가하여 사용자 경험을 개선할 수 있습니다. 다음은 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` 메서드를 수정하여 회전, <a href='https://sangseek.com/sangseeks/스케일링/ko'>스케일링</a>, 이동 등의 다양한 애니메이션을 조합할 수 있습니다. 5. XML 설정 ViewPager의 레이아웃을 XML 파일에 добавим할 수 있습니다. ```xml <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 결론 ViewPager에 페이지 변환 효과를 추가하면 사용자 인터페이스의 전환을 더욱 매력적으로 만들 수 있습니다. 다양한 효과를 구현하여 사용자 경험을 향상시키고, 필요에 따라 직접 정의한 효과를 추가할 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기