Kotlin: 안드로이드 앱 개발의 깊은 이해와 응용 (2. Custom View 및 그래픽스)

안녕하세요, 안드로이드 앱 개발자 여러분! 이번 글에서는 Kotlin을 사용하여 안드로이드 앱에서 Custom View 및 그래픽스를 다루는 방법에 대해 자세히 살펴보겠습니다. 사용자 정의 뷰를 통해 앱의 UI를 더 다채롭게 구성하고, 그래픽스를 조작하여 상호 작용성을 높이는 방법을 배웠습니다. 함께 코드 예시와 함께 Custom View 및 그래픽스에 대해 자세히 알아봅시다.

1. Custom View 만들기

먼저, 안드로이드에서 Custom View를 만들려면 View 클래스를 상속받아 직접 구현해야 합니다. 예를 들어, 간단한 원을 그리는 Custom View를 만들어보겠습니다.

class CircleView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val centerX = width / 2.toFloat()
        val centerY = height / 2.toFloat()
        val radius = Math.min(centerX, centerY)
        canvas.drawCircle(centerX, centerY, radius, paint)
    }
}

2. XML에서 Custom View 사용

만들어진 Custom View를 XML 레이아웃 파일에서 사용하려면 다음과 같이 선언합니다.

<com.example.myapp.CircleView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

3. 그래픽스 조작

Custom View 내에서 그래픽스를 조작하는 것도 가능합니다. 예를 들어, 사용자의 터치 이벤트에 반응하여 선을 그리는 Custom View를 만들어보겠습니다.

class DrawingView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val path = Path()
    private val paint = Paint().apply {
        color = Color.BLACK
        style = Paint.Style.STROKE
        strokeWidth = 5f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawPath(path, paint)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x
        val y = event.y

        when (event.action) {
            MotionEvent.ACTION_DOWN -> path.moveTo(x, y)
            MotionEvent.ACTION_MOVE -> path.lineTo(x, y)
        }

        invalidate()
        return true
    }
}

4. Custom View 속성 정의

Custom View에 사용자 정의 속성을 추가하려면 다음과 같이 속성을 정의하고 사용합니다.

class CustomTextView(context: Context, attrs: AttributeSet) : AppCompatTextView(context, attrs) {

    init {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView)
        val customValue = typedArray.getString(R.styleable.CustomTextView_customValue)
        setText("Custom Value: $customValue")
        typedArray.recycle()
    }
}

5. XML에서 Custom View 속성 사용

XML에서는 다음과 같이 속성을 정의하고 사용할 수 있습니다.

<com.example.myapp.CustomTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:customValue="Hello Custom View"/>

6. Custom View 애니메이션

Custom View에 애니메이션을 적용하려면 ValueAnimator 등을 사용하여 그림을 그리는 과정을 애니메이션화할 수 있습니다.

class AnimatedCircleView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private var radius = 0f
    private val paint = Paint().apply {
        color = Color.RED
        style = Paint.Style.FILL
    }

    private val animator = ValueAnimator.ofFloat(0f, 300f).apply {
        duration = 1000
        addUpdateListener {
            radius = it.animatedValue as Float
            invalidate()
        }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val centerX = width / 2.toFloat()
        val centerY = height / 2.toFloat()
        canvas.drawCircle(centerX, centerY, radius, paint)
    }

    fun startAnimation() {
        animator.start()
    }
}

마무리

이번 글에서는 Kotlin을 사용하여 안드로이드 앱에서 Custom View 및 그래픽스를 다루는 방법에 대해 자세히 살펴보았습니다. 사용자 정의 뷰를 통해 앱의 UI를 더욱 풍부하게 만들어보았고, 그래픽스를 조작하여 상호 작용성을 높이는 방법을 배웠습니다. 여러분의 안드로이드 앱 개발 여정이 보다 흥미로워지기를 바라며, 다음 주제에서 또 만나도록 하겠습니다. 즐거운 안드로이드 앱 개발 되세요!  Happy coding! Skill UP!! 🚀