[Android][Kotlin] Fragment로 탭 구조 만들기 (프래그먼트 교체)

옛날에 프래그먼트를 교체하는 방법으로 탭 구조를 구현하는 포스팅을 했었는데

[Android][Kotlin] Fragment 설정, Fragment to Activity 화면 전환

 

두번째 탭을 누른 후, 물리 뒤로가기키를 누르면 탭과 하단 프래그먼트 짝이 맞지 않는다는점,

첫번째 탭에서 물리 뒤로가기를 누를 경우 하단 프래그먼트가 공백으로 비워진다는 문제가 생겨서 새로운 방법을 찾아봤다. 

 

 

 

먼저 프래그먼트를 담을 메인액티비티 맨 위에 lateinit으로 선언해준다.

여기서 fragment1과 fragment2는 프래그먼트 파일(클래스)의 이름이다.

class TravelMainpage : AppCompatActivity() {

    lateinit var trmain1: fragment1
    lateinit var trmain2: fragment2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_travel_mainpage)
        
        ...

 

 

그 후, 이전 포스팅에서 만들어둔거에서 탭 구조는 바꾸지 않았고

각각의 탭을 클릭할 경우(setOnClickListener을 달아줘서) 호출되는 함수만 변경해줬다.

        //  set default to tab1
        ShowTabOne()

        //  switch to tab1
        tab1_layout_trmain.setOnClickListener {
            ShowTabOne()
        }

        //  switch to tab2
        tab2_layout_trmain.setOnClickListener {
            ShowTabTwo()
        }

 

 

교체함수 코드

    fun ShowTabOne(){
        frag1_imageview_trmain.setImageDrawable(getDrawable(R.drawable.frag1_selected))
        frag2_imageview_trmain.setImageDrawable(getDrawable(R.drawable.frag2))
        
        trmain1 = fragment1()
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_holder, trmain1)
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .commit()

    }

    fun ShowTabTwo(){
        frag1_imageview_trmain.setImageDrawable(getDrawable(R.drawable.frag1))
        frag2_imageview_trmain.setImageDrawable(getDrawable(R.drawable.frag2_selected))

        trmain2 = fragment2()
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_holder, trmain2)
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .commit()
    }

 

 

이제 문제 없이 잘 작동한다!