[안드로이드] 탭(Tab) 만들어 보기

2020/06/05 - [안드로이드] - [안드로이드]탭(TAB) 선택시 색상지정 setTabTextColors

이번시간에는 탭화면을 만들어보겠습니다. 앱에서 흔하게 볼 수 있습니다.

여러개의 화면을 구간으로 나눠서 해당탭을 누르면 화면이 바뀝니다.

화면은 프래그먼트로 만들어서 액티비티에 적용할 것입니다. 

Tab을 사용하려면 라이브러리를 추가해야 합니다.

Gradle Script -> build.gradle(Module:app)

dependencies 안에 아래 코드를 추가하고 

implementation 'com.android.support:design:29.0.0'

아래 항목을 클릭하면 라이브러리가 추가됩니다.

1. 프래그먼트 생성

화면은 3개가 필요합니다. 

파일명은 Fragment1, Fragment2, Fragement3 이렇게 만들면 됩니다.

app -> New -> Fragment(Blank) 

2. 프래그먼트 화면구성

Fragment_1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:text="화면1"
        android:textSize="30sp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

Fragment_2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:text="화면2"
        android:textSize="30sp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

Fragment_3.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".Fragment3">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="화면3"
        android:textSize="30sp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>

</RelativeLayout>

3. 메인화면 구성(activity.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="#000000"
        android:elevation="1dp"
        />

    <FrameLayout
        android:id="@+id/containers"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

4. 메인화면 코드(MainActivity.java)

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 {

    TabLayout tabs;
    Fragment1 fragment1; //화면1
    Fragment2 fragment2; //화면2
    Fragment3 fragment3; //화면3

    int position;

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

        getSupportActionBar().setTitle("탭1");
        tabs = findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("탭1"));
        tabs.addTab(tabs.newTab().setText("탭2"));
        tabs.addTab(tabs.newTab().setText("탭3"));

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();

        getSupportFragmentManager().beginTransaction().replace(R.id.containers, fragment1).commit();

        tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

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

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

            // 탭 선택시 활성화
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                position = tab.getPosition(); //탭위치

                Fragment selected = null;

                if(position == 0){
                    selected = fragment1;
                    getSupportActionBar().setTitle("탭1");
                }else if(position == 1){
                    selected = fragment2;
                    getSupportActionBar().setTitle("탭2");
                }else if(position == 2){
                    selected = fragment3;
                    getSupportActionBar().setTitle("탭3");
                }

                getSupportFragmentManager().beginTransaction().replace(R.id.containers, selected).commit();
            }
        });

    }
}

5. 실행화면