Android 화면 전환 멀티 스크린 구현하기 - Fragment, ViewPager2

안드로이드 애플리케이션에서 여러 화면을 자연스럽게 전환하기 위해 Fragment와 ViewPager2를 사용하는 것은 매우 유용한 방법입니다. 이번 포스팅에서는 Fragment와 ViewPager2를 활용하여 멀티스크린 앱을 만드는 방법을 예제 코드와 함께 설명하겠습니다. 이 튜토리얼을 통해 여러분은 쉽게 화면 전환 기능을 구현할 수 있게 될 것입니다.

1. 프로젝트 준비하기

먼저, Android Studio에서 새로운 프로젝트를 만듭니다. "Empty Activity" 템플릿을 사용하고, Kotlin을 선택하세요. 프로젝트가 준비되면, 필요한 라이브러리를 추가하겠습니다.

build.gradle 파일에 다음과 같이 ViewPager2 라이브러리를 추가합니다.

implementation "androidx.viewpager2:viewpager2:1.0.0"

이제 프로젝트에 필요한 기본 설정이 완료되었습니다.

2. Fragment 생성하기

ViewPager2를 사용하여 화면 전환을 구현하려면 먼저 여러 개의 Fragment를 만들어야 합니다. 이번 예제에서는 세 개의 Fragment를 만들어 보겠습니다.

2.1 첫 번째 Fragment (FirstFragment)

package com.example.viewpagerexample

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView

class FirstFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_first, container, false)
        view.findViewById<TextView>(R.id.textView).text = "첫 번째 화면"
        return view
    }
}

fragment_first.xml 레이아웃 파일을 다음과 같이 생성합니다.

<?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:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp" />
</LinearLayout>

2.2 두 번째 및 세 번째 Fragment (SecondFragment, ThirdFragment)

두 번째와 세 번째 Fragment도 첫 번째 Fragment와 비슷한 방식으로 생성합니다. 각 Fragment의 레이아웃 파일도 동일한 구조로 작성하고, 텍스트만 각각 다르게 지정합니다.

SecondFragment.kt와 ThirdFragment.kt를 각각 생성하고, onCreateView() 메서드에서 텍스트를 "두 번째 화면", "세 번째 화면"으로 설정하세요.

3. ViewPager2 설정하기

이제 ViewPager2를 사용하여 이 Fragment들을 연결해 보겠습니다. 먼저 activity_main.xml 파일을 수정하여 ViewPager2를 추가합니다.

<?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="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4. FragmentStateAdapter 생성하기

ViewPager2는 여러 개의 Fragment를 관리하기 위해 FragmentStateAdapter를 사용합니다. MainActivity.kt 파일에서 ViewPager2와 FragmentStateAdapter를 설정하겠습니다.

package com.example.viewpagerexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager2.widget.ViewPager2
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager: ViewPager2 = findViewById(R.id.viewPager)
        val fragments = listOf(FirstFragment(), SecondFragment(), ThirdFragment())
        val adapter = ScreenSlidePagerAdapter(this, fragments)
        viewPager.adapter = adapter
    }

    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity, val fragments: List<Fragment>) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = fragments.size

        override fun createFragment(position: Int): Fragment = fragments[position]
    }
}

위 코드에서 ScreenSlidePagerAdapter는 FragmentStateAdapter를 상속받아 구현하였습니다. getItemCount() 메서드는 Fragment의 개수를 반환하고, createFragment() 메서드는 특정 위치에 해당하는 Fragment를 반환합니다.

5. ViewPager2에 Indicator 추가하기

ViewPager2를 사용할 때, 현재 어느 화면에 있는지를 표시하기 위해 Indicator를 추가할 수 있습니다. 이번에는 TabLayout을 사용하여 간단히 Indicator를 추가해 보겠습니다. activity_main.xml 파일에 TabLayout을 추가합니다.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@id/tabLayout"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

MainActivity.kt에서 TabLayout과 ViewPager2를 연결합니다.

import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager: ViewPager2 = findViewById(R.id.viewPager)
        val tabLayout: TabLayout = findViewById(R.id.tabLayout)
        val fragments = listOf(FirstFragment(), SecondFragment(), ThirdFragment())
        val adapter = ScreenSlidePagerAdapter(this, fragments)
        viewPager.adapter = adapter

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "페이지 ${position + 1}"
        }.attach()
    }
}

TabLayoutMediator를 사용하여 TabLayout과 ViewPager2를 연결하고, 각 페이지에 대한 탭 제목을 설정합니다.

6. 결과 확인하기

이제 앱을 실행하면, ViewPager2를 통해 세 개의 화면이 좌우로 전환되는 것을 볼 수 있습니다. TabLayout을 통해 현재 어떤 화면에 있는지 시각적으로 확인할 수도 있습니다.

결론

이번 포스팅에서는 Fragment와 ViewPager2를 사용하여 멀티스크린 앱을 구현하는 방법을 알아보았습니다. ViewPager2는 Fragment 간의 화면 전환을 매우 쉽게 구현할 수 있게 해 주며, TabLayout을 사용하여 사용자에게 더 나은 탐색 경험을 제공할 수 있습니다.

이 예제를 확장하여 더 복잡한 멀티스크린 앱을 만들 수 있으며, 다양한 사용자 인터페이스를 구성해 볼 수 있습니다. 앞으로도 다양한 안드로이드 개발 방법을 다루며 여러분의 앱 개발 역량을 함께 키워나가겠습니다.