[과제] 스탠다드반 3주차 특별과제 정리

 

 

해당 영상의 핵심

1. TabLayout 의 TabItem 을 눌렀을때 fragment 를 전환할 수 있다.

2. home 프래그먼트 에 저장된 데이터를 Dashboard 프래그먼트로 넘겨서 화면에 표시할 수 있다 ( Home 프래그먼트 버튼 클릭시)

3. 데이터를 string 형태가 아니라 Data class 의 값을 가져오고, 이를 넘겨주기 위해 parcelable 속성을 사용한다.

getparcelable 다른 팀원 코드

 

 

 

해당 xml를 구현하는 코드는 다음과 같다.

// activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    >

    <FrameLayout
        android:id="@+id/frame_layout"
        app:layout_constraintBottom_toTopOf="@+id/table_layout"
        ...
        />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/table_layout"
        app:layout_constraintTop_toBottomOf="@+id/frame_layout">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_home"
            android:text="Home"/>
        <com.google.android.material.tabs.TabItem
            .../>
        <com.google.android.material.tabs.TabItem
            ..."/>
    </com.google.android.material.tabs.TabLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

여기서는 fragment 가 보일 부분은 frameLayout으로 설정해야하고,

아래에서는 Navigation bar 가 아니라 TabLayout 을 사용했다. ( Navigation bar 가 나오기 전에 TabLayout 을 사용했다고 한다)

 

TabbLayout 안에는 TabItem 으로 들어갈 목록을 설정해준다.

이때, icon 는 png 가 아니라 svg 파일을 써야한다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        val tableLayout = binding.tableLayout
        val homeTab = tableLayout.getTabAt(0)
        val dashboardTab = tableLayout.getTabAt(1)
        val notificationTab = tableLayout.getTabAt(2)

        tableLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                when(tab) {
                    homeTab -> {
                        setFragment(HomeFragment())
                    }
                    dashboardTab -> {
                        setFragment(DashBoardFragment())
                    }
                    notificationTab -> {
                        setFragment(NotificationFragment())
                    }
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }
        })
    }
    
    private fun setFragment(fragment: Fragment) {
        supportFragmentManager.commit {
            replace(R.id.frame_layout,fragment)
            setReorderingAllowed(true)
            addToBackStack("")
        }
    }
}

 

 

다음은 메인 액티비티 코드이다.

메인 액티비티 코드에서는 TabItem 의 각 요소를 눌렀을때 Fragment 화면 전환을 시켜야 한다.

 

뷰 바인딩을 쓸 경우 TabItem 에 Id 를 지정해서 가져올 수 없기 때문에,

getTabAt(idx) 속성을 이용해서 차례대로 가져와야 한다.

그리고 addOnTabSelectedListener 을 이용해서 Tab이 선택되었을때 when 절을 이용해서 

프래그먼트로 화면 전환할 수 있도록 하였다.

프래그먼트 화면 전환 부분은 코드 반복을 피하기 위해 setFragment 메소드로 따로 정의했다.