Custom View
안드로이드 앱 개발은 다양한 UI 요소를 조합하여 사용자에게 정보를 전달하고 사용자의 행동을 가이드하는 작업입니다. 이런 UI 요소들은 Button, TextView, RecyclerView와 같은 뷰(View)로 구성되며, 안드로이드 프레임워크는 이러한 뷰들을 제공함으로써 개발자가 사용자 인터페이스를 쉽게 구성할 수 있도록 돕습니다.
하지만 때때로, 우리는 표준 뷰로는 원하는 UI를 완벽하게 표현할 수 없을 때가 있습니다. 또는 특정 뷰의 동작을 커스터마이징하거나, 완전히 새로운 동작을 가진 뷰를 만들어야 할 때도 있습니다. 이런 상황에서 바로 커스텀 뷰가 중요한 역할을 수행합니다.
커스텀 뷰를 만드는 것은 새로운 도전일 수 있습니다. 기존 뷰를 확장하거나, 완전히 새로운 뷰를 만들어내는 과정에서는 안드로이드 뷰 시스템에 대한 깊은 이해가 필요하기 때문입니다. 하지만 이 과정을 통해 우리는 더욱 다양하고 풍부한 UI를 만들어낼 수 있으며, 우리의 앱이 제공하는 사용자 경험을 한층 더 향상시킬 수 있습니다.
이 포스트에서는 커스텀 뷰를 만드는 방법을 소개하고, 간단한 예제를 통해 실제로 커스텀 뷰를 만들어보는 과정을 진행하겠습니다. 이를 통해 커스텀 뷰의 필요성을 체감하고, 커스텀 뷰 개발의 기본적인 방법을 익히시길 바랍니다.
그럼 시작해보겠습니다!
CustomView 의 개념
안드로이드에서 뷰(View)는 사용자 인터페이스를 구성하는 기본적인 빌딩 블록입니다. TextView, Button, ImageView 등 우리가 자주 사용하는 컴포넌트들 모두 View를 상속받아 구현되어 있습니다. View 클래스는 화면에 무언가를 그리고, 사용자의 입력에 반응하는 데 필요한 많은 메서드를 제공합니다.
이렇게 안드로이드에서 제공하는 기본 뷰들은 일반적인 사용 사례를 잘 처리하도록 설계되었습니다. 하지만 때로는 앱이 제공해야 하는 UI나 UX가 표준 뷰로는 표현하기 어렵거나 불가능한 경우가 있습니다. 이런 경우에 우리는 커스텀 뷰를 만들어 사용합니다.
커스텀 뷰(Custom View)는 기본적으로 두 가지 방식으로 만들 수 있습니다. 하나는 기존 뷰를 상속하여 필요한 부분만 재정의(Override)하는 방법이고, 다른 하나는 View 클래스를 직접 상속하여 처음부터 새로운 뷰를 만드는 방법입니다.
첫 번째 방법은 기존 뷰의 동작을 일부 변경하거나 추가해야 할 때 주로 사용합니다. 예를 들어, Button을 눌렀을 때 특별한 효과를 주고 싶다면 Button 클래스를 상속받아 필요한 메서드를 재정의하면 됩니다.
두 번째 방법은 완전히 새로운 종류의 뷰를 만들어야 할 때 사용합니다. 예를 들어, 특별한 모양의 프로그레스 바를 만들거나, 복잡한 레이아웃을 갖는 뷰를 만들어야 할 때 View 클래스를 직접 상속받아 구현하게 됩니다.
어떤 방법을 선택하든, 커스텀 뷰를 만들 때는 뷰의 라이프사이클, 레이아웃 시스템, 그리는 방법, 이벤트 처리 방법 등에 대한 이해가 필요합니다. 이어지는 섹션에서는 이러한 개념들을 간단한 예제와 함께 살펴보도록 하겠습니다.
간단한 커스텀 뷰 개발 예제
이번 섹션에서는 간단한 원형의 커스텀 뷰를 만드는 방법에 대해 살펴보겠습니다. 이 예제를 통해 커스텀 뷰를 만드는 기본적인 방법과 고려해야 할 사항에 대해 알아보도록 하겠습니다.
- 우선, View 클래스를 상속받는 새로운 클래스를 만듭니다. 이 클래스는 원의 색상과 반지름을 설정할 수 있는 속성을 갖게 됩니다.
class CircleView : View {
private var circleColor: Int = Color.RED
private var radius: Float = 50f
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
val typedArray = context.theme.obtainStyledAttributes(attrs, R.styleable.CircleView, 0, 0)
try {
circleColor = typedArray.getInteger(R.styleable.CircleView_circleColor, Color.RED)
radius = typedArray.getDimension(R.styleable.CircleView_radius, 50f)
} finally {
typedArray.recycle()
}
}
fun setCircleColor(color: Int) {
this.circleColor = color
invalidate()
}
fun setRadius(radius: Float) {
this.radius = radius
invalidate()
}
}- 그런 다음
onDraw메서드를 재정의하여 원을 그립니다.
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint()
paint.color = circleColor
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, paint)
}- 이제 이 커스텀 뷰를 XML 레이아웃 파일에서 사용할 수 있습니다.
<com.example.CircleView
android:id="@+id/circleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:circleColor="@color/blue"
app:radius="100dp" />- 마지막으로 액티비티에서 이 커스텀 뷰의 속성을 동적으로 변경할 수 있습니다.
val circleView: CircleView = findViewById(R.id.circleView)
circleView.setCircleColor(Color.GREEN)
circleView.setRadius(150f)이처럼 커스텀 뷰를 만들면 자신만의 고유한 뷰를 만들 수 있고, 이를 재사용할 수 있어 코드의 중복을 줄이고 관리하기도 쉬워집니다. 다음 섹션에서는 좀 더 복잡한 예제를 통해 커스텀 뷰의 가능성을 더욱 확장해보도록 하겠습니다.
커스텀 뷰에서 이벤트 처리하기
커스텀 뷰에서 이벤트를 처리하는 것은 기본적인 뷰에서 이벤트를 처리하는 것과 매우 유사합니다. 그러나 일반적인 뷰와는 달리 커스텀 뷰에서는 보다 세밀한 이벤트 처리가 가능합니다. 이 섹션에서는 커스텀 뷰에서 터치 이벤트를 처리하는 방법에 대해 살펴보겠습니다.
- 먼저
onTouchEvent메서드를 재정의합니다. 이 메서드는 뷰가 터치 이벤트를 받았을 때 호출됩니다.
override fun onTouchEvent(event: MotionEvent): Boolean {
return when (event.action) {
MotionEvent.ACTION_DOWN -> {
handleTouchDown(event)
true
}
MotionEvent.ACTION_MOVE -> {
handleTouchMove(event)
true
}
MotionEvent.ACTION_UP -> {
handleTouchUp(event)
true
}
else -> super.onTouchEvent(event)
}
}- 그런 다음 터치 이벤트의 유형에 따라 적절한 처리를 수행하는 메서드를 작성합니다. 예를 들어, 사용자가 뷰를 터치하면 원의 색상을 무작위로 변경하는 기능을 추가할 수 있습니다.
private fun handleTouchDown(event: MotionEvent) {
val colors = listOf(Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW, Color.CYAN)
circleColor = colors.random()
invalidate()
}- 비슷하게, 사용자가 뷰를 드래그하면 원의 반지름을 변경하는 기능을 추가할 수 있습니다.
private fun handleTouchMove(event: MotionEvent) {
val dx = (width / 2) - event.x
val dy = (height / 2) - event.y
radius = sqrt(dx * dx + dy * dy)
invalidate()
}이렇게 커스텀 뷰에서 이벤트를 처리하면 사용자와의 상호작용을 보다 세밀하게 제어할 수 있습니다. 이외에도 여러분의 애플리케이션에 맞는 다양한 이벤트 처리 기능을 커스텀 뷰에 추가할 수 있습니다.
커스텀 뷰에서 레이아웃 관리
커스텀 뷰가 단순한 그래픽 렌더링 이상의 기능을 제공하려면 레이아웃 관리 방법에 대해 알아야 합니다. 레이아웃은 뷰가 화면에 어떻게 배치되는지를 결정하며, 크기와 위치를 정의하는 데 필요한 메커니즘을 제공합니다. 이번 섹션에서는 커스텀 뷰에서 레이아웃을 관리하는 방법에 대해 알아보겠습니다.
- 먼저, 뷰의 크기를 결정하기 위해
onMeasure메서드를 재정의합니다. 이 메서드는 뷰가 필요한 크기를 결정하고 이를 시스템에 알리는 역할을 합니다.
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
val desiredSize = 200 // 원하는 크기
val width = when (widthMode) {
MeasureSpec.EXACTLY -> widthSize
MeasureSpec.AT_MOST -> min(desiredSize, widthSize)
else -> desiredSize
}
val height = when (heightMode) {
MeasureSpec.EXACTLY -> heightSize
MeasureSpec.AT_MOST -> min(desiredSize, heightSize)
else -> desiredSize
}
setMeasuredDimension(width, height)
}- 다음으로 뷰의 위치를 결정하기 위해
onLayout메서드를 재정의합니다. 이 메서드는 뷰와 그 자식들이 화면의 어떤 위치에 놓일지를 결정합니다. 이 예에서는 자식 뷰가 없으므로onLayout메서드는 비어 있습니다.
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
// 자식 뷰가 없으므로 비워둡니다.
}이처럼 커스텀 뷰에서 레이아웃을 관리하면 화면에 뷰를 정확히 어떻게 배치할지 세밀하게 제어할 수 있습니다
이점
커스텀 뷰를 개발하는 것은 처음에는 어려울 수 있지만, 실제로는 큰 이점을 제공합니다. 커스텀 뷰를 통해 우리는 자신만의 사용자 인터페이스를 만들 수 있으며, 이는 디자인에 큰 유연성을 제공합니다. 또한 재사용 가능한 컴포넌트를 만들어 코드의 중복을 줄이고 코드의 구조를 향상시킬 수 있습니다.
class MyCustomView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
// 커스텀 뷰의 구현
}위의 코드는 커스텀 뷰를 작성할 때의 기본 틀을 보여줍니다. 이를 통해 우리는 뷰의 렌더링, 레이아웃, 그리고 이벤트 처리 방식을 완전히 제어할 수 있습니다. 이는 매우 복잡한 사용자 인터페이스를 만들거나, 표준 Android 뷰로는 불가능한 특별한 효과를 구현하는 데 유용합니다.
또한, 커스텀 뷰는 재사용성을 높입니다. 한번 만든 커스텀 뷰는 다른 액티비티나 프래그먼트에서도 사용할 수 있으므로, 뷰를 여러번 재작성할 필요가 없습니다. 이는 개발 시간을 단축하고 코드의 통일성을 향상시킵니다.
결론적으로, 커스텀 뷰는 Android 앱 개발에서 매우 중요한 도구입니다. 이를 활용하여 더욱 풍부하고 사용자 친화적인 사용자 인터페이스를 제작할 수 있습니다.