Swift 11주차 - 페이지 이동하기 (페이지 컨트롤)

Swift 11주차 - 페이지 이동하기 (페이지 컨트롤)

 

이번 주차에서는 페이지 컨트롤을 이용해 여러 개의 이미지를 화면에 출력하는 간단한 갤러리 앱을 만들어 볼 예정이다.

 

 

목차

 

 

페이지 컨트롤(Page Control)

 

페이지 컨트롤(Page Control)은 아래 그림처럼 아래쪽의 작은 동그라미가 줄지어 있는 부분으로, 여러 페이지 중에서 현재 페이지를 알려 주는 역할을 한다.

 

 

다시 말해 현재 뷰에서 보여주고자 하는 내용이 여러 개일 때 페이지를 나누어서 보여주는 기능을 말한다. 흔히 갤러리나 아이폰의 홈 화면과 같은 앱에서 전체 페이지 중 현재 페이지가 어느 부분에 있는지 알려줄 때 사용한다.

 

 

페이지 컨트롤 앱 화면 꾸미기

 

먼저 프로젝트에서 사용할 이미지 6개를 추가해보자.

 

이미지를 추가할 폴더를 만들기 위해 PageControl 폴더를 마우스 오른쪽 버튼을 클릭하여 New Group를 만들자.

 

 

 

그리고 그룹 이름은 images로 변경하고 그룹 안에 이미지를 추가하자.

 

 

 

이미지 뷰를 스토리보드로 끌어와 화면의 위쪽에 배치하자.

 

 

 

그리고 오른쪽 인스턴트 창을 열어 Content Mode를 Aspect Fill로 변경하자.

 

 

 

라이브러리 창에서 페이지 컨트롤(Page Control)을 찾아 스토리보드로 끌어와 화면의 아래쪽에 배치하자.

 

 

 

 

아웃렛 변수와 액션 함수 추가하기

 

먼저 이미지 뷰에 대한 아웃렛 변수를 추가하자.

 

 

 

아웃렛 변수의 이름은 imgView로 설정하자.

 

 

그 다음 페이지 컨트롤에 대한 아웃렛 변수를 추가하자.

 

 

아웃렛 변수의 이름은 pageControl로 설정하자.

 

 

마지막으로 페이지 컨트롤의 액션 함수를 추가하자.

 

 

액션 함수의 이름은 pageChange로 설정하고 타입을 UIPageControl로 변경하자.

 

 

아래 사진은 아웃렛 변수와 액션 함수가 추가된 모습이다.

 

 

 

페이지 컨트롤 동작 구현하기

 

페이지 컨트롤을 작동하는데 필요한 변수를 뷰 컨트롤러 클래스 선언문의 바로 위해 추가하자.

 

 

여기서 변수 images는 화면에 보여줄 이미지 파일의 이름을 저장한 배열이다.

 

 

이제 앱에서 페이지가 변경될 때 동작할 pageChange 함수를 수정하자.

 

 

 

페이지가 변경되었을  때 현재 페이지에 해당하는 이미지 파일의 이름을 images 배열에서 가지고 와서 imgView에 할당하여 화면에 이미지를 출력한다.

 

 

 

다음으로 처음 앱이 실행되어 뷰가 보일때 화면에 페이지 컨트롤의 위치와 이미지를 나타내기 위한 코드를 작성하자.

 

 

페이지 컨트롤의 전체 페이지 수와 현재 페이지, 페이지 컨트롤의 색상을 설정하고 화면에 첫번째 이미지를 출력한다.

 

 

시뮬레이터를 실행하여 페이지 컨트롤의 왼쪽 부분과 오른쪽 부분을 터치하면 페이지가 변하고 이미지 또한 해당 이미지로 변하는 것을 확인할 수 있다.

 

 

 

 

페이지 컨트롤 앱 전체 소스 코드

 

import UIKit

var images = ["01.png", "02.png", "03.png", "04.png", "05.png", "06.png"]

class ViewController: UIViewController {
    
    @IBOutlet var imgView: UIImageView!
    @IBOutlet var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        pageControl.numberOfPages = images.count
        pageControl.currentPage = 0
        
        pageControl.pageIndicatorTintColor = UIColor.green
        pageControl.currentPageIndicatorTintColor = UIColor.red
        
        imgView.image = UIImage(named: images[0])
    }

    @IBAction func pageChange(_ sender: UIPageControl) {
        imgView.image = UIImage(named: images[pageControl.currentPage])
    }
    
}