안드로이드 앱을 개발할 때, 사용자가 여러 페이지를 스와이프하여 탐색할 수 있는 기능은 매우 유용합니다.
이를 위해 Google은 뷰 페이저2(ViewPager2)라는 구성 요소를 제공합니다.
이번 강좌에서는 뷰 페이저2를 사용하여 간단한 앱을 구현하고, 기본 개념과 코드를 자세히 설명하겠습니다.
1. 뷰 페이저2란?
뷰 페이저2는 여러 페이지를 스와이프하여 볼 수 있도록 지원하는 UI 구성 요소입니다.
뷰 페이저2의 주요 특징은 다음과 같습니다:
- 세로 및 가로 스와이프 지원
- Fragment 및 RecyclerView 지원
- 페이지 전환 효과 설정 가능
2. 뷰 페이저2 설정하기
뷰 페이저2를 사용하기 위해서는 Gradle 파일에 의존성을 추가해야 합니다.
다음과 같이 build.gradle 파일에 다음을 추가하세요:
dependencies {
implementation "androidx.viewpager2:viewpager2:1.1.0"
}
뷰 페이저2를 사용하기 위해 필요한 XML 레이아웃 파일을 작성해 보겠습니다.
2.1. XML 레이아웃
다음은 뷰 페이저2를 포함하는 기본 레이아웃의 예시입니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
3. 뷰 페이저2 어댑터 구현하기
뷰 페이저2는 페이지를 표시하기 위해 어댑터가 필요합니다.
다음은 간단한 어댑터 구현 예시입니다. 이 어댑터는 사용자 정의 Fragment를 사용하여 각 페이지를 구성합니다.
3.1. Fragment 생성
먼저 각 페이지를 나타내는 Fragment 클래스를 생성합니다.
class CustomFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_custom, container, false)
return view
}
}
3.2. Fragment Adapter 구현
다음으로, FragmentStateAdapter를 상속하여 어댑터를 구현합니다.
class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
override fun getItemCount(): Int {
return 3 // 페이지 개수
}
override fun createFragment(position: Int): Fragment {
return CustomFragment() // 각 페이지마다 다른 Fragment를 리턴해야 함
}
}
4. MainActivity 설정하기
이제 MainActivity에서 ViewPager2와 어댑터를 연동하겠습니다.
class MainActivity : AppCompatActivity() {
private lateinit var viewPager: ViewPager2
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
viewPager = findViewById(R.id.viewPager)
viewPager.adapter = ViewPagerAdapter(this)
}
}
5. Fragment 레이아웃 구성하기
이제 각 Fragment에서 사용할 레이아웃을 구성해 보겠습니다.
이 예제에서는 단순히 텍스트를 표시하겠습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, ViewPager2!"
android:textSize="24sp"/>
</LinearLayout>
6. 스와이프 페이지 전환 효과 추가하기
뷰 페이저2는 기본적으로 스와이프 애니메이션이 적용되어 있지만,
이를 커스터마이즈하여 다양한 페이지 전환 효과를 적용할 수 있습니다.
class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
// ... 기존 코드 ...
override fun createFragment(position: Int): Fragment {
// 위치에 따라 다른 Fragment를 리턴하여 페이지 내용을 다르게 할 수 있음
return when (position) {
0 -> FirstFragment()
1 -> SecondFragment()
else -> ThirdFragment()
}
}
}
여기서 원하는 페이지 전환 효과를 정의한 후, ViewPager2의
setPageTransformer 메서드를 사용하여 적용할 수 있습니다.
viewPager.setPageTransformer { page, position ->
page.alpha = 0f
if (position >= -1 && position <= 1) { // [-1,1]
page.alpha = 1 - Math.abs(position)
}
}
7. 마무리
이번 강좌에서는 뷰 페이저2를 사용하여 스와이프 가능한 여러 페이지를 구성하는 방법을 배웠습니다.
다양한 페이지 전환 효과를 이용해 사용자 경험을 개선할 수 있습니다.
추가적인 기능이나 다른 UI 구성 요소와의 결합을 통해 더욱 풍부한 앱을 개발할 수 있습니다.
안드로이드 개발의 즐거움을 만끽하세요!