[JAVA][Android] 탭 레이아웃 구현하기

viewPager2 를 이용해 탭레이아웃을 구현해보자

 

먼저 의존성을 추가해야한다.

implementation 'androidx.viewpager2:viewpager2:1.0.0'

 

크게 보면 TabLayout, viewPagerAdater, viewPager2가 필요하다. TabLayout은 말그대로 사용자가 누르는 상단 탭이고 viewPagerAdater는 viewPager2와 fragment를 연결시켜준다. viewPager2는 탭을 눌렀을 때, 아래보이는 화면이다.

 

 

1. 화면 구성(TabLayout)

먼저 TabLayout과 viewpager2를 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabSelectedTextColor="@color/black"/>
    
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

---

 

2. fragment

fragment1에 보일 화면, fragment2에 보일 화면을 각각 구성해보자.

fragment 화면 만들기

Fragment를 선택해서 각각 Fragment1, Fragment2로 생성하였다.

 

- Fragment1.java

public class Fragment1 extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

(코드가 길게 생성이 될텐데 나머지는 지워주고 두개만 남긴다)

- fragment_1.xml

<!-- Fragment1 -->

<?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=".Fragment1">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Fragment1"
        android:textSize="50dp"/>

</FrameLayout>

 

Fragment2도 마찬가지로 작성해준다.

-Fragment2.java

public class Fragment2 extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_2, container, false);
    }
}

- fragment_2.xml

<!-- Fragment2 -->

<?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=".Fragment2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Fragment2"
        android:textSize="50dp"/>

</FrameLayout>

---

 

3. ViewPagerAdapter

ViewPagerAdapter.java 클래스를 생성해주고 FragmentStateAdapter를 상속받았다.

(필수적인 메서드가 두가지 있고 생성자가 없기때문에 오류가 날것이다. alt+Enter키로 두 메서드와 생성자를 생성한다.)

public class ViewPagerAdapter extends FragmentStateAdapter {
    public ViewPagerAdapter(@NonNull Fragment fragment) {
        super(fragment);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return null;
    }

    @Override
    public int getItemCount() {
        return 0;
    }
}

 

fragment 를 담을 List를 추가하고 함수안에 내용을 채워보자

 

package com.example.mytablayout;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;

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

public class ViewPagerAdapter extends FragmentStateAdapter {
    // fragment 리스트
    private final List<Fragment> fragmentList = new ArrayList<>();
    
    public ViewPagerAdapter(@NonNull Fragment fragment) {
        super(fragment);
    }
    
    //fragment 추가시 사용할 함수
    public void addFragment(Fragment fragment) {
        fragmentList.add(fragment);
    }
    
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        // fragment 개수
        return fragmentList.size();
    }
}

---

 

4. MainActivity

 

이제 MainActivity에 tab과 viewPager2와 fragmement를 연결해보자.

 

public class MainActivity extends AppCompatActivity {
    ViewPager2 viewPager2;
    ViewPagerAdapter viewPagerAdapter;
    Fragment1 fragment1;
    Fragment2 fragment2;
    TabLayout tabLayout;

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

        tabLayout = findViewById(R.id.tabLayout);
        viewPager2 = findViewById(R.id.viewpager2);
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();

        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), getLifecycle());
        viewPagerAdapter.addFragment(fragment1); //fragment1를 adapter에 추가
        viewPagerAdapter.addFragment(fragment2);

        viewPager2.setAdapter(viewPagerAdapter); //viewPager에 adapter 세팅
        
        // tabLayout에 들어갈 이름 List
        final List<String> tabList = Arrays.asList("fragment1", "fragment2");

        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                TextView textView = new TextView(MainActivity.this);
                textView.setText(tabList.get(position));
                textView.setTextColor(Color.BLACK);
                textView.setGravity(Gravity.CENTER);
                tab.setCustomView(textView);
            }
        }).attach();

    }
}

 

 간단하게 fragment를 adapter의 List에 넣어주고 viewPager2에 adapter를 설정해준다. 그 후 tabLayout에 tab을 생성한 후 TabLayoutMediator에 tabLayout, viewPager2를 연결해준다.

 

5. 결과창

 

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.