[Do it!] 핀치 제스처 앱

CoCoral·2023년 10월 31일
0

Do it!

목록 보기
25/25
post-thumbnail

Do it! 스위프트로 아이폰 앱 만들기
19장 핀치 제스처 사용해 사진 확대/축소하기

📱 실행 화면 📱


💻 Step 1. 텍스트 핀치 앱 기본 환경 구성하기

  • 빈 스토리보드 중앙에 Label 배치하기
    • [Attributes inspector] -> [Alignment] = center 로 설정하기
    • [Add New Constraints] 에서 위:0, 왼쪽:16, 오른쪽:16, 아래:0 으로 설정하기
  • 아웃렛 변수 추가하기

💻 Step 2. 텍스트 핀치 앱 구현하기

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.
        
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(ViewController.doPinch(_:)))
        self.view.addGestureRecognizer(pinch)
    }

    @objc func doPinch(_ pinch: UIPinchGestureRecognizer) {
        if pinch.state == UIGestureRecognizer.State.began {
            initialFontSize = txtPinch.font.pointSize
        }
        else {
            txtPinch.font = txtPinch.font.withSize(initialFontSize * pinch.scale)
        }
    }

}
  • 핀치 제스처 등록하기
  • 액션 메소드 구현하기
    • 제스처가 시작될 때 현재 텍스트 크기 저장하기
    • 제스처가 진행되고 있을 때 텍스트 크기 바꾸기

💻 Step 3. 이미지 핀치 앱 기본 환경 구성하기

  • 앞 서 배치한 Label 삭제하기
  • Image View 배치하기
    • [Add New Constraints] 에서 위:0, 왼쪽:16, 오른쪽:16, 아래:0 으로 설정하기
    • 이미지 할당하기
  • 레이블에 대한 아웃렛 변수 삭제하기
  • 이미지 뷰에 대한 아웃렛 변수 추가하기

💻 Step 4. 이미지 핀치 앱 구현하기

import UIKit

class ViewController: UIViewController {
    @IBOutlet var imgPinch: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        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)
        pinch.scale = 1
    }

}
  • 핀치 제스처의 액션 메소드 코드 변경하기
  • 제스처에 따라 이미지 크기 바꾸기

💻 도전! Mission 갤러리 앱에 핀치 기능 추가하기

import UIKit

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

class ViewController: UIViewController {
    @IBOutlet var imgView: UIImageView!
    @IBOutlet var pageControl: UIPageControl!
    
    var initialScale: CGAffineTransform!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        pageControl.numberOfPages = images.count
        pageControl.currentPage = 0
        pageControl.pageIndicatorTintColor = UIColor.lightGray
        pageControl.currentPageIndicatorTintColor = UIColor.darkGray
        imgView.image = UIImage(named: images[0])
        
        initialScale = imgView.transform
        
        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGesture(_:)))
        swipeLeft.direction = UISwipeGestureRecognizer.Direction.left
        self.view.addGestureRecognizer(swipeLeft)
        
        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGesture(_:)))
        swipeRight.direction = UISwipeGestureRecognizer.Direction.right
        self.view.addGestureRecognizer(swipeRight)
        
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(ViewController.doPinch(_:)))
        self.view.addGestureRecognizer(pinch)
    }
    
    @IBAction func pageChange(_ sender: UIPageControl) {
        imgView.transform = initialScale
        imgView.image = UIImage(named: images[pageControl.currentPage])
    }
    @objc func respondToSwipeGesture(_ gesture: UIGestureRecognizer) {
        if let swipeGesture = gesture as? UISwipeGestureRecognizer {
            switch swipeGesture.direction {
            case UISwipeGestureRecognizer.Direction.left:
                pageControl.currentPage += 1
                pageChange(pageControl)
            case UISwipeGestureRecognizer.Direction.right:
                pageControl.currentPage -= 1
                pageChange(pageControl)
            default:
                break
            }
        }
    }
    @objc func doPinch(_ pinch: UIPinchGestureRecognizer) {
        imgView.transform = imgView.transform.scaledBy(x: pinch.scale, y: pinch.scale)
        pinch.scale = 1
    }
    
}
profile
언젠간 iOS 개발자가 되겠지

0개의 댓글