[Kotlin] View

View는 Android에서 화면에 무엇인가를 표시하기 위한 최상위 클래스에 해당하며 화면상에 표시되는 거의 모든 요소가 View로부터 상속받아 구현됩니다.

 

화면을 보면 TextView위젯이 하나 올라가 있는데 이 화면의 XML구성을 살펴보면 다음과 같이 XML이 작성되어 있는 걸 볼 수 있습니다.

 

Android가 TextView를 실제 화면에 표시할때는 XML을 읽어 이것을 클래스로 변환해 화면에 그려주게 됩니다. XML상으로는 layout_width나 text처럼 여러가지 속성들이 존재하는데 이러한 속성들도 클래스로 만들어질 때 생성자의 매개변수로 전달되고 최종적으로 View 클래스로부터 상속된 TextView클래스가 만들어지는 것입니다.

 

TextView를 보면 text속성에 'Hello World!'라고 표시되어 있는데 이것도 View클래스에 존재하는 onDraw() 메서드를 통해서 화면에 그려지는 것으로 View클래스가 화면과 관련된 기본적인 처리를 모두 전담하고 있는 셈입니다.

 

Android Studio에서 기본적으로 제공하고 있는 표준적인 위젯 뿐만 아니라 내가 직접 만드는 클래스도 View를 상속받으면 화면에 무엇인가를 표시하는 것이 가능합니다. 이를 확인해 보기 위해 아래와 같이 View를 상속받는 클래스를 하나 생성합니다.

class myView(text: String, context: Context) : View(context) {
    val drawValue: String
    init {
        this.drawValue = text
    }
}

지금 만들어볼 클래스는 TextView처럼 특정 문자열을 화면에 그려주는 클래스입니다. 상기 코드에서 Context를 생성자에게 받도록 되어 있는데 View가 생성자부터 Context를 전달받도록 되어 있기 때문입니다. 여기에 화면에 어떤 내용을 표시할지를 전달해 주는 매개변수(text)를 하나 더 만들어 두고 특정 변수를 만들어 생성자로부터 전달받은 값으로 초기화하도록 합니다.

 

화면에 무엇인가를 표시하는데 사용되는 가장 핵심적인 메서드는 onDraw메서드입니다. 따라서 아래와 같이 onDraw를 오버라이드 하는 메서드를 생성합니다.

class myView(text: String, context: Context) : View(context) {
    val drawValue: String
    init {
        this.drawValue = text
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }
}

onDraw에서 사용되는 Canvas를 통해 화면으로 출력하는 동작이 이루어지게 됩니다. 이름에서도 알 수 있듯이 그림을 그리기 위한 도화지를 마련하는 것입니다. 도화지에 무엇인가를 그리기 위해서는 붓이 필요할 테니 다음과 같이 하나의 Paint를 생성합니다.

class myView(text: String, context: Context) : View(context) {
    val drawValue: String
    init {
        this.drawValue = text
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        
        val paint = Paint()
        paint.color = Color.RED
        paint.textSize = 50f
    }
}

Paint의 색상은 RED로, 크기는 50f정도로 잡았습니다. 이 페인트를 통해 생성자에서 잔달받은 text를 표시하도록 아래와 같이 canvas의 drawText 메서드를 호출합니다.

class myView(text: String, context: Context) : View(context) {
    val drawValue: String
    init {
        this.drawValue = text
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        val paint = Paint()
        paint.color = Color.RED
        paint.textSize = 50f
        
        canvas?.drawText(drawValue, 0f, 50f, paint)
    }
}

 

drawText의 첫번째 매개변수는 표시할 내용을 두 번째는 화면상의 x좌표, 세 번째는 화면상의 y좌표를 의미합니다. 여기에서 y좌표에 50f를 주는 이유는 위에서 paint를 통해 글자의 크기를 50f로 잡았기 때문입니다. y를 0f로 하게 되면 글자 자체가 y축 0 지점으로 모두 올라가 버리기 때문에 글자크기 이상으로 위치를 잡아줘야 합니다.

 

이제 MainActivity에서 기본으로 올라가 있는 ConstraintLayout의 ID를 myLayout등으로 지정해 줍니다. 상기 만들어둔 myView를 해당 Layout을 통해 추가하는 방법으로 myView를 표시하려고 합니다.

 

마지막으로 위에서 생성한 myView를 클래스의 객체를 생성해 Layout의 addView메서드로 넘겨줍니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myview = myView("안녕하세요", this)
        myLayout.addView(myview)
    }
}

이제 앱을 실행하면 다음과 같은 화면을 볼 수 있게 됩니다.

 

물론 글자뿐만 아니라 간단한 도형같은것도 그릴 수 있습니다. drawText대신 그리고자 하는 도형의 메서드를 호출하기만 하면 됩니다. 예를 들어 원은 drawCircle()을 사각형은 drawRect()를 사용하면 됩니다.

 

drawCircle()는 원의 x축 중심, 원의 y축 중심, 반지름, 페인트 순서로 매개변수를 전달하며

 

drawRect는 사각형을 이루는 left, top, right, bottom좌표와 함께 페인트를 매개변수로 전달하면 됩니다.