뷰페이저 (ViewPager)

1. 뷰페이저 (ViewPager)

뷰페이저는 좌우 스크롤을 통해 여러 개의 화면을 전환할 수 있도록 만든 것이다.

뷰페이저 안에 들어가는 각각의 화면은 프래그먼트로 만들 수 있고, 어댑터를 사용하여 프래그먼트들을 관리할 수 있다.

프래그먼트를 하나의 아이템으로 관리하는 어댑터는 SDK에서 제공되는 어댑터인 FragmentStatePagerAdapter 클래스를 사용한다.

2. 구현 결과 화면

    

3. activity_main.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">
 
    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="두 번째 화면 보기"
        android:textSize="18sp" />
 
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
 
        <!-- 현재 보고 있는 프래그먼트가 몇 번째 프래그먼트인지 알 수 있게 해준다. -->
        <android.support.v4.view.PagerTitleStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@android:color/black"
            android:textColor="#FFFFFF"
            android:paddingTop="5dp"
            android:paddingBottom="5dp">
        </android.support.v4.view.PagerTitleStrip>
 
        <!--<android.support.v4.view.PagerTabStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@android:color/black"
            android:textColor="#FFFFFF"
            android:paddingTop="5dp"
            android:paddingBottom="5dp">
        </android.support.v4.view.PagerTabStrip>-->
 
    </android.support.v4.view.ViewPager>
 
</RelativeLayout>
 

4. viewpager_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="@android:color/holo_blue_light"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="첫 번째 화면"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textColor="@android:color/white"/>
</LinearLayout>
 

viewpager_fragment2.xml, viewpager_fragment3.xml 동일

5. ViewPagerFragment1.java

package com.tistory.qlyh8.pracitice;
 
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class ViewPagerFragment1 extends Fragment{
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) getLayoutInflater().inflate(R.layout.viewpager_fragment1, container, false);
        return rootView;
    }
}
 

ViewPagerFragment2.java, ViewPagerFragment3.java 동일

6. MainActivity.java

package com.tistory.qlyh8.pracitice;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity  {
 
    Button button;
    ViewPager viewPager;
    ViewPagerFragment1 viewPagerFragment1;
    ViewPagerFragment2 viewPagerFragment2;
    ViewPagerFragment3 viewPagerFragment3;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        viewPager = findViewById(R.id.view_pager);
        // 화면에 보이지 않는 프래그먼트는 캐싱을 해서 미리 프래그먼트를 뒤에 담아 놓고, 스크롤 시에 보여준다.
        // 이 메서드는 캐싱을 해놓을 프래그먼트 개수를 지정한다.
        viewPager.setOffscreenPageLimit(3);
 
        // 어댑터 설정
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerFragment1 = new ViewPagerFragment1();
        adapter.addItem(viewPagerFragment1);
        viewPagerFragment2 = new ViewPagerFragment2();
        adapter.addItem(viewPagerFragment2);
        viewPagerFragment3 = new ViewPagerFragment3();
        adapter.addItem(viewPagerFragment3);
        viewPager.setAdapter(adapter);
 
        // 버튼 설정, 두 번째 화면을 보여준다.
        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(1);
            }
        });
    }
 
    // 각 아이템을 프래그먼트를 넣는 경우에, FragmentStatePagerAdapter 클래스를 상속하여 만든다.
    class ViewPagerAdapter extends FragmentStatePagerAdapter {
 
        ArrayList<Fragment> arrayList = new ArrayList<>();
 
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }
 
        // 프래그먼트 추가
        public void addItem(Fragment item){
            arrayList.add(item);
        }
 
        @Override
        public Fragment getItem(int position) {
            return arrayList.get(position);
        }
 
        @Override
        public int getCount() {
            return arrayList.size();
        }
 
        // 제목 텍스트 나타내기
        @Override
        public CharSequence getPageTitle(int position) {
            int num = position+1;
            return "페이지 " + num;
        }
    }
}

7. 참고

Slide Between Fragments with ViewPager 

https://developer.android.com/training/animation/screen-slide

출처: https://www.edwith.org/boostcourse-android/lecture/17078/