[3팀] 14-7 화면 구성하기: 커스텀 뷰 이용하기

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 박진영

개발환경은 Windows, Android Studio입니다. 

 

 

1. 커스텀 뷰 이용하기

모든 위젯의 기본이 되는 뷰를 직접 그리는 방법이 바로 커스텀 뷰이다.

우리는 xml에서 태그 형태로 보이지만, 안으로 들어가보면 태그를 클래스로 가지고 있게 된다.

모든 위젯은 View라는 클래스를 상속받는데, View라는 클래스에서는 onDraw라는 함수가 호출되고, 여기에서 위젯을 그려준다.

CustomView 클래스를 먼저 생성해준다. 이 클래스는 View 클래스를 상속받게 되는데, View 클래스의 생성자의 인자로 context를 넣어준다. 후에 선언 후 사용할 때 onCreate에서 this를 넘겨주면 된다.

두 번째로 onDraw 함수를 override 한다. 위에서 언급했던 onDraw함수가 화면에 그림을 그리는 메소드이므로, 여기 안에 무엇을 그릴 것이며 어떻게 그릴 것인지 넣어준다.

class CustomView(context:Context) : View(context){
    override fun onDraw(canvas: Canvas?) { // onDraw함수 override
        super.onDraw(canvas) 
        val paint = Paint()
        paint.color = Color.BLACK
        paint.textSize = 100f // float형으로 지정해준다.

        canvas?.drawText("안녕하세요.", 100f, 100f, paint) // 입력 텍스트, x좌표, y좌표, 설정

        /* or
        canvas?.run{
            drawText("안녕하세요.", 0f, 0f, paint)
        }
         */

    }
}

onDraw함수를 보면 canvas라는 것이 있는데, 이것은 custom 뷰를 메인 엑티비티에 삽입할 때 그릴 수 있는 영역을 의미한다. 그리고 Paint 클래스를 정의하여 그릴 대상의 색상, 크기 등을 지정하고, canvas에 draw시켜준다.

 

activity_main.xml에서 frameLayout을 하나 추가해서, 여기에 미리 만들어놓은 custom View를 add View하려고 한다.

MainActivity.kt에서 미리 정의한 CustomView를 정의, binding의 frameLayout에 addView로 추가해준다.

val customView = CustomView(this)
binding.frameLayout.addView(customView)

결과화면

다음으로 원을 그려보려고 한다. 함수 drawCircle을 커스텀뷰 클래스 내부에 정의하고, paint에서 도형을 그리기 위해서 PaintStyle을 사용했다. 세 가지 옵션이 있는데 차례로 채우기, 윤곽선 + 채우기, 윤곽선 순이다.

 

 

drawCircle 함수

fun customDrawCircle(canvas: Canvas) {
        val paint = Paint()
        paint.style = Paint.Style.FILL
        paint.color = Color.BLUE

        canvas.drawCircle(150f, 300f, 100f, paint) // x좌표, y좌표, radius, paint
    }

원을 그린 결과화면

비슷한 예제로 customDrawRect를 생성해보았다. Rect의 경우, Rect라는 클래스를 import하여 사용하였다.

fun customDrawRect(canvas: Canvas) {
        val paint = Paint()
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 20f
        paint.color = Color.GREEN

        val rect = Rect(50, 450, 250, 650) // left, top, right, bottom width
}

val rect = Rect(50, 450, 250, 650)
// float 단위로 설정을 원하면 아래와 같이 사용
val rect = RectF(50f, 450f, 250f, 650f)

사각형을 그린 결과화면