[IOS] Do it (16) 탭과 터치 사용한 스캐치 앱 만들기

탭과 터치 사용한 스케치 앱 만들기

---

iOS에서는 사용자의 터치로 대부분의 동작을 수행합니다. 
화면을 터치하고, 드래그하고, 릴리즈하고, 더블 터치 하는 등의 행동으로 대부분의 앱이 컨트롤 되어집니다.
이번 앱에서는 iOS의 핵심이 되는 터치 & 탭 컨트롤을 알아보고, 이를 응용한 스케치 앱을 구현해 보도록 하겠습니다.

결과 화면

[ Tap / Touch 확인 App ]

[ 스케치 App ]

---

스토리 보드

---

ViewController.swift (Tap / Touch 확인 App)

//
//  ViewController.swift
//  TapTouch
//
//  Created by HwangSeungyeon on 2020/09/18.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var txtMessage: UILabel!
    @IBOutlet var txtTapCount: UILabel!
    @IBOutlet var txtTouchCount: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    //MARK: 터치 이벤트 메서드 구현 (재정의)
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { //터치 시작될 때 호출
        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트 가지고 옵니다.
        txtMessage.text = "Touches Began" //메서드에서 발생한 이벤트의 종류 출력
        txtTapCount.text = String(touch.tapCount) //touches 세트 안에 포함된 터치의 개수
        txtTouchCount.text = String(touches.count) //터치 객체들 중 첫번째 객체에서의 탭의 갯수
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { //터치된 손가락이 움직였을 떄 호출 됨
        let touch = touches.first! as UITouch

        txtMessage.text = "Touches Moved"
        txtTapCount.text = String(touch.tapCount)
        txtTouchCount.text = String(touches.count)
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { //화면에서 손가락을 떼었을 때 호출 됨
        let touch = touches.first! as UITouch

        txtMessage.text = "Touches Ended"
        txtTapCount.text = String(touch.tapCount)
        txtTouchCount.text = String(touches.count)
    }

}

 

ViewController.swift (스케치 App)

//
//  ViewController.swift
//  Sketch
//
//  Created by HwangSeungyeon on 2020/09/23.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var imgView: UIImageView!
    @IBOutlet var txtLineSize: UITextField!
    
    var lastPoint: CGPoint! //바로 전에 터치하거나 이동한 위치
    var lineSize: CGFloat = 2.0 //선의 두께
    var lineColor = UIColor.red.cgColor //선의 색상
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    //[Clear]버튼 동작 함수 만들기
    @IBAction func clearImageView(_ sender: UIButton) {
        imgView.image = nil //이미지 뷰의 이미지를 삭제함
    }
    
    //터치 이벤트 메서드 재정의
    // 사용자가 화면 터치하면 스케치를 시작하도록 구현
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트 가지고 온다
        
        lastPoint = touch.location(in: imgView) //터치된 위치를 lastPoint라는 변수에 저장
    }
    
    //사용자가 터치한 손가락을 움직이면 따라서 움직이도록 구현
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        //그림을 그리기 위한 콘텍스트 생성
        UIGraphicsBeginImageContext(imgView.frame.size)
        //선 색상 결정
        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)
        //선 끝모양을 라운드로 설정
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        //선 두께 결정
        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize)
        
        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트 가지고 온다
        let currPoint = touch.location(in: imgView) //터치된 위치를 currPoint로 가지고 옵니다
        
        //현재 이미지 뷰(ImageView)에 있는 이미지를 이미지 뷰(ImgView)의 크기로 그립니다
        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))
        
        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //이전 이동 위치인 lastPoint로 시작위치를 이동 시킴
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currPoint.x, y: currPoint.y)) //lastPoint에서 현재 위치인 currPoint까지 선을 추가
        UIGraphicsGetCurrentContext()?.strokePath()
        
        //현재 콘텍스트에 그려진 이미지를 가지고 와서 이미지 뷰에 할당
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        //그림 그리기 종료
        UIGraphicsEndImageContext()
        
        lastPoint = currPoint //현재 터치된 위치를 lastPoint에 할당
    }
    
    //손가락을 떼었을 때, 스케치가 끝나도록 메서드 구현
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize)
        
        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))
        
        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //위의 코드와 이 부분이 다름을 주의
        UIGraphicsGetCurrentContext()?.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    
    //사용자가 iOS기기를 흔들었을때 이미지 뷰 위에 그렸던 스케치가 지워지도록 메서드 구현
    override func motionEnded(_ motion: UIEvent.EventSubtype, with event: UIEvent?) {
        if motion == .motionShake { //Shake이라는 모션 이벤트가 발생할 경우
            imgView.image = nil //이미지 뷰의 이미지를 nil로 대체하여 이미지를 삭제
        }
    }
    @IBAction func txtEditChanged(_ sender: UITextField) {
        if txtLineSize.text != "" {
            lineSize = CGFloat(Int(txtLineSize.text!)!)
        }
    }
    
    @IBAction func txtDidEndOnExit(_ sender: UITextField) {
        lineSize = CGFloat(Int(txtLineSize.text!)!)
    }
    
    @IBAction func txtTouchDown(_ sender: UITextField) {
        txtLineSize.selectAll(UITextField.self)
    }
    
    @IBAction func btnChangeLineColorBlack(_ sender: UIButton) {
        lineColor = UIColor.black.cgColor
    }
    @IBAction func btnChangeLineColorRed(_ sender: UIButton) {
        lineColor = UIColor.red.cgColor
    }
    @IBAction func btnChangeLineColorGreen(_ sender: UIButton) {
        lineColor = UIColor.green.cgColor
    }
    @IBAction func btnChangeLineColorBlue(_ sender: UIButton) {
        lineColor = UIColor.blue.cgColor
    }
    
}

전체 코드

TapTouch.zip

0.04MB

Sketch.zip

0.04MB

---

출처 : Do it 스위프트로 앱 만들기