[1팀] 14-9. 화면 구성하기: 탭메뉴 뷰페이저와 프래그먼트

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 이승민

개발환경은 Windows, Android Studio입니다.

 

1. 뷰페이저(Viewpager)란?

• 간단하게 설명해서, 화면을 좌우로 스와이프 했을 때 여러 개의 화면을 전환할 수 있도록 만들어주는 컨테이너
• 이를 프래그먼트(Fragment)를 이용해서 여러개의 화면을 구성하도록 한다.

2. activity_main 구성

viewPager와 TabLayout을 가져와 아래 사진과 같이 배치

3. 프래그먼트 생성

• 프래그먼트 생성 방법
  • 패키지 우클릭 → Fragment → Fragment (Blank)
  • 표현하고 싶은 페이지 수 만큼(현재는 4개) 프래그먼트 복사, 붙여넣기

• 프래그먼트 코드

//FragmentA.kt
package com.example.viewpagerfragment

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

class FragmentA : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_a, container, false) //각 프래그먼트마다 수정
    }
}

4. MainActivity.kt 코드

1. 페이지 데이터를 로드해서 변수 list에 저장
2. 방금 만든 list를 어댑터로 생성
3. 뷰페이저와 어댑터를 연결
4. 탭레이아웃에 제목을 수정하기 위해 탭 메뉴의 개수만큼 제목을 리스트로 생성
5. 탭레이아웃을 통해 화면을 전환할 수 있도록 탭레이아웃과 뷰페이저를 연결

//MainActivity.kt
package com.example.viewpagerfragment

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.viewpagerfragment.databinding.ActivityMainBinding
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    val binding by lazy { ActivityMainBinding.inflate(layoutInflater)}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        // 1. 페이지 데이터 로드
        val list = listOf(FragmentA(), FragmentB(), FragmentC(), FragmentD())
        // 2. 어댑터 생성
        val pagerAdapter = FragmentPagerAdapter(list, this)

        with(binding) {
            // 3. 어댑터와 뷰페이저 연결
            viewPager.adapter = pagerAdapter
            // 4. 탭 메뉴의 개수만큼 제목을 목록으로 생성
            val titles = listOf("A", "B", "C", "D")
            // 5. 탭레이아웃과 뷰페이저 연결
            TabLayoutMediator(tabLayout, viewPager) { tab, position ->
                tab.text = titles[position] //자바의 .get(position)과 동일
            }.attach()
        }
    }
}

class FragmentPagerAdapter(val fragmentList:List<Fragment>, fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    // Ctrl + I 로 오버라이드
    override fun getItemCount() = fragmentList.size
    override fun createFragment(position: Int) = fragmentList[position] //자바의 .get(position)과 동일
}

• FragmentPagerAdapter 클래스의 함수 getItemCount는 프래그먼트 리스트의 사이즈를 가져오는 함수
• FragmentPagerAdapter 클래스의 함수 createFragment는 프래그먼트 리스트를 바탕으로 페이지를 구현하는 함수