안드로이드 뷰페이저, 탭 레이아웃 구현 (1) - 좌우로 밀어서 페이지 전환

안드로이드 뷰페이저 + 탭  구현하기

 

 

 

 

결과

실행 화면

 

 

 

 

뷰 페이저(ViewPager)

 

좌우로 화면을 밀어 페이지를 전환할 수 있는 뷰

 

 

 

 

탭(Tab Layout)

 

뷰 페이저와 연동하여 뷰 페이저의 페이지들의 메뉴처럼 사용할 수 있다.

 

 

 

 

 

 

 

구현

 

1. 레이아웃 구현

- TabLayout 을 추가해주면 다음과 같은 창이 뜬다면 OK를 누른다. ( 필요로 하는 라이브러리를 추가하겠다고 묻는거다)

 

 

 

 

 

 

- 라이브러리를 추가하고 sync를 하느라 잠시 기다려야 한다. Module: app의 가보면 가장 하단의 material이 추가되었다.

 

 

 

 

 

 

- 이제 다음과 같이 레이아웃을 구성해 준다.

 

 

 

 

 

* 레이아웃 코드

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

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

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab2" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_Item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab3" />
    </com.google.android.material.tabs.TabLayout>

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

 

 

 

 

 

 

 

2. 페이지로 사용할 Fragment 생성

- 뷰 페이저의 보여줄 페이지를 작성하기 위하여 Fragment를 만들어 준다.

(반드시 Fragment일 필요는 없지만 Fragment를 사용하여 쉽게 구현이 가능하다.)

 

 

 

 

 

- 해당 예시에서는 3개의 페이지만을 이용하므로 위 과정을 반복하여서 Fragment1부터 3까지 만든다.

 

 

 

 

 

- 각 페이지가 전환된 것을 구분하기 편하게 하기 위하여 3개의 Fragment 레이아웃에서 각각 다른 background-Color를 입혀준다.

 

 

 

 

 

 

 

3. ViewPager 의 Adapter 생성

- Java Class 파일을 하나 생성한 후 FragmentPagerAdapter를 상속받도록 한다. 상속받는 것 까지 하였으면 위 이미지처럼 빨간 라인이 보인다.

 

- 커서를 클래스 안에 두고 'Ctrl + i' 를 누르면 위 이미지 처럼 창이 뜨며 2가지를 추가해준다.

 

- 이후 'Alt + Insert' -> Constructor(생성자)를 선택하여 추가해주면 빨간 라인이 사라지며 기본적인 구조가 완성된다.

 

 

 

 

 

 

- ArrayList를 Fragment형으로 정의하여 선언 후 이전에 생성하였던 Fragment 1~3까지 add를 이용하여 추가해 준다.

(※ Fragment 이름을 위와 다르게 하였다면 이름을 맞추어주어야 한다.)

 

 

 

 

* Adapter 코드

package com.example.myapplication;

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

import java.util.ArrayList;

public class VPAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> items;
    public VPAdapter(FragmentManager fm) {
        super(fm);
        items = new ArrayList<Fragment>();
        items.add(new Fragment1());
        items.add(new Fragment2());
        items.add(new Fragment3());
    }

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

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

 

 

 

 

 

 

 

4. MainActivity

- ViewPager와 구현하였던 Adapter를 생성해 준 후 연결해 준다.

 

 

 

 

 

 

 

5. 실행 결과

- 실행을 한 후 페이지를 끌어 옆으로 넘기면 페이지가 전환되는 것을 확인할 수 있다. 하지만 tab과 페이지는 따로 동작한다.

 

 

 

 

위 문제를 해결하기 위해서는 탭과 페이지를 연동해주어야 하며 이는 다음글에서 다룬다.

또한, 추가적으로 탭 레이아웃의 이미지를 넣어 볼 것이다.

 

 

 

 

2020/02/13 - [Android] - 안드로이드 뷰페이저, 탭 레이아웃 구현 (2)

불러오는 중입니다...