[Android] TabLayout

1. 앱 모듈 dependencies에 라이브러리를 추가한다.

implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'

 

2. app/res/values/styles.xml 에 들어가서 style parent를 Theme.AppCompat.Light.NoActionBar로수정한다.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

3. app/res/layout에서 오른쪽 마우스 버튼 클릭 후 New > Layout Resource File을 생성한다.

 

4. 이와 같은 방식으로 tab_fragment_1부터 tab_fragment_5까지 만들어준다.

 

5. app/java/com.example.파일이름 에서 오른쪽 마우스 클릭. [New]-[Java Class]로 TabFragment1부터 TabFragment5까지 만들어준다.

 

6. extends Fragment로 확장해 준 후 ctrl+o를 눌러 oncreateview를 오버라이드 해준다.

package com.example.paik_app;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class TabFragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return super.onCreateView(inflater, container, savedInstanceState);
    }
}

 

7. 그 다음 레이아웃 파일을 연결해 준다.

package com.example.paik_app;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class TabFragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab_fragment_1, container,false);
    }
}

 

8. 같은 방식으로 5개의 레이아웃 모두 연결한다.

 

9. 탭이 변할때마다 포지션을 받아서 프래그먼트를 전환해주는 역할을 하는 TabPagerAdapter 만들기

extends FragmentStatePagerAdapter를 추가해준다음

package com.example.paik_app;

import androidx.fragment.app.FragmentStatePagerAdapter;

public class TabPagerAdapter extends FragmentStatePagerAdapter {
}

Alt+Enter를 누르고 [Implement methods]를 누르면

이런 창이 뜬다. ok를 눌러준다.

 

10. 다음으로 탭의 개수를 저장할 변수를 생성해 준다. 그 다음 Alt+Enter를 누르고 Create constructor matching super를 클릭해주면

이런 창이 뜨는데 사진과 같이 ok를 눌러준다.

 

11. 그 다음 getitem 함수에서 탭의 포지션에 따라 화면을 전환해 주기위해 switch문을 사용

TabPagerAdapter.java

package com.example.paik_app;

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

public class TabPagerAdapter extends FragmentStatePagerAdapter {

    private int tabCount;//탭 개수를 세는 변수

    public TabPagerAdapter(@NonNull FragmentManager fm, int tabCount) {
        super(fm);
        this.tabCount = tabCount;
    }

    //탭 포지션에 따라 화면전환
    @NonNull
    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                TabFragment1 tabFragment1 = new TabFragment1();
                return tabFragment1;
            case 1:
                TabFragment2 tabFragment2 = new TabFragment2();
                return tabFragment2;
            case 2:
                TabFragment3 tabFragment3 = new TabFragment3();
                return tabFragment3;
            case 3:
                TabFragment4 tabFragment4 = new TabFragment4();
                return tabFragment4;
            case 4:
                TabFragment5 tabFragment5 = new TabFragment5();
                return tabFragment5;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {

        return tabCount;
    }
}

activity_main.xml

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <View
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_weight="1"/>


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        app:tabTextColor="#593886"
        android:background="#DDC7FA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</LinearLayout>

MainActivity.java

package com.example.paik_app;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout; //탭레이아웃 변수


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


        /*탭 레이아웃*/
        tabLayout = findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_home_black_24dp));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_search_black_24dp));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_location_on_black_24dp));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_chat_24dp));
        tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_person));



        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);


    }
}