[Swift iOS] Add instructions guide to iOS app

튜토리얼처럼 사용 방법 도움말을 제공해주는 기능을 Coach Mark라고 하는데 이러한 Coach Mark 오픈소스 중에서 Instructions에 대해 알아보았다. 

https://cocoapods.org/pods/Instructions

Instructions

 

 

install pod 'Instructions' 

import UIKit

import Instructions

class ViewController: UIViewController, CoachMarksControllerDataSource, CoachMarksControllerDelegate {
    let coachMarksController = CoachMarksController()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.coachMarksController.dataSource = self
        self.coachMarksController.delegate = self
    }
}

Data Source

CoachMarksControllerDataSource 에서 선언해주어야할 세가지 필수 메서드

1. 코치마크 갯수 설정 (number of coach marks to display)

func numberOfCoachMarks(for coachMarksController: CoachMarksController) -> Int {
    return 4
}

2. 메타데이터 metadata

customize how a coach mark will position and appear. 코치 마크의 위치와 표시 방식을 지정

func coachMarksController(_ coachMarksController: CoachMarksController,
                          coachMarkAt index: Int) -> CoachMark {
    return coachMarksController.helper.makeCoachMark(for: "coachMark를 달아줄 타겟 UIView()")
}

3. 코치마크의 뷰 설정

coachMark의 bodyView와 arrowView의 설정을 담당하는 메서드로, bodyView는 필수이고 arrowView는 옵션으로 선택 가능하다. 

Instructions Gitgub 에 들어가면 최신 버전(ver.2.1.0) 사용법이 잘 나와있지만, 나는 진행중인 프로젝트에서 사용되는 구버전(ver.1.3.1)에서는 다음과 같이 구현할 수 있다. 

func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkViewsAt index: Int, madeFrom coachMark: CoachMark) -> (bodyView: CoachMarkBodyView, arrowView: CoachMarkArrowView?) {
    return coachMarksController.helper.makeDefaultCoachViews(withArrow: false, hintText: "안녕하세요! 저는 코치 마크입니다!")
}

 

+ 코치마크 가로버전 설정

베트남에서 블랙박스 앱에서 코치마크 가로버전이 도저히 안된다고 하여 내가 넘겨 받았다.

coachMarksController().interfaceOrientations = .userDefined(as: .all)

원래는 위와 같이 설정을 해주면 자동적으로 가로 세로 화면을 다 지원해주는 게 맞는 것 같은데, .all을 .landscapeRight 으로 바꿔도 보고 별 짓을 다 해봤지만 가로화면에서 가로 도움말 지원이 안되는 것이었다!!! Instructions 예제 파일 받아봐도 잘만 작동하는데 도대체 뭐가 문제인지... 프로젝트가 워낙 방대해서 도대체 뭐가 잘못된건지 파악이 힘들어 그냥 포기하고 짱구를 굴려보다 그냥 편법으로 코치마크를 90도 회전해주기로 했다.. ㅋㅋㅋㅋㅋㅋㅋㅋ 

그런데 코치마크는 뷰가 아니라 CoachMarksController()로 쓰이기 때문에 이걸 바로 회전해줄 수는 없다! 

방법을 찾다가 bodyView를 돌려보자 싶어 회전을 해보니 오호! 가로로 잘 표시가 되더라. 

그리하여 coachMarksController 메서드에서 다음과 같이 bodyView에 위치 이동과 회전을 주어 화면을 구현했다.

func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkViewsAt index: Int, madeFrom coachMark: CoachMark) -> (bodyView: CoachMarkBodyView, arrowView: CoachMarkArrowView?) {
    let rotateBody = CGAffineTransform(rotationAngle: CGFloat(Double.pi/2))
    let moveBody = CGAffineTransform(translationX: -100, y: 20)
    let coachViews = coachMarksController.helper.makeDefaultCoachViews(withArrow: false, hintText: "코치마크")
    coachViews.bodyView.transform = moveBody.concatenating(rotateBody)
    return coachViews
}

헤헤 편법이지만 작동은 잘 된다. 문제 없으니 뭐.. 되기만 하면되겠지..? ㅋㅋㅋㅋ 

 

 

https://github.com/ephread/Instructions

https://medium.com/macoclock/adding-a-guided-tour-to-your-ios-app-995f5618bf68