Swift Tooltip 구현하는 방법

Modern Collection View 와 MVVM 패턴 가이드

[iOS] Modern Collection View & MVVM 패턴 가이드 - 인프런 | 강의

이런거를 구현해야했다.

텍스트, 둥근 오렌지색 배경은 문제 없이 구현 가능하나

문제는 밑에 달린 뾰족한 부분(Tip) 을 직접 그려내야 한다는것이다.

 

그리는 방법은 우선 4개의 점을 지정해줘서

점을 이은 4각형의 (정확히는 마름모) 레이어를 만들어

배경색을 넣어주고 해당 View 레이어에 넣어줘야 한다.

 

4개의 지점을 지정하는 방법은

마름모의 꼭지점 CGPoint 를 지정해주는데

Start 할 위치 - 가장 왼쪽 ( 위 그림에서 ”인” 아래)

2번째 위치 - 가장 위쪽

3번쨰 - 가장 오른쪽 (2 아래)

4번쨰 가장 밑쪽 (Tip 끝부분)

private func drawTip(tipStartX: CGFloat, tipStartY: CGFloat,
                             tipWidth: CGFloat, tipHeight: CGFloat) {
            let path = CGMutablePath()

            let tipWidthCenter = tipWidth / 2.0
            let tipHeightCenter = tipHeight / 2.0

            path.move(to: CGPoint(x: tipStartX, y: tipStartY))
            path.addLine(to: CGPoint(x: tipStartX + tipWidthCenter, y: tipStartY + tipHeightCenter))
            path.addLine(to: CGPoint(x: tipStartX + tipWidth, y: tipStartY))
            path.addLine(to: CGPoint(x: tipStartX + tipWidthCenter, y: tipStartY - tipHeightCenter))

            let shape = CAShapeLayer()
            shape.path = path
            shape.fillColor = UIColor.orange500.cgColor
            layer.insertSublayer(shape, at: 0)
        }

tipStartX ,tipStartY 에 Start할 위치 를 지정하려면

전체 툴팁 View에서 Start할 포인트 ( "인" 아래에 지점 ) 을 지정해주고 거기서부터

move() addLine()을 통해 순차적으로 넣어준다.

또 원하는 크기의 tipWidth, tipHeight 를 넣어주면 된다.

 

예를 들어 2번째 포인트는 가로축 가운데 + 세로축 가장 위를 의미한다.

가로축 = start.x 에 Tip의 너비 반만큼 크기를 더해줬다.

세로축 = start.y + tip 높이 반만큼 더해줬다.

그래야 가로축 가운데의 세로축 가장 위쪽이 잡힌다.

 

나머지 포인트도 그렇게 그려주면 된다.