[iOS/swift] 핀치 제스처(Pinch Gesture) 앱 만들기 - 텍스트, 이미지 확대 축소하기

Xcode(버전11.3)를 이용하여 핀치 제스처(Pinch Gesture) 앱을 만든다:D

핀치 제스처를 이용하여 텍스트 확대 축소 기능을 구현해본다.

그 다음 이미지 확대 축소 기능을 구현한다.

 

 

 

1) 텍스트 확대 축소

- 스토리 보드 화면 구성

Label을 추가한 후 위와 같이 크기를 키운다.

'Pinch' 수정하고 가운데 정렬한다.

 

 

 

1) 텍스트 확대 축소

- 아웃렛 변수 추가

Label -> 'txtPinch'

 

 

 

전체 소스 보기 - 텍스트 확대 축소

//
//  ViewController.swift
//  day200107_PinchGesture
//
//  Created by 무니 on 2020/01/07.
//  Copyright © 2020 com.mooni. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var txtPinch: UILabel!
    
    var initialFontSize: CGFloat! // 글자 크기를 저장하기 위한 변수
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // UIPinchGestureRecognizer 클래스 상수 pinch 선언
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(ViewController.doPinch(_:)))
        self.view.addGestureRecognizer(pinch) // 핀치 제스처 등록
    }
    
    @objc func doPinch(_ pinch: UIPinchGestureRecognizer) {
        // 핀치 제스처 상태 확인
        if (pinch.state == UIPinchGestureRecognizer.State.began) {
            // 시작 상태이면 현재 글자 크기를 저장
            initialFontSize = txtPinch.font.pointSize
        } else {
            // 시작 상태가 아니면 텍스트의 글자 크기를 변경
            txtPinch.font = txtPinch.font.withSize(initialFontSize * pinch.scale)
        }
    }


}

 

 

 

 

시뮬레이터 결과 화면 - 텍스트 확대 축소

[iOS/swift] 핀치 제스처(Pinch Gesture) 앱 만들기 - 텍스트 확대 축소하기

 

 

 

2) 이미지 확대 축소

확대 축소에 사용할 이미지를 추가한다.

 

 

 

2) 이미지 확대 축소

- 스토리 보드 화면 구성

앞에 추가했던 Label은 삭제한다.

ImageView를 추가하고, 위와 같이 크기를 조절한다.

Attribute inspector -> Image View -> Image에 프로젝트에 추가한 이미지를 선택한다.

 

 

 

2) 이미지 확대 축소

- 아웃렛 변수 추가

ImageView -> 'imgPinch'

텍스트 확대 축소를 만들 때 추가했던 Label은 삭제했기 때문에 오류가 나는데,

소스 코드는 수정할 것이기 때문에 신경쓰지 않아도 된다.

 

 

 

전체 소스 보기 - 이미지 확대 축소

//
//  ViewController.swift
//  day200107_PinchGesture
//
//  Created by 무니 on 2020/01/07.
//  Copyright © 2020 com.mooni. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgPinch: UIImageView!
    
    var initialFontSize: CGFloat! // 글자 크기를 저장하기 위한 변수
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // UIPinchGestureRecognizer 클래스 상수 pinch 선언
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(ViewController.doPinch(_:)))
        self.view.addGestureRecognizer(pinch) // 핀치 제스처 등록
    }
    
    @objc func doPinch(_ pinch: UIPinchGestureRecognizer) {
        // 이미지를 스케일에 맞게 변환
        imgPinch.transform = imgPinch.transform.scaledBy(x: pinch.scale, y: pinch.scale)
        // 다음 변환을 위해 핀치의 스케일 속성을 1로 설정
        pinch.scale = 1
    }


}

 

 

 

시뮬레이터 결과 화면 - 이미지 확대 축소

[iOS/swift] 핀치 제스처(Pinch Gesture) 앱 만들기 - 이미지 확대 축소하기

참고로 이미지는 다른 것으로 교체했다:)