[iOS/swift] 페이지 컨트롤(Page Control) 갤러리 앱 만들기

Xcode(버전11.2.1)를 이용하여 페이지 컨트롤(Page Control) 갤러리 앱을 만든다:)

 

 

 

- 프로젝트 이미지파일 추가

프로젝트에 'images' group을 새로 만들고, 사용할 이미지를 추가한다.

 

 

- 스토리보드 앱 화면 구성

imageview와 pagecontrol 추가한다.

 

 

 

- 아울렛 변수 추가

imageview, pagecontrol 아웃렛 변수를 추가한다.

imageview -> 'imgView'

pagecontrol -> 'pageControl'

 

 

 

- 액션 함수 추가

pagecontrol 액션 함수를 추가한다.

pagecontrol -> 'pageChanged'

 

 

 

전체 소스 보기

//
//  ViewController.swift
//  day191209_ PageControl
//
//  Created by 무니 on 09/12/2019.
//  Copyright © 2019 com.mooni. All rights reserved.
//
 
import UIKit
 
// 화면에 보여줄 이미지 파일 이름을 images 배열에 저장
var images = [ "01.jpeg", "02.jpeg", "03.jpeg", "04.jpeg", "05.jpeg", "06.jpeg" ]
 
class ViewController: UIViewController {
    
    @IBOutlet var imgView: UIImageView! // 이미지 출력용 아웃렛 변수
    @IBOutlet var pageControl: UIPageControl! // 페이지 컨트롤용 아웃렛 변수
    
    // 뷰가 로드 되었을 때 호출됨
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //페이지 컨트롤의 전체 페이지를 images 배열의 전체 개수 값으로 설정
        pageControl.numberOfPages = images.count
        // 페이지 컨트롤의 현재 페이지를 0으로 설정
        pageControl.currentPage = 0
        // 페이지 표시 색상을 밝은 회색 설정
        pageControl.pageIndicatorTintColor = UIColor.lightGray
        // 현재 페이지 표시 색상을 검정색으로 설정
        pageControl.currentPageIndicatorTintColor = UIColor.black
        imgView.image = UIImage(named: images[0])
    }
 
    // 페이지가 변하면 호출됨
    @IBAction func pageChanged(_ sender: UIPageControl) {
        
        // images라는 배열에서 pageControl이 가르키는 현재 페이지에 해당하는 이미지를 imgView에 할당
        imgView.image = UIImage(named: images[pageControl.currentPage])
    }
    
}
 
 

 

 

 

시뮬레이터 결과 화면

 

ImageView의 Content Mode를 'Aspect Fit'으로 설정해서 전체 이미지와 원본 비율은 그대로 유지했지만,

이미지의 위아래 여백이 생겼다.

설정을 'Aspec Fill'으로 변경했다.

 

 

 

'Aspect Fill'로 설정하면 이미지 비율을 유지하면서 ImageView 크기에 맞게 보여줄 수 있다.

단, 비율은 유지되지만 전체 이미지가 나오지 않고 부분적으로 짤려 나올 수 있다.

 

 

 

ImageView ContentMode 'Aspect fit'

ImageView ContentMode 'Aspect fill'