[안드로이드] TabLayout과 ViewPager 사용

TabLayout  |  Android 개발자  |  Android Developers

TabLayout은 레이아웃 내에 TabItem들을 추가하여서 Tab들을 선택해서 상호작용을 할 수 있는 역할을 합니다.

​

그중에서 보편적으로 많이 활용되는 기능은 한 Activity 내에서 상단에 TabLayout 두고 그 밑에 ViewPager를 둔 다음 ViewPager에 프래그먼트를 삽입해서 여러 화면을 왔다 갔다 하는 방식의 UI를 구성할 수 있습니다.

---

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ControlActivity">
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout_control"
        app:layout_constraintTop_toTopOf="parent"
        app:tabTextColor="@color/white"
        app:tabBackground="@color/blue"
        app:tabIndicatorColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/mouse_tab_control"
            android:text="TAB1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></com.google.android.material.tabs.TabItem>

        <com.google.android.material.tabs.TabItem
            android:id="@+id/keyboard_tab_control"
            android:text="TAB2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></com.google.android.material.tabs.TabItem>

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager_control"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tablayout_control"
        android:layout_width="match_parent"
        android:layout_height="0dp"></androidx.viewpager2.widget.ViewPager2>

</androidx.constraintlayout.widget.ConstraintLayout>

---

우선 저는 탭을 2개 추가해서 하나는 '마우스' 탭, '키보드' 탭으로 설정하겠습니다.

TabLayout 속성 중 app:layout_constraintTop_toTopOf="parent"를 사용해서 상단에 배치를 시킵니다. 물론 하단에 배치 시킬 수도 있고 이건 레이아웃 배치하기 나름입니다.

그리고 "app:tabTextColor" 속성으로 tab 내의 text 색상을 지정할 수 있고,

"app:tabBackground"​ 속성으로 tab의 배경 색상,

"app:tabIndicatorColor"으로 현재 tab을 가리키는 indicator의 색상을 변경할 수 있습니다.

---

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;

import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStateAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();


    public ViewPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return mFragmentList.size();
    }
}

---

그리고 FragmentStateAdapter를 상속받는 ViewPagerAdaper 클래스를 만듭니다. adapter 내에 Fragment들을 List 형태로 보관하고 있습니다.

 

---

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Build;
import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.jun.moiso.R;
import com.jun.moiso.adapter.ViewPagerAdapter;
import com.jun.moiso.fragment.KeyboardFragment;
import com.jun.moiso.fragment.MouseFragment;

public class ControlActivity extends AppCompatActivity {


    private ViewPager2 viewPager;
    private ViewPagerAdapter viewPagerAdapter;
    private MouseFragment mouseFragment;
    private KeyboardFragment keyboardFragment;

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_control);

        createFragment();
        createViewpager();
        settingTabLayout();
    }


    //fragment 생성
    public void createFragment()
    {
        mouseFragment = new MouseFragment();
        keyboardFragment = new KeyboardFragment();
    }

    //viewpager 및 어댑터 생성
    public void createViewpager()
    {
        viewPager = (ViewPager2) findViewById(R.id.viewpager_control);
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), getLifecycle());
        viewPagerAdapter.addFragment(mouseFragment);
        viewPagerAdapter.addFragment(keyboardFragment);

        viewPager.setAdapter(viewPagerAdapter);
        viewPager.setUserInputEnabled(false);//터치 스크롤 막음
    }

    //tablayout - viewpager 연결
    public void settingTabLayout()
    {
        tabLayout = (TabLayout)findViewById(R.id.tablayout_control);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int pos = tab.getPosition();

                switch (pos)
                {
                    case 0 :
                        viewPager.setCurrentItem(0);
                        break;
                    case 1 :
                        viewPager.setCurrentItem(1);
                        break;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

---

그다음 Activity 내의 코드입니다.

순서는 Fragment 생성 -> ViewPager 및 ViewPagerAdapter 생성 후 프래그먼트 추가, Adapter 적용 -> TabLayout Listener 구현 후 적용입니다.

​

---

           @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int pos = tab.getPosition();

                switch (pos)
                {
                    case 0 :
                        viewPager.setCurrentItem(0);
                        break;
                    case 1 :
                        viewPager.setCurrentItem(1);
                        break;
                }
            }

---

Listener 부분을 살펴보면 선택된 tab의 position 번호를 받아와서 각 tab position 번호와 viewpager의 item position을 매핑 시키는 작업입니다. 0번 tab 이면 viewpager에서도 0번 프래그먼트를 보여주고, 1번 tab 이면 1번 프래그먼트를 보여주는 방식이지요.

​

완성본입니다.