자바 안드로이드 앱개발 강좌, 탭 레이아웃 – 탭 버튼 구성

안녕하세요, 여러분! 오늘은 자바를 활용한 안드로이드 앱 개발 강좌의 일환으로 탭 레이아웃을 구성하는 방법에 대해 자세히 알아보겠습니다. 탭 레이아웃은 사용자 인터페이스(UI)를 보다 직관적으로 만들고 여러 화면을 쉽게切换할 수 있도록 도와줍니다. 이번 튜토리얼에서는 탭 레이아웃의 기본 구조와 다양한 구성 요소, 그리고 자바 코드를 활용한 실습 예제를 통해 이해를 높여보도록 하겠습니다.

탭 레이아웃이란?

탭 레이아웃은 여러 화면 또는 뷰를 탭 버튼을 사용하여 전환할 수 있도록 하는 UI 구성 요소입니다. 사용자는 탭 버튼을 클릭하여 서로 다른 정보를 손쉽게 탐색하고 접근할 수 있습니다. 안드로이드의 탭 레이아웃은 주로 TabLayout, ViewPager, Fragment 등을 조합하여 구현됩니다.

탭 레이아웃 구현을 위한 기초 준비

탭 레이아웃을 구현하기 위해서는 Android Studio를 사용하여 새로운 프로젝트를 생성해야 합니다. 이번 예제에서는 기본적인 요구 사항으로 Android API 21 이상을 지원하는 프로젝트를 만들도록 하겠습니다.

1. Android Studio를 실행하고 “New Project”를 선택합니다.
2. “Empty Activity”를 선택한 후 다음 화면에서 프로젝트 이름과 패키지 정보를 입력합니다.
3. 최종적으로 “Finish” 버튼을 클릭하여 프로젝트를 생성합니다.

Gradle 설정

프로젝트의 build.gradle 파일에 필요한 의존성을 추가해야 합니다.
다음 코드를 build.gradle (Module: app) 파일의 dependencies 섹션에 추가합니다.

implementation 'com.google.android.material:material:1.4.0'

레이아웃 파일 구성

탭 레이아웃을 구성하기 위한 레이아웃 파일을 작성하겠습니다. 프로젝트의 res/layout/activity_main.xml 파일을 열어 다음과 같이 수정합니다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabLayout"/>

</RelativeLayout>

MainActivity.java 파일 수정

MainActivity.java 파일을 열어서 탭 레이아웃과 뷰 페이저를 설정하는 코드를 작성하겠습니다.
아래 코드를 MainActivity.java에 붙여넣으세요.

import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentPagerAdapter;
    import androidx.viewpager.widget.ViewPager;
    import com.google.android.material.tabs.TabLayout;
    import android.os.Bundle;

    public class MainActivity extends AppCompatActivity {

        ViewPager viewPager;
        TabLayout tabLayout;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            viewPager = findViewById(R.id.viewPager);
            tabLayout = findViewById(R.id.tabLayout);

            setupViewPager(viewPager);
            tabLayout.setupWithViewPager(viewPager);
        }

        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFragment(new FragmentOne(), "탭 1");
            adapter.addFragment(new FragmentTwo(), "탭 2");
            adapter.addFragment(new FragmentThree(), "탭 3");
            viewPager.setAdapter(adapter);
        }
    }

Fragment 작성하기

각 탭은 Fragment로 구성됩니다. FragmentOne, FragmentTwo, FragmentThree를 생성하겠습니다.
아래 코드를 참고하여 각각의 Fragment 파일을 생성하세요.

FragmentOne.java

import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import androidx.fragment.app.Fragment;

    public class FragmentOne extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragment_one, container, false);
        }
    }

FragmentTwo.java

import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import androidx.fragment.app.Fragment;

    public class FragmentTwo extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragment_two, container, false);
        }
    }

FragmentThree.java

import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import androidx.fragment.app.Fragment;

    public class FragmentThree extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragment_three, container, false);
        }
    }

Fragment 레이아웃 파일 만들기

각 Fragment에 대한 레이아웃 파일을 생성합니다. res/layout 폴더 내에 fragment_one.xml, fragment_two.xml, fragment_three.xml 파일을 각각 만들어 아래의 내용을 추가하세요.

fragment_one.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 1"
        android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_two.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 2"
        android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_three.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 3"
        android:layout_centerInParent="true"/>

</RelativeLayout>

ViewPagerAdapter 클래스 생성

ViewPager와 Fragment를 연결하는 Adapter 클래스를 생성합니다. ViewPagerAdapter라는 클래스를 만들어 아래의 코드를 작성하세요.

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

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

    public class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> fragmentList = new ArrayList<>();
        private final List<String> fragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            fragmentList.add(fragment);
            fragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return fragmentTitleList.get(position);
        }
    }

앱 실행 및 결과 확인

모든 코드가 준비되었으면 Android Studio에서 앱을 실행해 보세요.
에뮬레이터 또는 실제 디바이스에서 앱을 테스트하면, 세 개의 탭 버튼이 표시되고, 각 탭을 클릭하면 해당하는 Fragment가 나타나는 것을 확인할 수 있을 것입니다.

마무리

지금까지 자바를 활용한 안드로이드 앱 개발 강좌에서 탭 레이아웃을 구성하는 방법을 알아보았습니다.
이번 강좌를 통해 여러분은 안드로이드 UI 디자인에서 일반적으로 사용되는 탭 레이아웃을 구현하는 방법을 배우셨습니다.
이러한 기본 지식을 통해 여러분의 프로젝트에 더 많은 기능을 추가하고, 더 나은 사용자 경험을 제공하는 앱을 만들어보세요!

궁금한 점이 있거나 추가적인 질문이 있으시면 댓글 남겨주세요. 앞으로도 유용한 안드로이드 개발 관련 강좌를 많이 준비하겠습니다.
감사합니다!