[Android Studio] 탭 레이아웃(TabLayout)으로 프래그먼트 화면전환하기

​오늘은 탭 레이아웃을 이용하여 각각 다른 탭을 누를 때마다 프레임 레이아웃 안에서 프래그먼트가 탭에 따라 전환되는 코드를 알아보도록 하겠습니다.

우선 탭 레이아웃과 프레임 레이아웃으로 구성된 xml 파일을 만듭니다.

 

간단하게 리니어 레이아웃(Orientation : Vertical)을 만들어 그 안에 TabLayout과 FrameLayout을 위 사진처럼 만들어줍니다.

​TabLayout 코드 안에 있는 tabIndicatorColor는 탭을 눌렀을 때 이 탭을 선택하고 있다는 표시를 할 색상을 의미하고, tabSelectedTextColor는 탭을 눌렀을 때 탭의 제목에 이 탭을 선택하고 있음을 표시하는 색상을 의미합니다.

 

이렇게 xml 파일을 만들었으면 필요한 만큼 Fragment를 만들어줍니다.

만든 Fragment 개수만큼 Tab의 개수도 필요하겠죠?

 

<탭 레이아웃+프레임 레이아웃이 들어있는 java 소스 코드>

turnKoreanFragment = new TurnKoreanFragment();

turnMathFragment = new TurnMathFragment();

turnEnglishFragment = new TurnEnglishFragment();

turnScienceFragment = new TurnScienceFragment();

turnHistoryFragment = new TurnHistoryFragment();

​

getChildFragmentManager().beginTransaction().replace(R.id.container2, turnKoreanFragment).commit();

​

TabLayout tabs = root.findViewById(R.id.tabs);

tabs.addTab(tabs.newTab().setText("국어"));

tabs.addTab(tabs.newTab().setText("수학"));

tabs.addTab(tabs.newTab().setText("영어"));

tabs.addTab(tabs.newTab().setText("탐구"));

tabs.addTab(tabs.newTab().setText("한국사"));

 

(저는 국, 수, 영, 과, 역사 이렇게 5개의 프래그먼트를 만들었습니다.)

 

onCreate() 부분 안에 자신이 만든 Fragment를 정의해 주고 container2(프레임 레이아웃)에는 화면이 처음에 보였을 때 turnKoreanFragment라는 프래그먼트로 시작하도록 설정해 줍니다.

 

그리고 마지막으로 TabLayout도 정의해 주고 Fragment 개수에 맞게 Tab개수도 addTab을 이용하여 5개로 만들어줍니다.그다음에 아래와 같은 코드도 이어서 작성해 줍니다.

 

tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                if(position == 0){
                    getChildFragmentManager().beginTransaction().replace(R.id.container2, turnKoreanFragment).commit();
                }else if(position == 1){
                    getChildFragmentManager().beginTransaction().replace(R.id.container2, turnMathFragment).commit();
                }else if(position == 2){
                    getChildFragmentManager().beginTransaction().replace(R.id.container2, turnEnglishFragment).commit();
                }else if(position == 3){
                    getChildFragmentManager().beginTransaction().replace(R.id.container2, turnScienceFragment).commit();
                }else if(position == 4){
                    getChildFragmentManager().beginTransaction().replace(R.id.container2, turnHistoryFragment).commit();
                }
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                
            }
        });

 

tab을 Listener를 이용하여 onTabSelected, onTabUnselected, onTabReselected 3개를 만들어줍니다.

우선 우리가 사용해야 할 onTabSelected은 tab이 눌렸을 때 발동합니다.

tab을 눌렀을 때 해당 tab에 따라 Fragment의 전환이 이루어져야 하기 때문입니다.

onTabSelected 안에 tab에 각각 position을 부여해 주고 position 값에 따라 container2(프레임 레이아웃)에 넣을 Fragment를 지정해 주도록 합니다.

 

그러면 서로 다른 탭을 누를 때마다 container2(프레임 레이아웃)에 내가 탭에 따라 지정한 Fragment로 화면이 전환되는 것을 볼 수 있습니다.