(안드로이드) 33 - 탭(Tab)

버튼이 여러 개 있고 각 버튼을 클릭할 때 마다 아랫부분의 화면 전환이 이루어지는 기능이 필요한 경우가 있다. 간단하게 레이아웃으로 버튼을 만들고 아랫부분에 프레임 레이아웃이나 프래그먼트를 넣어 버튼을 클릭할 때 마다 화면의 전환을 처리하는 방식으로 구현할 수 있다. 또한 안드로이드에서는 액션바에 탭 기능을 넣어 보여주는 방법을 제공하므로 이 기능을 사용하여도 된다. 따라서 탭 위젯을 어떻게 만드는지 간단히 방법만 살펴보겠다.

먼저 탭의 구성요소에는 탭 호스트, 탭 위젯, 프레임 레이아웃 3가지가 있다.

탭 기능을 사용해서 화면 전환을 구성해보겠다.

먼저 우리는 직접 만든 액션바를 사용할 것이므로 /res/values/styles.xml 파일을 열어서 액티비티의 스타일을 액션바가 없는 스타일로 변경한다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

이제 프래그먼트를 2개 만든다.

<fragment1.xml\>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffff0000">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="200dp"
        android:text="화면1"
        android:textSize="50dp"
        android:textStyle="bold|italic"/>

</LinearLayout>

<Fragment1.java\>

package io.swnomad.sampletab;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import io.swnomad.sampletab.R;

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment1, container, false);

        return rootView;
    }
}

프래그먼트는 텍스트뷰가 한 개 있는 화면으로 단순하게 구성하였고 자바 코드에서는 onCreateView() 메소드 안에서 인플레이션하는 코드를 추가해주면 된다.

메인 액티비티의 XML파일과 Java 소스코드는 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:elevation="1dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                    android:text="타이틀"/>

            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/colorPrimary"
                app:tabSelectedTextColor="@color/colorAccent"
                android:elevation="1dp"
                android:background="@android:color/background_light"/>

        </android.support.design.widget.AppBarLayout>

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

        </FrameLayout>

    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

1. CoordinatorLayout : 액션바 영역을 포함한 전체 화면의 위치를 잡아주는 역할을 한다.
2. AppBarLayout : 액션바 영역과 탭 레이아웃을 포함하면서 간격을 알아서 조정해준다.
3. Toolbar : 직접 만든 액션바의 구성
4. TabLayout : 탭 버튼을 배치

액션바와 탭을 설정하고 디자인을 원하는대로 꾸며준다. 그리고 앱바 아래쪽에는 프래그먼트 화면을 보여줄 프레임 레이아웃을 추가해준다. 이제 탭 버튼을 클릭할 때 마다 화면이 전환되도록 처리하는 Java 소스코드를 작성하면 된다.

package io.swnomad.sampletab;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;

    Fragment1 fragment1;
    Fragment2 fragment2;

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

        /* 액션바로 직접 만든 toolbar를 적용 */
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /* 액션바 타이틀 가림 */
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);

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

        /* 첫 번째 프래그먼트가 보이도록 설정 */
        getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();

        /* 탭 레이아웃 객체 참조하여 탭 메뉴 추가 */
        TabLayout tabs = findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("탭 1"));
        tabs.addTab(tabs.newTab().setText("탭 2"));

        /* 탭 선택 리스너 객체 추가 */
        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition(); //탭 버튼의 index 참조

                Fragment selected = null;

                /* 선택된 탭에 따라 화면에 보이는 프래그먼트 변경 */
                switch(position){
                    case 0:
                        selected = fragment1;
                        break;
                    case 1:
                        selected = fragment2;
                        break;
                    default:
                        break;
                }

                MainActivity.this.getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
            }

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

            }

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

            }
        });
    }
}

탭을 선택하면 자동으로 호출되는 탭 레이아웃에 OnTabSelectedListener() 객체를 설정하고 OnTabSelected() 메소드에서 탭 버튼 클릭 이벤트가 발생할 때 원하는 로직을 작성하면 된다. 리스너가 설정된 탭의 버튼의 index는 탭의 getPosition() 메소드를 통해서 가져올 수 있다. 이 index별로 프래그먼트를 설정해주어 탭 버튼을 눌러 화면의 전환을 구현하였다.

앱을 실행하면 아래의 결과화면을 확인할 수 있다.