[안드로이드 코틀린] View 출력 원리와 커스텀뷰 생성/사용 방법 기초

# 안드로이드 View 출력 원리

안드로이드 시스템은
XML에 정의된 View 태그와 속성을 기반으로 생성된
View 객체와 AttributeSet 객체를 이용해 화면에 View 를 그려준다.

 

좀더 풀어 쓰면,

레이아웃 XML에 정의된 모든 View 들은

화면에 출력 될 시점에 안드로이드에 의해 View 객체로 변환되어 메모리에 올라가며,
이 때, 각 뷰의 내부 속성(색상, 크기 등)은 AttributeSet 객체로 변환되어 View 클래스 생성자의 매개변수로 전달 된다.

이렇게 생성된 View객체를 안드로이드가 해석하여 화면에 그려준다.

참고로 XML 에 정의된 View 를 객체로 생성해 메모리에 올리는 과정을 Inflate 라고 한다.
(경우에 따라 코드상에서 개발자가 직접 이 작업을 수행하기도 한다.)

---

# 커스텀뷰 생성 및 사용 방법

- View를 상속받는 클래스를 만들어주고, onDraw() 메서드 내부에서 원하는 그림을 그리는 코드를 작성하여 오버라이드 해주면 된다.

- 아래 같은 초록색 원을 만드는 코드를 작성해보자.

 

1. 커스텀 뷰 클래스 생성

- View 클래스를 상속 받고, 생성자를 정의해준다.

class CustomView: View {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    
}

* View 클래스에는 4개의 생성자가 정의되어 있으며, 아래의 2개 생성자는 항상 정의해 두는 편이 좋다.

1) constructor(context: Context?): 코드로 뷰를 생성할 때 호출하는 생성자

2) constructor(context: Context?, attrs: AttributeSet?): 레이아웃XML 파일에 등록한 뷰가 안드로이드에 의해 Inflate될 때 호출되는 생성자

 

 

2. onDraw() 오버라이드

- Paint 객체를 생성해 뷰의 속성(색상, 크기 등)을 정의 한다.

* 레퍼런스: https://developer.android.com/reference/kotlin/android/graphics/Paint

 

- Canvas객체의 drawXXX() 메서드로 뷰를 그린다. (Canvas객체는 onDraw() 콜백 메서드의 매개변수로 들어온다)

class CustomView(context: Context?) : View(context) {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    
    // onDraw() 메서드 오버라이드: View가 화면에 출력될 때 호출되는 콜백 메서드
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        // Paint객체로 속성 설정
        val paint = Paint()
        paint.color = Color.GREEN // 색상 설정
        paint.style = Paint.Style.FILL // 도형의 내부를 채우도록 설정

        // Canvas객체로 도형(원) 그리기
        // 매개변수: 중심의 X좌표, 중심의 Y좌표, 반지름, Paint객체
        canvas?.drawCircle(200f, 200f, 150f, paint)
    }
}

* Canvas객체에는 다양한 그리기 메서드가 지원된다.

- drawText() : 텍스트 그리기

- drawCircle(): 원 그리기

- drawArc(): 호 그리기

- drawRect(): 사각형 그리기

- drawLine(): 선 그리기

- drawBitmap(): 비트맵 이미지 그리기

- 더많은 메서드는 레퍼런스 참고: https://developer.android.com/reference/kotlin/android/graphics/Canvas

 

3. 커스텀뷰 사용(출력)

- 액티비티 등에서 커스텀뷰를 화면에 출력하는 방법은 아래의 3가지가 있다.

 

1) 부모뷰.addView(커스텀뷰) : 부모뷰의 자식뷰로 추가

// 1. CustomView 객체 생성
val customView = CustomView(this)

// 2. 부모뷰 참조
val parentView: FrameLayout = findViewById(R.id.parentView)

// 3. 부모뷰의 자식뷰로 추가
parentView.addView(customView)

 

 

2) setContentView(커스텀뷰) : 액티비티의 화면을 커스텀뷰로 설정

// 1. CustomView 객체 생성
val customView = CustomView(this)

// 2. 액티비티 화면을 커스텀뷰로 설정
setContentView(customView)

 

 

3) 레이아웃 XML 파일: <패키지명.클래스명 /> 태그

- 레이아웃 XML파일에서 커스텀뷰를 사용할 때는 패키지명을 모두 적어주어야 함에 주의하자.

<!-- 커스텀뷰를 레이아웃 XML에 사용 -->
<com.example.test.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

---

커스텀 뷰는 중첩해서 그릴 수 있다.

아까 그린 초록색 원위에 텍스트를 추가해서 얹을 수 있다.

 

코드는 아래와 같다.

class CustomView: View {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        val paint = Paint()
        paint.color = Color.GREEN
        paint.style = Paint.Style.FILL

        canvas?.drawCircle(200f, 200f, 150f, paint)

        // 텍스트 속성 설정
        paint.color = Color.BLUE
        paint.textSize = 40f
        
        // 텍스트 그리기
        // 매개변수: "텍스트", X좌표, Y좌표, Paint객체
        canvas?.drawText("커스텀뷰", 160f, 200f, paint)
    }
}