뷰페이저

OneTwoThree·2022년 8월 24일

부스트코스 안드로이드 앱만들기

목록 보기

39/40

뷰페이저 부스트코스

프로젝트명 : MyPager

뷰페이저

손가락으로 좌우 스크롤을 하게 되면 뷰페이저 안의 화면이 좌우로 넘어가게 된다

뷰페이저가 화면 전체를 덮을수도 부분화면만 차지할 수 도 있다.

뷰페이저는 부분화면 즉 프래그먼트를 이용해 구성한다

뷰페이저 넣기

먼저 프래그먼트를 3개 만들어준다
xml 파일 3개 java 파일 3개를 만들고 인플레이션 해준다

<?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"
   >


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:text="Button" />


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true"
        tools:ignore="SpeakableTextPresentCheck">


    </androidx.viewpager.widget.ViewPager>
    
    
</RelativeLayout>

이렇게 activity_main.xml에 뷰페이저 요소를 추가한다

뷰페이저는 외부라이브러리 것을 사용하기 때문에 xml에 추가할 때 패키지명까지 입력해줘야 한다.

package com.example.mypager;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        ViewPager pager = (ViewPager) findViewById(R.id.pager);

        //화면에 당장 보이지 않는 아이템을 몇개 캐슁 해놓을지 지정하는 것이다. (미리 프래그먼트를 만들어놓는 개수)
        pager.setOffscreenPageLimit(3);

        MoviePagerAdapter adapter = new MoviePagerAdapter(getSupportFragmentManager());

        Fragment1 fragment1 = new Fragment1();
        adapter.addItem(fragment1);

        Fragment2 fragment2 = new Fragment2();
        adapter.addItem(fragment2);

        Fragment3 fragment3 = new Fragment3();
        adapter.addItem(fragment3);


        pager.setAdapter(adapter);



    }

    //뷰페이저에 어댑터를 이용해서 화면을 넣어준다
    class MoviePagerAdapter extends FragmentStatePagerAdapter{

        ArrayList<Fragment> items = new ArrayList<Fragment>();

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

        public void addItem(Fragment item){
            items.add(item);
        }

        //해당 인덱스의 아이템 리턴
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        //아이템 개수 리턴
        @Override
        public int getCount() {
            return items.size();
        }
    }


}

뷰페이저에 페이지를 등록하기 위해서는 어댑터가 필요하다

MoviePagerAdapter 클래스를 FragmentStatePagerAdapter를 상속하게 해서 새로 만들어준다

멤버변수로 프래그먼트의 ArrayList를 만들어준다.

생성자랑 addItem 메소드를 만든다
addItem은 어댑터에 프래그먼트를 등록하기 위해서다

그리고 getItem이랑 getCount 메소드를 오버라이딩 해서 items의 아이템과 개수를 리턴하게 해준다.

그리고 나서 onCreate에서 ViewPager 객체를 findViewById로 얻어온다.
그리고 setOffscreenPageLimit 메소드로 화면에 보이지 않는 페이지를 몇개 캐싱 해놓을지 정한다.

그리고 나서 어댑터 객체를 만든다.
그다음 addItem으로 프래그먼트 1,2,3을 각각 등록해주면 된다.

마지막으로 setAdapter로 뷰페이저 객체에 어댑터를 등록해준다.