TabLayout , ViewPager2 , fragment로 탭 구조 구현하기 [AndroidStudio-JAVA]

세개의 탭으로 이루어진 앱 화면을 구현해보았다.

activity_main.xml 코드

<?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"
android:background="@color/white">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout_control"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/black"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="@color/black">

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

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

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

</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.constraintlayout.widget.ConstraintLayout>

 

MainActivity.java 코드

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;

    private PagerAdapter pagerAdapter;

    private frag1_class frag1;

    private frag2_class frag2;

    private frag3_class frag3;

    private TabLayout tabLayout;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        createFragment();

        createViewpager();

        settingTabLayout();

    }

  

    private void createFragment() {

        frag1 = new frag1_class();

        frag2 = new frag2_class();

        frag3 = new frag3_class();

    }

    private void createViewpager(){

        viewPager = (ViewPager2)findViewById(R.id.viewpager_control);

        pagerAdapter = new PagerAdapter(getSupportFragmentManager(), getLifecycle());

        pagerAdapter.addFragment(frag1);

        pagerAdapter.addFragment(frag2);

        pagerAdapter.addFragment(frag3);

        viewPager.setAdapter(pagerAdapter);

        viewPager.setUserInputEnabled(false); //이 줄을 주석처리 하면 슬라이딩으로 탭을 바꿀 수 있다

    }

    private 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;

                    case 2:

                        viewPager.setCurrentItem(2);

                        break;

                }

            }

            @Override

            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override

            public void onTabReselected(TabLayout.Tab tab) {

            }

        });

    }

}

 

각 3개의 프래그먼트는 Fragment 를 상속받은 클래스를 정의해주면 된다.(예 : 위 코드에서 frag1_class)

 

viewPager를 구현하기 위해서는 페이지 adapter도 필요하다.

public class PagerAdapter extends FragmentStateAdapter{

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

    public PagerAdapter(@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();

    }

}

완성된 화면은 상단에 각 탭의 이름이 나오고, 클릭하면 탭이 이동한다.