이번 프로젝트를 진행하면서 CustomView를 굉장히 많이 다뤘었고, CustomView에서 텍스트 관련 작업을 맡았는데,

CustomView에서 DrawText에 대한 자료도 옛날 자료가 많고, 맨땅에 헤딩하듯이 개발하면서 겪은 경험입니다..

우리 팀 프로젝트처럼 디테일하게 Text에 대해서 다루지 않을 수도 있지만,, 많은 도움 되었으면 합니다ㅎ

DrawText란?

Canvasd에서 제공하는 함수입니다.

여러 오버로딩된 함수가 많지만 보편적으로 사용되는 함수는 아래와 같습니다.

public void drawText (String text,
                float x,
                float y,
                Paint paint)

함수의 내용은 그리고자 하는 text를 (x, y)를 시작점으로 해서 paint 객체를 이용해서 그리는 것입니다.

여기서 paint의 객체는 그릴 텍스트의 크기, 폰트, 컬러, 정렬기준과 같이 다양한 것을 설정할 수 있습니다.

val textPaint =
    TextPaint().apply {
        color = Color.RED
        isAntiAlias = true
        textAlign = Paint.Align.CENTER
        textSize = Dp(12f).toPx(context)
        typeface = ResourcesCompat.getFont(context, R.font.pretendard_bold)
    }

코드와 같이 텍스트가 그려질 x, y 좌표를 지정해 주고 drawText를 호출하면 텍스트가 그려질 것이라고 생각했습니다.

하지만.. 왜인지 뭔가 어색한 느낌이 들더라고요...

drawRectangle을 통해서 사각형을 그리고, 사각형의 중심좌표에 텍스트를 그렸습니다.

가만.. 보면 텍스트가 중앙보다 위로 가 있지 않나요?? 제가 눈이 안 좋아서 그런갑 보다 하고 있었는데

팀원들도 텍스트가 조금 위에 붕 떠있는 거 같아요!!라고 얘기해 주셨고, drawText에 대해서 잘못 이해하고 있었던 걸로 판단했다.

즉 지금 그려지는 상황은 아래와 같은 상황인 것이다..

나는 텍스트가 사각형 중앙에 그려지길 원했지만 y좌표를 중앙으로 주면 그림과 같이 중앙을 기준으로 텍스트가 붕 떠버리는 것이다.