[iOS] Instructions (오픈소스) - 튜토리얼 가이드 추가 (coach marks)

진행중인 프로젝트에 튜토리얼을 넣어보고 싶어 어떻게 넣을까 찾던 도중 좋은 '개발하는 정대리'님 유튜브에서 오픈소스를 소개시켜 주신 영상을 보고 작성한 글입니다.

 

오픈소스 깃허브 링크

https://github.com/ephread/Instructions#cocoapods

GitHub - ephread/Instructions: Create walkthroughs and guided tours (coach marks) in a simple way, with Swift.

Add customizable coach marks into your iOS project. Available for both iPhone and iPad.

 

다운로드 방법은 리드미에 적혀있습니다.

저는 코코아팟으로 다운받았는데, Swift Package Manager가 더 편리해용

 

Pod file 에 추가해줍니다. 저는 iOS 14.5 버전에서 사용하였습니다.

pod 'Instructions', '~> 2.1.0'

 

 

 

1.  CoachMarksController() 선언하기

let coachMarksController = CoachMarksController()

 

 

2. CoachMarksControllerDataSource, CoachMarksControllerAnimationDelegate 상속받기

// MARK: CoachMarksControllerDataSource
extension FirstViewController: CoachMarksControllerDataSource {
    
}

// MARK: CoachMarksControllerAnimationDelegate
extension FirstViewController: CoachMarksControllerAnimationDelegate {
    
}

저는 overlay(튜토리얼 시 화면을 덮는 view)를 커스터마이즈 하지 않을 것이라 CoachMarksControllerDelegate는 상속받지 않았는데 이는 유튜브를 보시면 상세하게 알 수 있습니다.

 

 

3.  ViewDidLoad() 에서 dataSource와 animationDegate를 self로 설정하기

self.coachMarksController.dataSource = self
self.coachMarksController.animationDelegate = self

 

 

4. CoachMarksControllerDataSource

CoachMarksControllerDataSource 에서 보여줄 view를 설정합니다.

프로토콜 함수? 3개를 추가합니다. 설명은 코드 안에 적어놓았습니다.

 

coachViews 는 만들어질 튜토리얼 설명박스 입니다. index를 받아서 각 튜토리얼 마다 여러 설정을 해줄 수 있습니다.

// MARK: CoachMarksControllerDataSource
extension FirstViewController: CoachMarksControllerDataSource {
    
    // 가이드 마커에 대한 설정
    func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkViewsAt index: Int, madeFrom coachMark: CoachMark) -> (bodyView: (UIView & CoachMarkBodyView), arrowView: (UIView & CoachMarkArrowView)?) {
        
        let coachViews = coachMarksController.helper.makeDefaultCoachViews(withArrow: true, arrowOrientation: coachMark.arrowOrientation)
        
        switch index {
        case 0:
            coachViews.bodyView.hintLabel.text = "여러 게임으로 국악을 익혀요!"
            coachViews.bodyView.nextLabel.text = "click!"
            coachViews.bodyView.background.innerColor = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1)
            coachViews.arrowView?.background.innerColor = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1)
            // coachViews.bodyView.background.borderColor = .black
            coachViews.bodyView.hintLabel.textColor = .white
            coachViews.bodyView.nextLabel.textColor = .white
        default:
            coachViews.bodyView.hintLabel.text = "default"
        }
        
        return (bodyView: coachViews.bodyView, arrowView: coachViews.arrowView)
    }
    
    // 가르키고자 하는 뷰를 지정
    func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkAt index: Int) -> CoachMark {
        
        switch index {
        case 0:
            return coachMarksController.helper.makeCoachMark(for: gameTableView)
        default:
            return coachMarksController.helper.makeCoachMark(for: gameTableView)
        }
    }
    
    // 몇 개의 뷰에 대해 가이드를 제공
    func numberOfCoachMarks(for coachMarksController: CoachMarksController) -> Int {
        return 1
    }
    
}

 

 

5.  CoachMarksControllerAnimationDelegate

마커가 나타날때 사라질때 떠있을때 등 여러 애니메이션 효과를 줄 수 있는 Delegate 입니다.

유튜브와 코드를 똑같이 사용했기 때문에 적어놓지는 않겠습니다.

ex) 마커가 위아래로 움직이는 효과를 줄 수 있습니다.

 

 

6.  화면에 보이기

viewDidApprear 과 viewWillDisappear 에 코드를 작성해줍니다.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    self.coachMarksController.start(in: .window(over: self))
}
    
override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    self.coachMarksController.stop(immediately: true)
}

 

 

7. 실행

저는 테이블을 가르키도록 설정했는데 이걸 위로 고정시키는 방법을..ㅎㅎ 밤이 늦어서 찾지 못..(변명)

그리고 탭바를 가르키도록은 도저히 못찾겠더라구요ㅜ 탭바컨트롤러에서 해볼까 했지만 탭바 아이템 프로퍼티를 찾을 수가 없어서

이 오픈소스는 보류ㅠㅠ 하기로 했습니다.. 탭바는 정말 직접 만들어서 사용해야할 것 같아요

 

 

 

참고영상: 개발하는 정대리님 유튜브

https://www.youtube.com/watch?v=82mRG3SAMns