코린이 탈출기

chapter 10.2 - ViewPager 본문

ViewPager은 여러 개의 화면을 책 페이지처럼 한 장씩 보도록 지원하는 기능입니다.

메인 xml에 직접 프래그먼트를 올리는 것이 아닌 ViewPager을 배치한 후 그 위에 프래그먼트를 올리는 방식입니다.

플레이 스토어 앱을 사용한다고 보면 가로로 스크롤 뷰를 넘기는 것인데, 넘기는 것뿐만 아니라 스크롤을 페이지와 페이지 사이에서 스크롤을 멈출 수 없게 강제로 한 페이지에 머물도록 위치를 이동시키는 기능이 추가된 개념입니다.

 

저번에 다룬 ListView와 마찬가지로 ViewPager도 ViewPager2가 있는데, 바로 배우기에는 난이도가 있으므로 최신 버전이 아닌 이전 버전으로 다루겠습니다.

 

메인화면에 ViewPager을 배치하겠습니다.

ViewPager

ViewPager을 작성하면 자동으로 2 버전도 같이 나오지만 아직 다루기에는 난이도가 있으므로 이전 버전으로 하겠습니다.

ViewPager을 전체 화면으로 설정한 후 아이디를 설정합니다.

 

ViewPager에 띄울 프래그먼트를 작성하겠습니다.

간단하게 작성을 할 것이기 때문에 따로 설명을 하지는 않겠습니다.

(코드가 중복되어 빠르게 작성하려면 복사 / 붙이기를 이용하세요.)

패키지를 만들어 3개의 프래그먼트를 만들고 클래스 파일로 연결하겠습니다.

간단하게 이름, 정보, 인사말로 하겠습니다.

프래그먼트 xml
프래그먼트 xml 코틀린 파일과 연결

 

이렇게 만든 프래그먼트를 ViewPager에서 위치에 맞게 뿌려주기 위해서는 Adapter를 활용해주어야 합니다.

 

2021.05.06 - [안드로이드/클래스101 - 비전공자들을 위한 나만의 안드로이드 앱 만들기] - chapter 6.1 - 리스트뷰 - 개념에 대한 소개

 

(어댑터의 경우 ListView를 만들면서 소개했었습니다. 어댑터에 대해 더 자세하게 알고 싶으면 chapter 6.2 ~ 6.5를 통해 보시면 됩니다.)

 

Adapter을 사용하기 위해 우선 패키지를 새로 만들어서 안에 클래스 파일을 만들겠습니다.

Fragment와 동일하게 상속을 받겠습니다. 상속을 받으면 앞, 뒤 모두 에러가 발생하는데 이를 해결하기 위해 생성자를 넣겠습니다.

생성자를 넣게 되면 FragmentPagerAdapter 위에 줄이 그어지는데 이는 오래된 문법이어서 사용을 자제해달라는 뜻입니다.

우선 에러는 아니니 넘어가 보면 앞에 에러는 사라지지 않습니다.

 

앞부분에 'ALT + ENTER'을 누르면 Implement members라고 뜨는데, 이는 꼭 필요한 함수를 작성하지 않았다는 뜻입니다.

 

Implement members

누르게 되면 위와 같은 화면이 보입니다. 두 가지의 함수를 구현하라는 상자가 나옵니다.

 

누르면 위와 같이 자동으로 함수가 오버라이딩되는데, 9번과 13번 줄은 사용하지 않을 것이기 때문에 다 지우고 사용하겠습니다.

 

FragmentPagerAdapter

gerItem 함수는 각각의 position에 맞는 프래그먼트가 어떤 프래그먼트인지 명시해주는 함수입니다. 각 상황 별로 프래그먼트를 객체화해서 리턴 처리해주어야 합니다.

if 문을 사용하여 각 위치에 따른 프래그먼트를 설정하였습니다.  13 ~ 21번 줄에 해당합니다.

getCount 함수는 뷰 페이지가 총 몇 페이지인지 표현하는 함수입니다. 총 몇 페이지인지 숫자로 리턴 시켜줍니다.

25번 줄은 프래그먼트의 수는 총 3개로 리턴을 3으로 표시하였습니다.

 

어댑터를 만들었다면 MainActivity.kt로 가서 연결하겠습니다.

 

어댑터 연결

10번 줄은 나중에 담을 내용(어댑터)을 변수를 저장하는 것입니다. 지금 미리 정할 수 없을 경우 사용하는 변수입니다.

만들었던 MainViewPagerAdapter를 변수로 담아 사용하겠습니다.

이 어댑터를 객체화시켜주겠습니다.

16번 줄을 보면 위에 만든 변수를 불러 어댑터를 객체화시켰습니다. 이때 생성자는 기존에는 fm으로 설정하였습니다. 그러니 생성자를 1개 담아주어야 합니다. supportFragmentManager를 사용하여 담아주겠습니다.

이제 어댑터로 연결시키면 됩니다. 17번 줄과 같습니다.

 

여기까지 작성 후 에뮬레이터를 동작시키면 페이지를 가로로 넘길 수 있을 겁니다.

 

위에 만든 프로젝트의 경우에는 프래그먼트가 3 페이지로 구성되어 작동이 잘 되지만 만약 프래그먼트가 너무 많을 경우에는 끊기는 경우가 있습니다. 이를 좀 더 부드럽게 사용하기 위해 21번 줄과 같은 코드를 사용하였습니다. 이 코드는 페이지 수를 지정하여 그 페이지를 한 번 만들어서 재활용하여 사용하는 것입니다.

Comments