iOS Programming : Scroll View에 Page Control 기능 구현하기

아이폰 화면을 보면 여러 페이지에 걸쳐 앱 아이콘들이 놓여있고 손가락 드래그로 좌/우 페이지를 전환한다.
이때 화면 하단에는 현재 몇 번째 페이지를 보여주고 있는지 흰색 도트로 표시가 되어 있다.
이 흰색 도트는 페이지가 좌/우로 변경될 때마다 함께 이동하며 항상 현재가 몇 번째 페이지인지를 확인할 수 있게 해준다.
이 기능이 바로 Page control 기능이다.
이번엔 Scroll View에 Page control을 추가해 기능을 구현해본다.

SingView Application Template으로 PageControl이라는 이름의 Project를 생성한다.
왼쪽 project 네비게이터에서 PageControlViewController.xib를 선택하고 Inspector 메뉴의 아래쪽에 있는 Objects 리스트에서 Scroll View를 클릭후 드래그하여 에디트화면상의 View 위에 올려놓고, 그 위에 Page Control을 드래그하여 올린다.

Page Control을 Scrol View위에 올리면 위의 그림과 같이 Scrol View의 하위 object로 들어가게 되기 때문에 Page Control을 추가할때는 Scrol View의 크기를 조금 줄여서 View의 빈 공간에 Page Control을 놓은 후...

Scrol View의 크기를 원래대로 늘려주면 된다.

다음은 project 네비게이터에서 PageControlViewController.h 파일을 열어 아래와 같이 scrollView 객체와 pageControl객체를 xib파일에서 추가해 둔 Scroll View 및 Page Control과 연결할 수 있도록 IBOulet 키워드를 사용해 property 선언해 준다.

PageControlViewController.m 파일에는 위에서 property 선언해준 scrollView, pageControl 객체를 synthesize해준다.

다시 project 네비게이터에서 PageControlViewController.xib를 열고 File's Owner를 선택 후 위에서 IBOulet으로 선언해준 scrollView와 pageControl 항목을 각각 연결해 준다.

마지막으로 Object 항목의 Scroll View를 선택하여 아래와 같이 delegate를 File's Owner로 연결해 준다.

이 연결을 하지 않을 경우 최종 결과물에서 페이지 전환은 되나 page control의 흰색 도트가 움직이지 않는 결과를 보게 된다.

여기까지 기본적인 준비는 다 되었고, 실제로 화면에 표시할 이미지를 준비해서 project에 포함시킨다.

아래와 같이 car1, car2, car3, car4.jpg 이름으로 아이폰 배경화면 4개를 준비해 project에 추가해 보았다.

이제 이미지를 scrollView 위에 띄우고 Page Control 도트가 페이지의 이동과 함께 연동하도록 코드를 추가한다. 

아래와 같이 PageControlViewController.m 파일의 viewDidLoad 메소드에 방금 추가한 이미지 파일을 imageView로 생성하여 addSubView로 scrollView를 붙여준다.

아이폰 시뮬레이터 화면의 해상도를 320 x 480 픽셀로하여 준비된 4장의 총 크기는 (320 * 4) x 480 이다.

여기에 화면 상단의 Status Bar가 차지하는 height 20 픽셀을 빼도록 한다. 따라서 1280 x 460 이 되었다.

20 픽셀을 빼지 않고 height를 480으로 생성할 경우 상하 스크롤까지 되기 때문에 보기에 그다지 좋지가 않다.

여기에 Page control의 총 페이지 수(준비한 이미지가 4개 이므로 4페이지)와 실행초기의 현재 페이지 위치(0부터 시작)를 설정해주는 코드를 아래와 같이 추가한다.

마지막으로 scroll view가 스크롤이 된 직후 불려지는 scrollViewDidScroll: 메소드를 추가하여 실제 pageControl의 page표시를 갱신하는 코드를 추가한다.

아래 코드와 같이 좌우로 현재 Page의 50%를 넘어가는 만큼 스크롤이 발생할 경우 좌측 또는 우측 페이지로 전환이 되도록 구현한 후 pageControl의 현재 페이지를 새로 변경된 페이지로 갱신하면 화면상의 흰색 도트가 함께 이동이 된다.

이제 실행을 해보자.

음... 좀 이상하다.

원하는 결과는 페이지 단위로 딱딱 끊어지며 화면 전환이 이루어져야 하는데 이건 뭐... 그냥 일반 스크롤뷰의 움직임에 pageControl만 추가가 된 느낌이다.

이를 수정해보자.

 PageControlViewController.xib 파일을 열고 Scroll View object를 선택한 후 오른쪽 Attribute Inspector에서 Scroll View의 Scrollers 속성을 다음과 같이 수정한다.

- Shows Horizontal Scrollers 와 Shows Vertical Scrollers 속성을 해제한다. (스크롤바가 없는 것이 더 깔끔하다)

- Scrolling Enabled 와 Paging Enabled 속성을 선택한다.

다시 한번 실행을 시켜보자.

시뮬레이터의 화면을 마우스를 사용해 좌우로 드래그를 해보면 이미지가 화면 단위로 스크롤이 되며 아래쪽 Page Control의 흰색 도트도 페이지와 함께 이동하며 현재 페이지를 표시해 주는 것을 확인할 수 있을 것이다.