안드로이드 커스텀 뷰

🧙🏻커스텀 뷰를 만들자!

안드로이드 신입 면접 질문에 대해 검색해 보면 간간이 보이는 키워드가 커스텀뷰다... 그래서 커스텀 뷰를 만들어 보려고 한다.!ㅎ

커스텀 뷰를 만드는 이유

개발하는 애플리케이션의 요구 조건에 따라 화면 구성 요소에 요구하는 바도 조금씩의 차이가 발생한다. 안드로이드 프레임워크에서 제공하는 API를 사용하여 화면이 구성된다면 간단하고 좋겠지만, 현실은 그러지 못하다. 그렇기 때문에 커스텀 뷰가 필요하다. 화면을 구성할 적절한 뷰가 없을 때 개발자는 커스텀 뷰를 만들어 사용할 수 있다.

커스텀 뷰를 만드는 방법 3가지

목적 또는 구현에 따라 커스텀 뷰를 만드는 방법은 3가지가 있다.

• 안드로이드 프레임워크에서 제공하는 API를 그대로 이용하면서 약간의 변형을 주어 생성하는 커스텀 뷰
  : 이런 경우의 커스텀 뷰는 구현이 가장 간단하다. 액티비티에서 일일이 하기 번거로운 작업을 커스텀 뷰로 만들어 대체하고자 할 때 이런 유형의 커스텀 뷰를 생성한다. 다음은 TextView를 상속받아 미세먼지 수치에 따라 텍스트의 색상 값이 변경되는 커스텀 뷰의 코드이다.

    class ChangeColorTextView : AppCompatTextView {

        var dustDimension = 0
        set(value) {
            field = value
            setLevelColor()
        }

        constructor(context: Context?) : super(context)
        constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
        constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int)
                : super(context, attrs, defStyleAttr)

        private fun setLevelColor(){
            when{
                dustDimension > 150 -> this.setTextColor(Color.RED)
                dustDimension in 31..150 -> this.setTextColor(Color.GREEN)
                else -> this.setTextColor(Color.BLUE)
            }
        }
    }

• 여러 뷰 요소를 합쳐서 한 번에 출력하기 위해 생성하는 커스텀 뷰
  : 여러 뷰가 결합된 형태로 반복해서 사용될 경우 하나의 뷰로 만들어서 사용하는 것이 편리하므로 커스텀 뷰를 생성한다.
  CustomView를 만들어서 재사용하기

• 기존에 존재하지 않는 형태의 새로운 뷰를 생성하는 커스텀 뷰
  : 기존의 API에 존재하지 않는 새로운 형태의 뷰를 만들어 사용 해야 하기 때문에 커스텀 뷰를 생성한다. View 클래스를 상속받아 구현한다.

🧝🏻‍♀️커스텀 속성 만들기

위의 코드에서 생성자가 3개나 있는 것을 볼 수 있는데 이는 자바 코드에서 생성자를 통해 뷰를 생성할 경우뿐만 아니라 레이아웃 xml코드에서 뷰를 생성하는 경우를 생각하여 시스템이 호출할 수 있는 생성자를 추가한 것이다. 또한, xml에서 커스텀 뷰를 사용하고자 하는 경우 패키지 명부터 커스텀 뷰의 클래스 명을 입력하여 사용해 주어야 한다.

<com.hyejineee.customview.ChangeColorTextView
        android:id="@+id/dust_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        my:dimension = "100"/>

또한 위 xml코드에서 my:dimension과 같은 커스텀 속성을 사용하고자 하는 경우 다음과 같이 커스텀 속성에 대한 정의를 하여 빌더에 의해 속성이 인식되도록 해주어야 한다.

• declare-styleable 태그는 하위 속성들을 관리하는 단위를 의미한다.
  • attr 태그는 정의하는 커스텀 속성을 의미한다.
  • name 속성은 커스텀 속성의 이름을 나타낸다.
  • format 속성은 커스텀 속성 값의 타입을 나타낸다.

<resources>
		<declare-styleable name ="dustTextView">
				<attr name ="dimension" format ="integer ">
		</declare-styleable>
</resources>

🎹 View 클래스를 상속한 커스텀 뷰 만들기

View 클래스를 상속하여 도넛 모양의 커스텀 뷰를 만들어 보자. 만드는 순서는 다음과 같다.

1. View 클래스를 상속하는 DonutChartView 클래스를 생성한다.
2. xml에서도 사용할 수 있도록 3개의 생성자를 만든다.
3. 뷰의 크기를 결정하기 위해 onMeasure()를 오버라이드하여 구현한다.
4. 화면에 도넛 모양의 그래프를 출력하기 위해 onDraw()를 오버라이드하여 구현한다.
5. 커스텀 속성이 필요한 경우 attrs.xml에 커스텀 속성을 정의한다.
   👉🏻 도넛 모양 view 만들기 예제