[안드로이드 코틀린] Tab Custom Animation part3 - 탭 애니메이션 적용

이번 시간에는 탭 전환 시 부자연스러운 부분을 애니메이션을 통해서 해결해보도록 하겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다. 

2022.06.15 - [안드로이드] - [안드로이드 코틀린] Tab Custom Animation part2 - 탭 기능 구현

[안드로이드 코틀린] Tab Custom Animation part2 - 탭 기능 구현

---

목차

1. 실행 화면

2. 메인 코드 수정 MainActivity.kt

---

1. 실행 화면

 

2. 메인 코드 수정 MainActivity.kt

 - 설명 - 

1. selectedTabNumber = 1

 현재 탭 위치를 담을 변수

 2. slideTo

 이동할 위치 값 담을 변수

 3. translateAnimation.duration

 애니메이션 구현 시간(1000 = 1초)

 4. onAnimationEnd

 애니메이션 끝나고 실행되는 함수

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    //현재 탭 위치
    private var selectedTabNumber = 1

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

        //binding 초기화
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //디폴트 1번탭
        selectTab(1)

        //탭1 클릭 이벤트
        binding.tabItem1.setOnClickListener {
            selectTab(1)
        }

        //탭2 클릭 이벤트
        binding.tabItem2.setOnClickListener {
            selectTab(2)
        }

        //탭3 클릭 이벤트
        binding.tabItem3.setOnClickListener {
            selectTab(3)
        }

    }

    //탭 선택 이벤트
    private fun selectTab(tabNumber: Int){

        var selectedTextView: TextView
        var nonSelectedTextView1: TextView
        var nonSelectedTextView2: TextView

        var selectedFragment: Fragment

        if(tabNumber == 1){
            selectedTextView = binding.tabItem1
            nonSelectedTextView1 = binding.tabItem2
            nonSelectedTextView2 = binding.tabItem3

            selectedFragment = OneFragment()

        }else if(tabNumber == 2){
            selectedTextView = binding.tabItem2
            nonSelectedTextView1 = binding.tabItem1
            nonSelectedTextView2 = binding.tabItem3

            selectedFragment = TwoFragment()

        }else{
            selectedTextView = binding.tabItem3
            nonSelectedTextView1 = binding.tabItem1
            nonSelectedTextView2 = binding.tabItem2

            selectedFragment = ThreeFragment()
        }

        //프래그먼트 설정
        supportFragmentManager.beginTransaction()
            .setReorderingAllowed(true)
            .replace(R.id.fragmentContainer, selectedFragment, null)
            .commit()

        //(선택탭 번호 - 현재 위치번호) * 텍스트뷰 넓이값
        var slideTo: Float = ((tabNumber - selectedTabNumber) * selectedTextView.width).toFloat()

        var translateAnimation = TranslateAnimation(0F, slideTo, 0F, 0F)

        //구현 시간(1000 = 1초)
        translateAnimation.duration = 300

        //선택 번호에 따른 애니메이션 적용
        when(selectedTabNumber){

            1 -> binding.tabItem1.startAnimation(translateAnimation)
            2 -> binding.tabItem2.startAnimation(translateAnimation)
            3 -> binding.tabItem3.startAnimation(translateAnimation)
        }

        //애니메이션 이벤트
        translateAnimation.setAnimationListener(object : Animation.AnimationListener{

            override fun onAnimationEnd(p0: Animation?) {
                //애니메이션 끝나면 실행
                //선택 탭 설정
                selectedTextView.setBackgroundResource(R.drawable.round_back_white_100)
                selectedTextView.setTypeface(null, Typeface.BOLD)
                selectedTextView.setTextColor(Color.BLACK)

                //비선택 탭 설정
                nonSelectedTextView1.setBackgroundColor(ContextCompat.getColor(applicationContext,
                    android.R.color.transparent))
                nonSelectedTextView1.setTypeface(null, Typeface.NORMAL)
                nonSelectedTextView1.setTextColor(Color.parseColor("#80FFFFFF"))

                nonSelectedTextView2.setBackgroundColor(ContextCompat.getColor(applicationContext,
                    android.R.color.transparent))
                nonSelectedTextView2.setTypeface(null, Typeface.NORMAL)
                nonSelectedTextView2.setTextColor(Color.parseColor("#80FFFFFF"))

            }

            override fun onAnimationStart(p0: Animation?) {}
            override fun onAnimationRepeat(p0: Animation?) {}
        })

        //탭 번호 선택탭 변수에 담기
        selectedTabNumber = tabNumber

    }
}

2022.06.02 - [안드로이드] - [안드로이드 코틀린] DataBinding 컴포넌트 쉽게 접근하는 방법

[안드로이드 코틀린] DataBinding 컴포넌트 쉽게 접근하는 방법

2022.05.27 - [안드로이드] - [안드로이드 코틀린] 함수(function) 만드는 방법 part3 - 단일 표현식

[안드로이드 코틀린] 함수(function) 만드는 방법 part3 - 단일 표현식

2022.06.06 - [안드로이드] - [안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성

[안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성