Android(Java) - (1/2) ViewPager2를 이용하여 슬라이드로 프래그먼트 화면 전환하기 기본편

 

Overview

• ViewPager2를 활용하여 프래그먼트의 화면 이동을 손가락으로 옆으로 밀어서(슬라이드) 전환하는 것을 목표로합니다.
• 총 3개의 뷰페이지, 2개의 프래그먼트를 이용하여 슬라이드를 통한 화면전한 예시

---

ViewPager2 사용을 위한 설정

build.gradle (Module)

• dependencies에 viewpager2 라이브러리 추가

dependencies {
	...
    // ViewPager2
    implementation "androidx.viewpager2:viewpager2:1.1.0-beta01"
    ...
}

---

UI 디자인

activity_main.xml (MainActivity)

• 디자인 화면

 

• 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=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

---

fragment_first.xml (FirstFragment)

• 디자인 화면

 

• xml 소스

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".FirstFragment">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        android:text="Frag1"
        android:textSize="60sp" />
</FrameLayout>

---

fragment_second.xml (SecondFragment)

• 디자인 화면

 

• xml 코드

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".SecondFragment">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        android:text="Frag2"
        android:textSize="60sp" />
</FrameLayout>

---

구현 (코딩)

MainActivity

• 뷰페이저2를 보여주고 슬라이드 할 메인 화면

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

public class MainActivity extends AppCompatActivity {

    // 뷰페이저2 인스턴스
    private ViewPager2 viewPager2;
    // 뷰페이저2를 보여줄 어댑터
    private ViewPager2Adapter adapter;

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

        // 뷰페이저2 어댑터 설정
        viewPager2 = findViewById(R.id.viewPager2);
        adapter = new ViewPager2Adapter(this); // 어댑터 생성
        viewPager2.setAdapter(adapter);
    }
}

---

ViewPaer2Adapter

• 뷰페이저2의 내용을 보여줄 어댑터

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPager2Adapter extends FragmentStateAdapter {
    // 뷰페이저에 보여줄 페이지 개수 설정
    private static final int NUM_PAGES = 3;

    // 프래그먼트로 구성된 어댑터일 경우 MainActivity가 아닌 Fragment로 초기화하여야 함
    public ViewPager2Adapter(@NonNull MainActivity mainActivity) {
        super(mainActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 반환할 프래그먼트 인스턴스 생성 및 초기화
        Fragment fragment = new FirstFragment();

        // 해당 위치(position)에 따라 프래그먼트 반환
        if (position == 0) // 첫번째 위치일 경우 FirstFragment 화면 반환
            fragment = new FirstFragment();
        else if (position ==1) // 첫번째 위치일 경우 FirstFragment 화면 반환
            fragment = new SecondFragment();

        // 위치에 따른 프래그먼트 반환
        return fragment;
    }

    @Override
    public int getItemCount() {
        return NUM_PAGES; // 전체 아이템 수 반환
    }
}

 

---

FirstFragment / SecondFragment

• 뷰페이지2에서 각각의 화면을 보여줄 프래그먼트
• 추가 코드 없음

---

 

응용편에서는...

• 뷰페이지2의 화면이 이동될 때 현재 페이지가 어떤 화면인지를 표시해주는 BottomNavigationBar를 간단하게 구현합니다.
• BottomNavigationBar를 클릭 할 경우, 뷰페이저2 내에서 선택한 특정 화면으로 이동하는 것을 구현합니다.

Android(Java) - (2/2) ViewPager2를 이용하여 슬라이드로 프래그먼트 화면 전환하기 응용편

---

참고

Android developers - 가이드 - ViewPager2를 사용하여 탭으로 스와이프 뷰 만들기