iOS Swift 라이브러리 CCGestureLock 사용하기

안녕하세요 Gons 입니다.

아이폰에 패턴 잠금 기능이 없죠.

그래서 오늘은 화면 잠금 기능을 해보겠습니다.

CCGestureLock 이라는 라이브러리입니다.

손쉽게 Pattern Lock 을 만들 수 있습니다.

 

 

미리보기입니다. 이렇게 생겼습니다.

CCGestureLock

Screen Gesture Lock 을 하고 싶다면

따라 오시죠. Let's Go~

 

 

 

 

 

 

 

https://github.com/hsuanchih/CCGestureLock-Swift

↑↑ 오늘 사용할 라이브러리 주소입니다.

 

 

 

 

 

 

 

라이브러리를 설치해주세요.

pod "CCGestureLock"

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

 

라이브러리를 추가 해주세요.

import CCGestureLock

※ 여기서 import 에 CCGestureLock 이 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

 

스토리보드에서 View 하나를 추가해주세요.

CCGestureLock

Custom Class 에 CCGestureLock 을 입력하고 엔터를 쳐주세요.

ViewController 에 CCGestureLock 를 제대로 import 했다면

Module 부분에는 자동으로 들어갑니다.

 

 

 

 

 

아울렛 변수로 등록 해주시고요.

@IBOutlet var gestureLock: CCGestureLock!

 

 

 

 

 

패턴에 제스쳐 했을 때 이벤트처리할 매서드 하나 만들겠습니다.

// 패턴 제스쳐 했을 때 이벤트
    @objc func gestureComplete(gestureLock: CCGestureLock) {
        let lockSequence = gestureLock.lockSequence
        
        var dataString = ""
        for seq in lockSequence{
            dataString.append("\(seq)")
        }
        print("패턴 번호: \(dataString)")
        
        if dataString == "0125" {
            // 패턴 일치
            // 화면 이동 등 자유롭게 작성. (지금은 패턴 리셋만 해놓음)
            gestureLock.gestureLockState = .normal
        } else {
            // 패턴 불일치
            // 에러로 빨간색 표시하고 일정시간 뒤에 리셋
            gestureLock.gestureLockState = .error
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.5 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC), execute: {
                gestureLock.gestureLockState = .normal
            })
        }
    }

연습으로 패턴 번호가 0125 면 일치 , 아니면 불일치로 설정해놨습니다.

 

 

 

 

 

 

 

자 이제 패턴에 칸 갯수, 색깔 등 설정을 조금 변경하는 코드를 적겠습니다.

※ 길다고 당황하지마세요. 천천히 읽어보면 아무것도 아닙니다.

func setupGestureLock() {
        
        // 가로, 세로 몇칸으로 만들지 (지금은 3x3 )
        // Set number of sensors
        gestureLock.lockSize = (numHorizontalSensors: 3, numVerticalSensors: 3)
        
        // 가장자리 간격 (숫자 늘리면 원들이 더 모여짐)
        // Sensor grid customisations
        gestureLock.edgeInsets = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)
        
        
        // 선택 안되어 있을 때 기본 안쪽 작은 원 색깔
        // Sensor point customisation (normal)
        gestureLock.setSensorAppearance(
            type: .inner,
            radius: 5,
            width: 1,
            color: .lightGray,
            forState: .normal
        )
        
        // 색 바꿔봐도 변하지 않음 .clear 디폴트
        gestureLock.setSensorAppearance(
            type: .outer,
            color: .clear,
            forState: .normal
        )
        
        // 그냥 선택할 때 안쪽 작은 원 색깔
        // Sensor point customisation (selected)
        gestureLock.setSensorAppearance(
            type: .inner,
            radius: 3,
            width: 5,
            color: .green,
            forState: .selected
        )
        
        // 그냥 선택 할 때 바깥쪽 큰 원 색깔
        gestureLock.setSensorAppearance(
            type: .outer,
            radius: 30,
            width: 5,
            color: .green,
            forState: .selected
        )
        
        // 에러 일 때 바뀌는 안쪽 작은 원 색깔
        // Sensor point customisation (wrong password)
        gestureLock.setSensorAppearance(
            type: .inner,
            radius: 3,
            width: 5,
            color: .red,
            forState: .error
        )
        
        // 에러 일 때 바뀌는 바깥쪽 큰 원 색깔
        gestureLock.setSensorAppearance(
            type: .outer,
            radius: 30,
            width: 5,
            color: .red,
            forState: .error
        )
        
        
        // 이어지는 선 색깔
        // Line connecting sensor points (normal/selected)
        [CCGestureLock.GestureLockState.normal, CCGestureLock.GestureLockState.selected].forEach { (state) in
             gestureLock.setLineAppearance(
                 width: 5.5,
                 color: UIColor.green.withAlphaComponent(0.5),
                 forState: state
             )
        }
         
        // 패턴 실패했을 때 바뀌는 선 색깔
        // Line connection sensor points (wrong password)
        gestureLock.setLineAppearance(
            width: 5.5,
            color: UIColor.red.withAlphaComponent(0.5),
            forState: .error
        )
        
        // 제스쳐 타겟 등록
        gestureLock.addTarget(
            self,
            action: #selector(gestureComplete),
            for: .gestureComplete
        )
}

제가 하나하나 바꿔보면서 친절히 주석을 달아놓았습니다.

원하시는 색으로 하나씩 변경해보시면 금방 알 수 있겠고요.

 

 

 

 

 

 

 

 

방금 만든 함수를 실행해주면 끝입니다.

    override func viewDidLoad() {
        super.viewDidLoad()

        setupGestureLock()
    }

 

 

 

 

 

 

바로 한번 실행해보겠습니다.

CCGestureLock

패턴 번호가 0125 면 일치,

그 외의 숫자면 불일치.

 

잘 실행되네요.

 

오늘은 짧고 굵게 작성해봤습니다.

아까 패턴 설정하는 setupGestureLock 함수가 길다고 겁먹지마세요.

반 이상이 색 바꾸는 코드입니다.

 

 

 

자~ 그럼 저는 또 다음에 여러분에게 도움이 될 만한 내용을 가지고 찾아뵙도록하겠습니다.

코로나19 조심하시고요.

항상 감사드립니다.