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

이번 시간에는 탭을 누르면 선택된 탭과 선택되지 않은 탭을 구별해주고, 탭 별로 화면도 보여주겠습니다.

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

2022.06.14 - [안드로이드] - [안드로이드 코틀린] Tab Custom Animation part1 - 화면 구성 및 설정

[안드로이드 코틀린] Tab Custom Animation part1 - 화면 구성 및 설정

---

목차

1. 실행 화면
2. 화면(프래그먼트) 만들기
3. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

2. 화면(프래그먼트) 만들기

 - 설명 - 

각 탭을 누르면 보이는 화면

2022.01.08 - [안드로이드] - [안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

[안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

oneFragment.kt

class OneFragment : Fragment() {


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false)
    }

}

 

TwoFragment.kt

class TwoFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_two, container, false)
    }
}

 

ThreeFragment.kt

class ThreeFragment : Fragment() {


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_three, container, false)
    }
}

 

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".OneFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentOne"
        android:textSize="30sp" />

</FrameLayout>

 

fragment_two.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TwoFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentTwo"
        android:textSize="30sp" />
    
</FrameLayout>

 

fragment_three.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ThreeFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentThree"
        android:textSize="30sp" />

</FrameLayout>

 

3. 메인 코드 구현 MainActivity.kt

- 설명 - 

 1. private fun selectTab(tabNumber: Int)

   탭 선택 이벤트

 2. selectedTextView

   선택된 TextView 담을 변수

 3. nonSelectedTextView1

  선택안된 TextView 담을 변수1

 4.  nonSelectedTextView2

선택 안된 TextView 담을 변수2

5. selectedFragment 

 선택된 Fragment 담을 변수

6. supportFragmentManager.beginTransaction()

 프래그먼트 설정

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    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//비선택 탭2

        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()

        //선택 탭 설정
        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"))
    }
}

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

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

2022.05.28 - [안드로이드] - [안드로이드 코틀린] 함수(function) 만드는 방법 part4 - 오버 로딩(Overloading)

[안드로이드 코틀린] 함수(function) 만드는 방법 part4 - 오버로딩(Overloading)

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

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