TabLayout과 ViewPager2 연결하기

1. ViewBinding 설정

 

build.gradle(Module:app)

 

viewBinding {
        enabled = true
    }

 

2.  activity_main.xml 설정

 

tablayout과 viewPager2 배치

 

 

3. Fragment 생성

1) New -> Fragment -> Fragment(Blank) 생성

- Fragment 파일과 xml 파일 동시 생성

 

 

2) 생성한 Fragment.xml 수정

 

 

4. 생성한 Fragment class 파일 수정

1) FramgentToDo

- Fragment 레이아웃만 반환 해주는 class

class FragmentTodo : Fragment() {

    // FragmentToDoBinding : 뷰 바인딩 클래스, XML 레이아웃 파일과 연결된 바인딩 객체를 생성
    private lateinit var binding: FragmentTodoBinding

    // onCreateView : 프래그먼트 뷰 생성하고 화면에 표시
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // inflate : xml 레이아웃 파일과 프래그먼트을 연결
        binding = FragmentTodoBinding.inflate(inflater, container, false)
        // 연결된 바인딩 객체의 최상위 View 반환 해 프로그먼트 View 생성
        return binding.root
    }

}

2) FragmentBookmark

- FragmentBookmark 클래스 불러 올 때 파라미터 가져오기

- 가져온 파라미터를 TextView 텍스트에 넣어주기

 

// 프래그먼트 초기화 파라미터
private const val ARG_PARAM1 = "param1"

class FragmentBookmark : Fragment() {

    //변수 설정
    private var param1: String? = null

    //뷰 바인딩 객체 저장
    private var _binding: FragmentBookmarkBinding?= null
    private val bbinding get() = _binding!!

    // 프래그먼트 생성될 때 호출
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //arguments : Bundle 객체, 프래그먼트 간 데이터 전달
        arguments?.let {
            //초기화 파라미터 가져와서 변수에 저장
            param1 = it.getString(ARG_PARAM1)
        }
    }

    // 프래그먼트 뷰 생성하고 초기화
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        _binding = FragmentBookmarkBinding.inflate(inflater, container, false)
        return bbinding.root
    }

    // 프래그먼트 소멸될 때 호출
    override fun onDestroy() {
        _binding = null
        super.onDestroy()
    }

    // 뷰가 생성되고 난 뒤 호출
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        //TextView의 텍스트를 가져온 파라미터 값으로 변경
        bbinding.tv2.text = param1
    }

    companion object {
        // 팩토리 메서드 : 파라미터를 사용해 새로운 프래그먼트 인스턴스 생성하는 데 사용
        @JvmStatic
        fun newInstance(param1: String) =
            FragmentBookmark().apply {
                arguments = Bundle().apply {
                    //ARG_PARAM1이라는 키에 param1 값 할당
                    putString(ARG_PARAM1, param1)
                }
            }
    }
}

 

 

5. ViewPagerAdapter 생성

1) New -> Kotlin Class 생성

 

2) ViewPagerAdapter 수정

- FragmentActivity 상속

- getItemCount(), createFragment implement

 

class ViewPagerAdapter(fragmentActivity: FragmentActivity) :
    FragmentStateAdapter(fragmentActivity) {

    private val num_page = 2

    //viewpager에 보여줄 fragment 수 가져오기
    override fun getItemCount(): Int {
        return num_page
    }

    //위치에 따른 fragment 생성하기
    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> {FragmentTodo()}
            else -> {FragmentBookmark.newInstance("Bookmark")}
        }
    }
}

 

 

6. MainActivity 수정

- ViewPagerAdapter 생성

- TabLayout과 ViewPager 연결

 

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    // tab 이름 리스트
    var tabText = listOf<String>("Todo", "Bookmark")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //viewPager의 adapter 프로퍼티에 새로운 ViewPagerAdapter 객체 할당
        binding.viewPager.apply {
            adapter = ViewPagerAdapter(context as FragmentActivity)
        }

        //Tablayout과 viewpager 연결
        TabLayoutMediator(binding.tabLayout, binding.viewPager){
            //각 탭과 해당 위치를 받아와서 작업 수행
            tab, position -> tab.text = tabText[position]
        }.attach()

    }
}