[ iOS ] 페이지 이동하기 - 페이지 컨트롤

공부한 내용을 정리한 글입니다.

 

문제

페이지 컨트롤을 이용해 여러 개의 이미지를 화면에 출력하라. 이미지 오른쪽 상단에 페이지 번호도 함께 출력하라. 페이지 번호는 1부터 시작한다.

 

 

구현 순서

1. 레이아웃 구성
2. 아울렛 변수와 액션 함수 생성
3. 이미지 출력에 사용할 이미지 이름이 담긴 배열 생성
4. 페이지 컨트롤 액션함수 코드 작성
5. 초기 화면 설정

 

 

최종 결과

 

 

 

 

 

 

---

1. 레이아웃 구성

 

 

페이지 컨트롤 Page Control

UIPageControl: Shows progression through a list of pages.

페이지 리스트의 진행 상황을 보여준다.

 

 

 

 

 

 

 

 

---

2. 아울렛 변수와 액션 함수 생성

 

아울렛 변수

    @IBOutlet var lblPageIndex: UILabel! //text 속성 사용
    @IBOutlet var imgView: UIImageView! //image 속성 사용
    @IBOutlet var pageControl: UIPageControl! //current, 전체 페이지 수 설정, 색 설정 속성 사용

 

lblPageIndex : text 속성 사용

imgView : image 속성 사용

pageControl : numberOfPages, currentPage, pageIndicatorTintColor, currentPageIndicatorTintColor 속성 사용

numberOfPages	The number of pages the receiver shows (as dots). 제공자가 출력할 페이지 수. 즉, 페이지컨트롤의 전체 페이지 수
currentPage	The current page, shown by the receiver as a white dot. 제공자의해 보여지고 있는 현재 페이지. 현재 페이지 인덱스
pageIndicatorTintColor	The tint color to be used for the page indicator. 페이지 인디케이터에 사용되는 색.
currentPageIndicatorTintColor	The tint color to be used for the current page indicator. 현재 페이지 인디케이터에 사용되는 색.

 

 

 

액션 함수

    //Evemt - value Change : 페이지가 변하면 호출된다.
    @IBAction func pageChange(_ sender: UIPageControl) {
       
    }

pageChange : 페이지 컨트롤의 값이 변하면 호출된다.

Event : value Changed

액션함수 생성 시 액션 함수를 언제 실행할지를 결정하는 항목인 Event 종류를 선택할 수 있는데, value Changed의 경우 값이 변할 때 호출된다.

 

 

 

 

 

 

 

 

 

 

 

---

3. 이미지 출력에 사용할 이미지 이름이 담긴 배열 생성

사진을 해당 프로젝트에 추가한 후 해당 사진 파일들의 이름을 가지고 배열을 생성한다. 확장자 명도 필수적으로 작성한다.

import UIKit

var images = ["WallaceAndGromit_putArmsAround.jpg",
              "WallaceAndGromit_playingMusic.jpg",
              "WallaceAndGromit_face.png"]


class PageControlMissionViewController: UIViewController {
   ...
}

 

 

 

 

 

 

 

 

 

---

4. 페이지 컨트롤 액션함수 코드 작성

    //Evemt - value Change : 페이지가 변하면 호출된다.
    @IBAction func pageChange(_ sender: UIPageControl) {
        imgView.image = UIImage(named: images[pageControl.currentPage])
        lblPageIndex.text = String(pageControl.currentPage + 1)
    }

페이지가 변하면 해당 페이지의 이미지로 imgView를 설정해주어야 한다. 따라서 배열 이미지 이름 중 현재 페이지 인덱스에 해당하는 이미지 이름을 가져와 UIImage 객체로 변환한 후 이미지를 imgView의 image 속성에 할당한다. 

lblPageIndex도 바뀐 페이지 번호로 변경해 준다. 페이지 번호가 0부터 시작하기 때문에 인덱스 할당 시 +1 을 한다.

 

 

 

 

 

 

 

 

 

 

---

5. 초기 화면 설정

초기 화면은 뷰 로드 시 호출되는 함수인 viewDidLoad() 함수에 구현해야 한다.

    //뷰 로드 시 호출되는 함수
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //시작 화면 설정
        imgView.image = UIImage(named: images[0])
        lblPageIndex.text = "1"
        
        pageControl.numberOfPages = images.count
        pageControl.currentPage = 0
        pageControl.pageIndicatorTintColor = UIColor.gray
        pageControl.currentPageIndicatorTintColor = UIColor.green
    }

먼저 imgView는 이미지 이름 배열의 첫 번째, 즉 0번 인덱스를 사용해 image를 설정한다.

현재 페이지 인덱스를 출력하는 lblPageIndex의 text에는 1을 할당한다.

pageControl은 numberOfPages 속성을 사용해 전체 페이지 수를 설정한다. 여기서 전체 페이지 수는 이미지 이름 배열의 count 속성을 사용한다.

그 다음 currentPage 속성을 사용하여 현재 페이지의 인덱스 번호를 설정한다.

pageIndicatorTintColor, currentPageIndicatorTintColor 속성을 하여 페이지 컨트롤의 인디케이터 색을 설정한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

공부 자료

Do It! 스위프트로 아이폰 앱 만들기 개정 5판
SWIFT 문서