GODOG

안드로이드 뷰페이저, 탭 레이아웃 구현 - 탭 연동하기

2020/02/12 - [Android] - 안드로이드 뷰페이저, 탭 레이아웃 구현 (1) - 좌우로 밀어서 페이지 전환

해당 글은 이전 글과 이어진다.

결과

구현

1. MainActivity

- 23 ~ 32라인이 추가되었다.

 > 24 ~ 25 라인 : 탭과 뷰 페이저를 연동시키는 과정

 > 27 ~ 32 라인 : 이미지들을 ArrayList에 저장한 후 탭에 넣어준다. 이미지를 넣지 않을꺼면 생략하여도 된다.

※ 이미지는 직접 파일을 구하여 이름의 맞게 넣어주어야 한다. 아래 사이트에 가면 사용할 여러 이미지를 받을 수 있다.

https://material.io/resources/icons/?style=baseline

* MainActivity

package com.example.myapplication;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

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

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        ViewPager vp = findViewById(R.id.viewpager);
        VPAdapter adapter = new VPAdapter(getSupportFragmentManager());
        vp.setAdapter(adapter);

        // 연동
        TabLayout tab = findViewById(R.id.tab);
        tab.setupWithViewPager(vp);

        ArrayList<Integer> images = new ArrayList<>();
        images.add(R.drawable.cal);
        images.add(R.drawable.sea);
        images.add(R.drawable.set);

        for(int i=0; i<3; i++) tab.getTabAt(i).setIcon(images.get(i));
    }
}

2. Adapter

- 탭과 연동을 해주면 탭의 텍스트가 표시가 안되게 된다. 그래서 이를 표시해주기 위하여 Adapter파일로 간다.

- 'Ctrl + O' 를 눌러 getPageTitle을 타이핑하여 찾은 후 추가해 준다.

- 탭 아이템들의 표시할 텍스트를 ArrayList를 선언하여 저장해준 후 getPageTitle에서 position에 따라 표시하도록 한다.

3. Tab Layout

- app:tabIndicatorColor 를 사용하여서 탭의 indicator 색을 변경해 줄 수 있다.

- app:tabSelectedTextColor 를 사용하여서 선택된 탭의 텍스트 색을 변경해 줄 수 있다.

- 더욱 복잡한 효과를 적용하고 싶다면 직접 파일로 만들어 적용해 주어야 한다.

( ※ app: 속성을 찾지 못할 때는 'app:' 까지 입력하면 추가할 것인지 물으면 'Alt + Enter' 를 해주면 된다. )

4. 실행 결과

- 이전 글에서와 달리 탭을 눌러도 그에 따라 페이지가 변하며 페이지를 변경하여도 그에따라 탭도 변경된다.

탭의 텍스트만 넣고 싶다면 위에서 이미지를 넣는 부분을, 이미지만을 넣고 싶다면 텍스트를 넣는 부분을 빼주면 된다.

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

결과

뷰 페이저(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)