1. 커스텀 뷰란 무엇인가? 🤔

커스텀 뷰는 안드로이드에서 기본으로 제공하는 UI 컴포넌트(Button, TextView 등)로는 구현하기 어려운 특별한 UI를 만들 때 사용하는 방법이야. 쉽게 말해서, 너만의 특별한 UI 컴포넌트를 직접 그리고 만드는 거지! 🖌️

커스텀 뷰를 만드는 방법은 크게 두 가지가 있어:

1. 기존 뷰 확장하기: Button, TextView 같은 기존 뷰를 상속받아 기능을 추가하거나 변경하는 방법
2. View 클래스 직접 상속하기: 완전히 처음부터 새로운 뷰를 만드는 방법 (우리가 오늘 집중적으로 볼 부분!)

재능넷에서 프로그래밍 재능을 공유하는 개발자들 사이에서도 커스텀 뷰 제작 능력은 꽤 인정받는 스킬이야. 왜냐하면 독특하고 매력적인 UI는 앱의 가치를 크게 높여주거든! 😎

2. Canvas와 Paint 클래스 소개 🧰

커스텀 뷰의 핵심은 Canvas와 Paint 클래스야. 이 두 친구는 마치 실제 그림을 그릴 때의 캔버스와 물감 같은 역할을 해. 🎭

Canvas 클래스

Canvas는 말 그대로 '그림을 그리는 캔버스'야. 여기에 모든 시각적 요소(도형, 텍스트, 이미지 등)를 그릴 수 있어. 주요 메서드들을 살펴볼까?

// 도형 그리기
canvas.drawRect(left, top, right, bottom, paint);  // 사각형
canvas.drawCircle(centerX, centerY, radius, paint);  // 원
canvas.drawLine(startX, startY, stopX, stopY, paint);  // 선

// 텍스트 그리기
canvas.drawText("Hello World", x, y, paint);

// 이미지 그리기
canvas.drawBitmap(bitmap, left, top, paint);

Paint 클래스

Paint는 그림을 어떻게 그릴지 정의하는 클래스야. 색상, 두께, 스타일 등을 설정할 수 있지. 마치 실제 그림을 그릴 때 사용하는 물감과 붓의 속성을 정하는 것과 비슷해! 🖌️

Paint paint = new Paint();
paint.setColor(Color.RED);  // 색상 설정
paint.setStrokeWidth(5);  // 선 두께 설정
paint.setStyle(Paint.Style.FILL);  // 채우기 스타일
paint.setStyle(Paint.Style.STROKE);  // 외곽선 스타일
paint.setTextSize(30);  // 텍스트 크기 설정
paint.setAntiAlias(true);  // 부드러운 렌더링

Canvas는 '무엇을 그릴지'를 결정하고, Paint는 '어떻게 그릴지'를 결정한다고 생각하면 돼! 이 두 클래스를 잘 활용하면 정말 다양한 UI를 만들 수 있어. 😄

3. 기본적인 커스텀 뷰 만들기 🏗️

이제 실제로 커스텀 뷰를 만들어 볼까? 가장 기본적인 형태의 커스텀 뷰를 만드는 과정을 단계별로 알아보자! 👨‍💻

1단계: View 클래스 상속하기

커스텀 뷰를 만들기 위한 첫 단계는 View 클래스를 상속받는 거야.

public class MyCustomView extends View {
    
    // 페인트 객체 (그리기 속성 정의)
    private Paint paint;
    
    // 생성자
    public MyCustomView(Context context) {
        super(context);
        init();
    }
    
    // XML에서 사용할 때 필요한 생성자
    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    // 초기화 메서드
    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLUE);  // 파란색으로 설정
        paint.setAntiAlias(true);    // 부드러운 렌더링
    }
}

2단계: onDraw() 메서드 오버라이드하기

onDraw() 메서드는 뷰가 화면에 그려질 때 호출되는 메서드야. 여기서 Canvas를 이용해 실제 그리기 작업을 수행해.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    // 화면 중앙에 원 그리기
    float centerX = getWidth() / 2f;
    float centerY = getHeight() / 2f;
    float radius = Math.min(centerX, centerY) / 2f;
    
    canvas.drawCircle(centerX, centerY, radius, paint);
}

3단계: XML에서 커스텀 뷰 사용하기

만든 커스텀 뷰를 레이아웃 XML에서 사용하는 방법은 다음과 같아:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.example.myapp.MyCustomView
        android:id="@+id/myCustomView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true" />
        
</RelativeLayout>

이렇게 하면 화면 중앙에 파란색 원이 그려진 커스텀 뷰가 표시돼! 정말 간단하지? 😊

4단계: 커스텀 속성 추가하기

XML에서 커스텀 뷰의 속성을 설정할 수 있도록 하려면, 커스텀 속성을 정의해야 해. 이건 조금 더 고급 기능이니 간단히 살펴보자.

먼저 attrs.xml 파일에 속성을 정의해:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyCustomView">
        <attr name="circleColor" format="color" />
        <attr name="circleRadius" format="dimension" />
    </declare-styleable>
</resources>

그리고 커스텀 뷰 클래스에서 이 속성들을 읽어와:

public MyCustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    
    // 속성 값 가져오기
    TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs, R.styleable.MyCustomView, 0, 0);
    
    try {
        // 속성 값 읽기
        int circleColor = a.getColor(R.styleable.MyCustomView_circleColor, Color.BLUE);
        float circleRadius = a.getDimension(R.styleable.MyCustomView_circleRadius, 100);
        
        // 페인트 초기화
        paint = new Paint();
        paint.setColor(circleColor);
        paint.setAntiAlias(true);
        
        // 반지름 저장
        this.radius = circleRadius;
    } finally {
        // TypedArray는 반드시 recycle() 호출해야 함
        a.recycle();
    }
}

이제 XML에서 다음과 같이 속성을 설정할 수 있어:

<com.example.myapp.MyCustomView
    android:id="@+id/myCustomView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:circleColor="#FF0000"
    app:circleRadius="50dp" />

이렇게 커스텀 속성을 추가하면 XML에서 직접 뷰의 모양을 조절할 수 있어서 재사용성이 높아져! 재능넷에서 안드로이드 UI 개발 관련 재능을 판매하는 개발자라면, 이런 커스텀 뷰 제작 능력은 정말 큰 경쟁력이 될 수 있어. 🚀

4. 도형 그리기 (원, 사각형, 선) 📐

Canvas 클래스는 다양한 기본 도형을 그리는 메서드를 제공해. 이제 자주 사용하는 도형들을 어떻게 그리는지 알아보자! 🎯

원 그리기

원은 drawCircle() 메서드로 그릴 수 있어:

// 원 그리기
Paint circlePaint = new Paint();
circlePaint.setColor(Color.RED);
circlePaint.setStyle(Paint.Style.FILL);  // 내부 채우기

// 중심 좌표 (x, y)와 반지름으로 원 그리기
canvas.drawCircle(150, 150, 100, circlePaint);

// 외곽선만 있는 원 그리기
Paint strokePaint = new Paint();
strokePaint.setColor(Color.BLACK);
strokePaint.setStyle(Paint.Style.STROKE);  // 외곽선만
strokePaint.setStrokeWidth(5);  // 선 두께
canvas.drawCircle(400, 150, 100, strokePaint);

사각형 그리기

사각형은 drawRect() 메서드로 그릴 수 있어:

// 사각형 그리기
Paint rectPaint = new Paint();
rectPaint.setColor(Color.GREEN);

// 왼쪽 위 (left, top)와 오른쪽 아래 (right, bottom) 좌표로 사각형 그리기
canvas.drawRect(50, 300, 250, 450, rectPaint);

// RectF 객체를 사용한 사각형 그리기
RectF rectF = new RectF(300, 300, 500, 450);
Paint roundRectPaint = new Paint();
roundRectPaint.setColor(Color.BLUE);
// 모서리가 둥근 사각형 그리기 (마지막 두 매개변수는 x, y 방향의 반지름)
canvas.drawRoundRect(rectF, 20, 20, roundRectPaint);

선 그리기

선은 drawLine() 메서드로 그릴 수 있어:

// 선 그리기
Paint linePaint = new Paint();
linePaint.setColor(Color.BLACK);
linePaint.setStrokeWidth(8);  // 선 두께
linePaint.setStrokeCap(Paint.Cap.ROUND);  // 선 끝 모양 (둥글게)

// 시작점 (startX, startY)에서 끝점 (stopX, stopY)까지 선 그리기
canvas.drawLine(50, 500, 250, 650, linePaint);

// 여러 선 한번에 그리기
float[] points = {
    300, 500, 350, 550,  // 첫 번째 선의 시작점과 끝점
    350, 550, 450, 500,  // 두 번째 선의 시작점과 끝점
    450, 500, 500, 600   // 세 번째 선의 시작점과 끝점
};
canvas.drawLines(points, linePaint);

경로(Path) 그리기

더 복잡한 도형은 Path 클래스를 사용해 그릴 수 있어:

// 경로 그리기
Path path = new Path();
path.moveTo(50, 700);    // 시작점 설정
path.lineTo(150, 800);   // 선 그리기
path.lineTo(50, 900);    // 다음 선 그리기
path.lineTo(50, 700);    // 경로 닫기

Paint pathPaint = new Paint();
pathPaint.setColor(Color.MAGENTA);
pathPaint.setStyle(Paint.Style.FILL_AND_STROKE);
pathPaint.setStrokeWidth(3);
canvas.drawPath(path, pathPaint);

// 곡선 경로 그리기
Path curvePath = new Path();
curvePath.moveTo(300, 700);
// 제어점1(x1,y1), 제어점2(x2,y2), 끝점(x3,y3)
curvePath.cubicTo(350, 650, 450, 750, 500, 700);
curvePath.lineTo(500, 900);
curvePath.lineTo(300, 900);
curvePath.close();

Paint curvePathPaint = new Paint();
curvePathPaint.setColor(Color.YELLOW);
curvePathPaint.setStyle(Paint.Style.FILL);
canvas.drawPath(curvePath, curvePathPaint);

이런 기본 도형들을 조합하면 정말 다양한 UI 요소를 만들 수 있어! 예를 들어, 원형 프로그레스 바, 커스텀 차트, 게임 요소 등을 만들 수 있지. 🎮

5. 텍스트 그리기와 스타일링 📝

Canvas에서는 텍스트도 자유롭게 그릴 수 있어. 텍스트 크기, 색상, 폰트, 스타일 등을 세밀하게 조절할 수 있지! 📚

기본 텍스트 그리기

가장 기본적인 텍스트 그리기는 drawText() 메서드를 사용해:

// 기본 텍스트 그리기
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);
textPaint.setTextSize(50);  // 텍스트 크기 설정
textPaint.setAntiAlias(true);  // 부드러운 텍스트 렌더링

// 텍스트, x좌표, y좌표, 페인트 객체
canvas.drawText("안녕하세요!", 50, 100, textPaint);

텍스트 스타일 설정

텍스트의 다양한 스타일을 설정할 수 있어:

// 텍스트 스타일 설정
Paint stylePaint = new Paint();
stylePaint.setColor(Color.BLUE);
stylePaint.setTextSize(60);
stylePaint.setAntiAlias(true);

// 볼드체 설정
stylePaint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
canvas.drawText("볼드 텍스트", 50, 200, stylePaint);

// 이탤릭체 설정
stylePaint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.ITALIC));
canvas.drawText("이탤릭 텍스트", 50, 300, stylePaint);

// 커스텀 폰트 설정
Typeface customFont = Typeface.createFromAsset(getContext().getAssets(), "fonts/my_custom_font.ttf");
stylePaint.setTypeface(customFont);
canvas.drawText("커스텀 폰트", 50, 400, stylePaint);

텍스트 정렬 및 측정

텍스트를 정렬하거나 크기를 측정하는 방법도 알아보자:

// 텍스트 정렬
Paint alignPaint = new Paint();
alignPaint.setColor(Color.RED);
alignPaint.setTextSize(50);
alignPaint.setAntiAlias(true);

// 왼쪽 정렬 (기본값)
alignPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText("왼쪽 정렬", 400, 100, alignPaint);

// 가운데 정렬
alignPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("가운데 정렬", 400, 200, alignPaint);

// 오른쪽 정렬
alignPaint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText("오른쪽 정렬", 400, 300, alignPaint);

// 텍스트 크기 측정
String text = "텍스트 크기 측정";
Rect bounds = new Rect();
alignPaint.getTextBounds(text, 0, text.length(), bounds);

// 측정된 텍스트 크기로 배경 사각형 그리기
alignPaint.setStyle(Paint.Style.FILL);
alignPaint.setColor(Color.YELLOW);
alignPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawRect(400, 350, 400 + bounds.width(), 350 + bounds.height(), alignPaint);

// 텍스트 그리기
alignPaint.setColor(Color.BLACK);
canvas.drawText(text, 400, 350 + bounds.height(), alignPaint);

텍스트 경로를 따라 그리기

곡선이나 특정 경로를 따라 텍스트를 그릴 수도 있어:

// 경로를 따라 텍스트 그리기
Path textPath = new Path();
textPath.addArc(new RectF(50, 450, 450, 650), 0, 180);

Paint pathTextPaint = new Paint();
pathTextPaint.setColor(Color.GREEN);
pathTextPaint.setTextSize(40);
pathTextPaint.setAntiAlias(true);

// 경로를 따라 텍스트 그리기
canvas.drawTextOnPath("경로를 따라 그려진 텍스트입니다", textPath, 0, 0, pathTextPaint);

텍스트 그리기는 커스텀 뷰에서 정말 중요한 부분이야. 특히 데이터 시각화나 커스텀 차트를 만들 때 라벨이나 값을 표시하는 데 자주 사용되지. 재능넷에서 데이터 시각화 관련 프로젝트를 진행하는 개발자라면 이 부분을 잘 익혀두면 좋을 거야! 📊

6. 이미지 다루기 🖼️

Canvas를 사용하면 이미지(Bitmap)도 자유롭게 그리고 조작할 수 있어. 이미지 회전, 크기 조절, 필터 적용 등 다양한 작업이 가능해! 📸

기본 이미지 그리기

가장 기본적인 이미지 그리기는 drawBitmap() 메서드를 사용해:

// 리소스에서 비트맵 로드하기
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);

// 이미지 그리기 (왼쪽 상단 좌표에 원본 크기로 그리기)
canvas.drawBitmap(bitmap, 50, 50, null);  // 페인트는 null로 설정 가능

// 특정 위치와 크기로 이미지 그리기
Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  // 원본 이미지의 영역
Rect dst = new Rect(300, 50, 600, 250);  // 화면에 표시할 영역
canvas.drawBitmap(bitmap, src, dst, null);

이미지 변형하기

Matrix 클래스를 사용하면 이미지를 회전, 확대/축소, 기울이기 등의 변형을 할 수 있어:

// 이미지 변형을 위한 Matrix 객체 생성
Matrix matrix = new Matrix();

// 회전 (중심점 기준으로 45도 회전)
matrix.setRotate(45, bitmap.getWidth() / 2f, bitmap.getHeight() / 2f);
Bitmap rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
canvas.drawBitmap(rotatedBitmap, 50, 300, null);

// 확대/축소 (가로 2배, 세로 1.5배)
matrix.reset();
matrix.setScale(2f, 1.5f);
Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
canvas.drawBitmap(scaledBitmap, 300, 300, null);

// 기울이기 (x축으로 0.5, y축으로 0.3 기울이기)
matrix.reset();
matrix.setSkew(0.5f, 0.3f);
Bitmap skewedBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
canvas.drawBitmap(skewedBitmap, 600, 300, null);

이미지에 필터 적용하기

ColorFilter를 사용하면 이미지에 다양한 색상 효과를 적용할 수 있어:

// 색상 필터 적용하기
Paint filterPaint = new Paint();

// 회색조 필터
ColorMatrix grayMatrix = new ColorMatrix();
grayMatrix.setSaturation(0);  // 채도를 0으로 설정 (회색조)
filterPaint.setColorFilter(new ColorMatrixColorFilter(grayMatrix));
canvas.drawBitmap(bitmap, 50, 500, filterPaint);

// 색상 반전 필터
ColorMatrix invertMatrix = new ColorMatrix(new float[] {
    -1, 0, 0, 0, 255,
    0, -1, 0, 0, 255,
    0, 0, -1, 0, 255,
    0, 0, 0, 1, 0
});
filterPaint.setColorFilter(new ColorMatrixColorFilter(invertMatrix));
canvas.drawBitmap(bitmap, 300, 500, filterPaint);

// 색조 변경 필터 (빨간색 강조)
ColorMatrix tintMatrix = new ColorMatrix();
tintMatrix.setScale(1.5f, 0.8f, 0.8f, 1f);  // R, G, B, A 채널 조정
filterPaint.setColorFilter(new ColorMatrixColorFilter(tintMatrix));
canvas.drawBitmap(bitmap, 550, 500, filterPaint);

이미지 블렌딩 모드

PorterDuff.Mode를 사용하면 이미지와 배경 간의 블렌딩 효과를 적용할 수 있어:

// 블렌딩 모드 적용하기
Paint blendPaint = new Paint();

// SRC_OVER 모드 (기본값, 소스 이미지가 대상 위에 그려짐)
blendPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
canvas.drawBitmap(bitmap, 50, 700, blendPaint);

// MULTIPLY 모드 (곱하기 효과, 어두운 부분이 강조됨)
blendPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
canvas.drawBitmap(bitmap, 300, 700, blendPaint);

// SCREEN 모드 (스크린 효과, 밝은 부분이 강조됨)
blendPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));
canvas.drawBitmap(bitmap, 550, 700, blendPaint);

이미지 처리는 사진 편집 앱이나 이미지 필터 기능을 구현할 때 정말 유용해! 재능넷에서 이미지 처리 관련 프로젝트를 진행하는 개발자라면 이런 기능을 활용해 독특한 UI 효과를 만들 수 있을 거야. 🎭

7. 애니메이션 구현하기 🎬

커스텀 뷰의 진정한 매력은 애니메이션을 통해 생동감 있는 UI를 만들 수 있다는 거야! 이제 Canvas를 사용한 애니메이션 구현 방법을 알아보자. 🎡

기본 애니메이션 구현

애니메이션의 기본 원리는 시간에 따라 그림의 속성(위치, 크기, 색상 등)을 변경하고 화면을 다시 그리는 것이야. 가장 간단한 방법은 invalidate() 메서드를 사용하는 거야:

public class AnimatedCircleView extends View {
    private Paint paint;
    private float radius = 50f;
    private float centerX, centerY;
    private boolean isExpanding = true;
    
    // 생성자 및 초기화 코드 생략...
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2f;
        centerY = h / 2f;
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 원 그리기
        canvas.drawCircle(centerX, centerY, radius, paint);
        
        // 반지름 변경 (확대 또는 축소)
        if (isExpanding) {
            radius += 2f;
            if (radius > 150f) {
                isExpanding = false;
            }
        } else {
            radius -= 2f;
            if (radius < 50f) {
                isExpanding = true;
            }
        }
        
        // 다음 프레임을 위해 invalidate 호출
        invalidate();
    }
}

이 코드는 원이 확대되었다가 축소되는 애니메이션을 구현해. invalidate() 메서드를 호출하면 뷰가 다시 그려지고, onDraw()가 다시 호출되어 애니메이션이 계속 진행돼. 🔄

ValueAnimator 사용하기

더 세련된 방법은 안드로이드의 애니메이션 프레임워크를 활용하는 거야. ValueAnimator를 사용하면 더 부드러운 애니메이션을 만들 수 있어:

public class AnimatedCircleView extends View {
    private Paint paint;
    private float radius = 50f;
    private float centerX, centerY;
    private ValueAnimator animator;
    
    // 생성자
    public AnimatedCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
        
        // ValueAnimator 설정
        animator = ValueAnimator.ofFloat(50f, 150f);
        animator.setDuration(1000);  // 1초 동안 애니메이션
        animator.setRepeatCount(ValueAnimator.INFINITE);  // 무한 반복
        animator.setRepeatMode(ValueAnimator.REVERSE);  // 왕복 애니메이션
        
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                radius = (float) animation.getAnimatedValue();
                invalidate();  // 뷰 다시 그리기
            }
        });
        
        // 애니메이션 시작
        animator.start();
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2f;
        centerY = h / 2f;
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(centerX, centerY, radius, paint);
    }
    
    // 뷰가 화면에서 사라질 때 애니메이션 정리
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (animator != null) {
            animator.cancel();
        }
    }
}

속성 애니메이션 조합하기

여러 속성을 동시에 애니메이션하려면 ObjectAnimator나 AnimatorSet을 사용할 수 있어:

public class AnimatedShapeView extends View {
    private Paint paint;
    private float radius = 50f;
    private float centerX, centerY;
    private int color = Color.RED;
    private AnimatorSet animatorSet;
    
    // 생성자 및 초기화 코드 생략...
    
    private void setupAnimation() {
        // 크기 애니메이션
        ValueAnimator sizeAnimator = ValueAnimator.ofFloat(50f, 150f);
        sizeAnimator.setDuration(1500);
        sizeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                radius = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        
        // 색상 애니메이션
        ValueAnimator colorAnimator = ValueAnimator.ofArgb(Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW);
        colorAnimator.setDuration(3000);
        colorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                color = (int) animation.getAnimatedValue();
                paint.setColor(color);
                invalidate();
            }
        });
        
        // 애니메이션 세트 구성
        animatorSet = new AnimatorSet();
        animatorSet.playTogether(sizeAnimator, colorAnimator);  // 동시에 실행
        animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());  // 가속-감속 효과
        animatorSet.setRepeatCount(ValueAnimator.INFINITE);
        animatorSet.setRepeatMode(ValueAnimator.REVERSE);
        
        // 애니메이션 시작
        animatorSet.start();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(color);
        canvas.drawCircle(centerX, centerY, radius, paint);
    }
}

물리 기반 애니메이션

안드로이드는 물리 법칙을 따르는 자연스러운 애니메이션을 위한 DynamicAnimation 클래스도 제공해:

// 스프링 애니메이션 구현 (Android Support Library 필요)
private SpringAnimation springAnimation;
private float springValue = 0f;

private void setupSpringAnimation() {
    // 스프링 애니메이션 설정
    SpringForce springForce = new SpringForce(0f);  // 목표값 0
    springForce.setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY);  // 탄성 정도
    springForce.setStiffness(SpringForce.STIFFNESS_MEDIUM);  // 강성
    
    springAnimation = new SpringAnimation(new FloatValueHolder());
    springAnimation.setSpring(springForce);
    
    springAnimation.addUpdateListener(new DynamicAnimation.OnAnimationUpdateListener() {
        @Override
        public void onAnimationUpdate(DynamicAnimation animation, float value, float velocity) {
            springValue = value;
            invalidate();
        }
    });
    
    // 애니메이션 시작 (200의 초기 속도로)
    springAnimation.setStartValue(300f);
    springAnimation.setStartVelocity(200f);
    springAnimation.start();
}

애니메이션은 사용자 경험을 크게 향상시키는 요소야. 특히 로딩 인디케이터, 전환 효과, 인터랙티브 요소 등에 애니메이션을 적용하면 앱이 훨씬 더 생동감 있게 느껴져! 재능넷에서 UI/UX 디자인 관련 재능을 판매한다면, 이런 애니메이션 기술은 너의 작품을 돋보이게 할 거야. ✨

8. 터치 이벤트 처리하기 👆

커스텀 뷰의 진정한 힘은 사용자 상호작용에서 나와! 터치 이벤트를 처리하면 사용자가 화면을 터치했을 때 반응하는 인터랙티브한 UI를 만들 수 있어. 🤳

기본 터치 이벤트 처리

터치 이벤트를 처리하려면 onTouchEvent() 메서드를 오버라이드해야 해:

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 터치한 좌표 가져오기
    float x = event.getX();
    float y = event.getY();
    
    // 터치 이벤트 종류에 따라 처리
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:  // 화면을 누를 때
            // 터치 시작 처리
            handleTouchDown(x, y);
            return true;
            
        case MotionEvent.ACTION_MOVE:  // 화면에서 손가락을 움직일 때
            // 드래그 처리
            handleTouchMove(x, y);
            return true;
            
        case MotionEvent.ACTION_UP:    // 화면에서 손가락을 뗄 때
            // 터치 종료 처리
            handleTouchUp(x, y);
            return true;
    }
    
    return super.onTouchEvent(event);
}

드래그 가능한 도형 만들기

이제 실제로 드래그할 수 있는 원을 만들어 볼까?

public class DraggableCircleView extends View {
    private Paint paint;
    private float circleX, circleY;
    private float radius = 80f;
    private boolean isDragging = false;
    
    // 생성자 및 초기화 코드 생략...
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 초기 위치는 화면 중앙
        circleX = w / 2f;
        circleY = h / 2f;
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(circleX, circleY, radius, paint);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 원 안을 터치했는지 확인
                float dx = x - circleX;
                float dy = y - circleY;
                float distance = (float) Math.sqrt(dx * dx + dy * dy);
                
                if (distance < radius) {
                    isDragging = true;
                    return true;
                }
                break;
                
            case MotionEvent.ACTION_MOVE:
                if (isDragging) {
                    // 원의 위치를 터치 위치로 업데이트
                    circleX = x;
                    circleY = y;
                    invalidate();  // 뷰 다시 그리기
                    return true;
                }
                break;
                
            case MotionEvent.ACTION_UP:
                isDragging = false;
                return true;
        }
        
        return super.onTouchEvent(event);
    }
}

멀티 터치 처리하기

두 손가락으로 확대/축소하는 기능을 구현해보자:

public class PinchZoomCircleView extends View {
    private Paint paint;
    private float circleX, circleY;
    private float radius = 100f;
    private float initialDistance = 0f;
    private float initialRadius = 0f;
    
    // 생성자 및 초기화 코드 생략...
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(circleX, circleY, radius, paint);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 멀티 터치 처리
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_POINTER_DOWN:  // 두 번째 손가락이 화면에 닿았을 때
                if (event.getPointerCount() == 2) {
                    // 두 손가락 사이의 초기 거리 계산
                    initialDistance = getDistance(event);
                    initialRadius = radius;
                    return true;
                }
                break;
                
            case MotionEvent.ACTION_MOVE:
                if (event.getPointerCount() == 2) {
                    // 현재 두 손가락 사이의 거리 계산
                    float currentDistance = getDistance(event);
                    
                    // 거리 변화에 따라 반지름 조정
                    if (initialDistance > 0) {
                        radius = initialRadius * (currentDistance / initialDistance);
                        // 최소/최대 반지름 제한
                        radius = Math.max(20, Math.min(300, radius));
                        invalidate();
                    }
                    return true;
                }
                break;
        }
        
        return super.onTouchEvent(event);
    }
    
    // 두 손가락 사이의 거리 계산
    private float getDistance(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);
    }
}

제스처 감지기 사용하기

안드로이드는 더 복잡한 제스처를 쉽게 처리할 수 있는 GestureDetector를 제공해:

public class GestureCircleView extends View {
    private Paint paint;
    private float circleX, circleY;
    private float radius = 80f;
    private GestureDetector gestureDetector;
    
    public GestureCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    
    private void init(Context context) {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
        
        // 제스처 감지기 설정
        gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onDown(MotionEvent e) {
                // 모든 제스처는 onDown에서 시작하므로 true 반환
                return true;
            }
            
            @Override
            public boolean onSingleTapConfirmed(MotionEvent e) {
                // 한 번 탭했을 때 색상 변경
                int red = (int)(Math.random() * 255);
                int green = (int)(Math.random() * 255);
                int blue = (int)(Math.random() * 255);
                paint.setColor(Color.rgb(red, green, blue));
                invalidate();
                return true;
            }
            
            @Override
            public boolean onDoubleTap(MotionEvent e) {
                // 두 번 탭했을 때 크기 변경
                radius = radius == 80f ? 120f : 80f;
                invalidate();
                return true;
            }
            
            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                // 스크롤(드래그)할 때 원 이동
                circleX -= distanceX;
                circleY -= distanceY;
                invalidate();
                return true;
            }
            
            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                // 빠르게 스와이프했을 때 애니메이션 효과
                // 여기서는 간단히 처리
                circleX += velocityX / 100;
                circleY += velocityY / 100;
                invalidate();
                return true;
            }
        });
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        circleX = w / 2f;
        circleY = h / 2f;
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(circleX, circleY, radius, paint);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 제스처 감지기에 이벤트 전달
        return gestureDetector.onTouchEvent(event) || super.onTouchEvent(event);
    }
}

터치 이벤트를 잘 활용하면 사용자와 상호작용하는 멋진 UI를 만들 수 있어! 드래그 앤 드롭, 핀치 줌, 스와이프 등의 제스처를 지원하는 커스텀 컴포넌트는 앱의 사용성을 크게 향상시켜. 재능넷에서 모바일 앱 개발 관련 재능을 공유하는 개발자라면, 이런 인터랙티브한 UI 구현 능력은 큰 경쟁력이 될 거야! 🚀

9. 성능 최적화 팁 🚀

커스텀 뷰는 멋지지만, 잘못 구현하면 성능 문제가 생길 수 있어. 특히 복잡한 그래픽이나 애니메이션을 다룰 때는 성능 최적화가 중요해! 🏎️

1. 객체 생성 최소화하기

onDraw() 메서드는 자주 호출되기 때문에, 이 안에서 새 객체를 생성하면 가비지 컬렉션에 부담을 줘. 객체는 미리 생성해두자!

// 나쁜 예 - onDraw()에서 객체 생성
@Override
protected void onDraw(Canvas canvas) {
    Paint paint = new Paint();  // 매번 새 Paint 객체 생성 - 비효율적!
    paint.setColor(Color.RED);
    canvas.drawCircle(100, 100, 50, paint);
}

// 좋은 예 - 객체 재사용
private Paint paint;  // 클래스 멤버 변수로 선언

private void init() {
    paint = new Paint();  // 초기화 시 한 번만 생성
    paint.setColor(Color.RED);
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawCircle(100, 100, 50, paint);  // 기존 객체 재사용
}

2. 클리핑 활용하기

화면에 보이는 부분만 그리면 성능이 향상돼. canvas.clipRect()를 사용해 그리기 영역을 제한할 수 있어:

@Override
protected void onDraw(Canvas canvas) {
    // 화면에 보이는 영역만 클리핑
    Rect visibleRect = new Rect();
    if (getGlobalVisibleRect(visibleRect)) {
        canvas.clipRect(visibleRect);
        
        // 클리핑된 영역 내에서만 그리기 작업 수행
        // ...
    }
}

3. 하드웨어 가속 활용하기

안드로이드는 하드웨어 가속을 통해 그리기 작업을 GPU로 처리할 수 있어. 대부분의 경우 성능이 향상되지만, 일부 Canvas 메서드는 하드웨어 가속을 지원하지 않아:

// 뷰에 하드웨어 가속 활성화
setLayerType(LAYER_TYPE_HARDWARE, null);

// 특정 작업에만 하드웨어 가속 사용
canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
// 그리기 작업 수행
// ...
canvas.restore();

4. 불필요한 invalidate() 호출 줄이기

변경된 부분만 다시 그리도록 invalidate(Rect)를 사용하자:

// 전체 뷰 다시 그리기 - 비효율적일 수 있음
invalidate();

// 변경된 영역만 다시 그리기 - 더 효율적
Rect dirtyRect = new Rect(x - radius, y - radius, x + radius, y + radius);
invalidate(dirtyRect);

5. 계산 결과 캐싱하기

반복적인 계산 결과는 캐싱해두면 성능이 향상돼:

// 자주 사용하는 계산 결과 캐싱
private Path cachedPath;
private boolean pathNeedsUpdate = true;

private void updatePath() {
    if (pathNeedsUpdate) {
        cachedPath = new Path();
        // 복잡한 경로 계산...
        cachedPath.moveTo(x1, y1);
        cachedPath.lineTo(x2, y2);
        // ...
        pathNeedsUpdate = false;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    updatePath();
    canvas.drawPath(cachedPath, paint);
}

6. 그림자와 블러 효과 주의하기

그림자나 블러 같은 효과는 성능에 영향을 줄 수 있어. 꼭 필요한 경우에만 사용하자:

// 비용이 많이 드는 블러 효과
paint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL));

// 대안: 미리 계산된 이미지 사용하거나, 간단한 그라데이션으로 대체
paint.setShader(new LinearGradient(x, y, x, y + height, 
                                   Color.BLACK, Color.TRANSPARENT, 
                                   Shader.TileMode.CLAMP));

7. 프로파일링 도구 활용하기

안드로이드 스튜디오의 프로파일링 도구를 사용해 성능 병목을 찾아보자:

// 디버그 빌드에서만 프로파일링 코드 추가
if (BuildConfig.DEBUG) {
    long startTime = System.nanoTime();
    // 성능을 측정할 코드
    // ...
    long endTime = System.nanoTime();
    Log.d("Performance", "Operation took " + (endTime - startTime) / 1000000 + " ms");
}

성능 최적화는 사용자 경험에 직접적인 영향을 미쳐. 부드러운 애니메이션과 반응성 좋은 UI는 앱의 품질을 높이는 중요한 요소야. 재능넷에서 안드로이드 앱 개발 서비스를 제공한다면, 이런 성능 최적화 기술을 적용해 더 높은 품질의 결과물을 제공할 수 있을 거야! 💪

10. 실전 예제: 커스텀 차트 뷰 만들기 📊

지금까지 배운 내용을 종합해서 실제로 유용한 커스텀 뷰를 만들어보자! 간단한 막대 차트를 구현해볼 거야. 🎯

커스텀 막대 차트 뷰 구현

데이터를 시각적으로 표현하는 막대 차트를 만들어보자:

public class BarChartView extends View {
    // 차트 데이터
    private List<BarData> dataList = new ArrayList<>();
    
    // 페인트 객체들
    private Paint barPaint;
    private Paint textPaint;
    private Paint gridPaint;
    
    // 차트 영역 설정
    private RectF chartRect;
    private float maxValue = 100f;
    private int barCount = 0;
    
    // 애니메이션 관련
    private ValueAnimator animator;
    private float animProgress = 0f;
    
    // 데이터 클래스
    public static class BarData {
        String label;
        float value;
        int color;
        
        public BarData(String label, float value, int color) {
            this.label = label;
            this.value = value;
            this.color = color;
        }
    }
    
    // 생성자
    public BarChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        // 막대 그리기용 페인트
        barPaint = new Paint();
        barPaint.setAntiAlias(true);
        
        // 텍스트 그리기용 페인트
        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextSize(30);
        textPaint.setAntiAlias(true);
        
        // 그리드 그리기용 페인트
        gridPaint = new Paint();
        gridPaint.setColor(Color.LTGRAY);
        gridPaint.setStrokeWidth(1);
        gridPaint.setStyle(Paint.Style.STROKE);
        
        // 차트 영역 초기화
        chartRect = new RectF();
    }
    
    // 데이터 설정 메서드
    public void setData(List<BarData> data) {
        this.dataList = data;
        barCount = data.size();
        
        // 최대값 찾기
        maxValue = 0;
        for (BarData bar : data) {
            if (bar.value > maxValue) {
                maxValue = bar.value;
            }
        }
        
        // 애니메이션 설정
        setupAnimation();
        
        invalidate();
    }
    
    private void setupAnimation() {
        // 이전 애니메이션 취소
        if (animator != null && animator.isRunning()) {
            animator.cancel();
        }
        
        // 새 애니메이션 설정
        animator = ValueAnimator.ofFloat(0f, 1f);
        animator.setDuration(1000);  // 1초 동안 애니메이션
        animator.setInterpolator(new DecelerateInterpolator());  // 감속 효과
        
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animProgress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        
        // 애니메이션 시작
        animator.start();
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        
        // 차트 영역 설정 (여백 고려)
        float left = getPaddingLeft() + 50;
        float top = getPaddingTop() + 50;
        float right = w - getPaddingRight() - 50;
        float bottom = h - getPaddingBottom() - 100;
        
        chartRect.set(left, top, right, bottom);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        if (dataList.isEmpty()) {
            return;
        }
        
        // 배경 그리드 그리기
        drawGrid(canvas);
        
        // 각 막대 그리기
        float barWidth = chartRect.width() / barCount * 0.7f;
        float spacing = chartRect.width() / barCount * 0.3f;
        
        for (int i = 0; i < dataList.size(); i++) {
            BarData data = dataList.get(i);
            
            // 막대 위치 계산
            float left = chartRect.left + (i * (barWidth + spacing)) + spacing / 2;
            float top = chartRect.bottom - (chartRect.height() * (data.value / maxValue) * animProgress);
            float right = left + barWidth;
            float bottom = chartRect.bottom;
            
            // 막대 그리기
            barPaint.setColor(data.color);
            canvas.drawRect(left, top, right, bottom, barPaint);
            
            // 라벨 그리기
            textPaint.setTextAlign(Paint.Align.CENTER);
            canvas.drawText(data.label, left + barWidth / 2, bottom + 40, textPaint);
            
            // 값 그리기
            String valueText = String.valueOf((int)(data.value * animProgress));
            canvas.drawText(valueText, left + barWidth / 2, top - 10, textPaint);
        }
    }
    
    private void drawGrid(Canvas canvas) {
        // 수평 그리드 라인 그리기
        int gridCount = 5;
        for (int i = 0; i <= gridCount; i++) {
            float y = chartRect.top + (chartRect.height() / gridCount * i);
            canvas.drawLine(chartRect.left - 10, y, chartRect.right, y, gridPaint);
            
            // 눈금 값 표시
            float value = maxValue - (maxValue / gridCount * i);
            textPaint.setTextAlign(Paint.Align.RIGHT);
            canvas.drawText(String.valueOf((int)value), chartRect.left - 15, y + 10, textPaint);
        }
        
        // 차트 테두리 그리기
        canvas.drawRect(chartRect, gridPaint);
    }
    
    // 터치 이벤트 처리 (막대 선택 기능)
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            float x = event.getX();
            float y = event.getY();
            
            // 어떤 막대를 터치했는지 확인
            float barWidth = chartRect.width() / barCount * 0.7f;
            float spacing = chartRect.width() / barCount * 0.3f;
            
            for (int i = 0; i < dataList.size(); i++) {
                float left = chartRect.left + (i * (barWidth + spacing)) + spacing / 2;
                float right = left + barWidth;
                
                if (x >= left && x <= right && y >= chartRect.top && y <= chartRect.bottom) {
                    // 막대 선택 처리
                    Toast.makeText(getContext(), 
                                  dataList.get(i).label + ": " + dataList.get(i).value, 
                                  Toast.LENGTH_SHORT).show();
                    return true;
                }
            }
        }
        
        return super.onTouchEvent(event);
    }
}

커스텀 차트 뷰 사용하기

이제 만든 차트 뷰를 액티비티에서 사용해보자:

// XML 레이아웃에 차트 뷰 추가
<com.example.myapp.BarChartView
    android:id="@+id/barChart"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:padding="16dp" />

// 액티비티에서 데이터 설정
BarChartView barChart = findViewById(R.id.barChart);

List<BarChartView.BarData> data = new ArrayList<>();
data.add(new BarChartView.BarData("1월", 45, Color.RED));
data.add(new BarChartView.BarData("2월", 72, Color.GREEN));
data.add(new BarChartView.BarData("3월", 58, Color.BLUE));
data.add(new BarChartView.BarData("4월", 93, Color.MAGENTA));
data.add(new BarChartView.BarData("5월", 65, Color.YELLOW));
data.add(new BarChartView.BarData("6월", 80, Color.CYAN));

barChart.setData(data);

이 예제는 다음과 같은 기능을 포함하고 있어:

1. 데이터에 따른 막대 그래프 표시
2. 애니메이션 효과 (막대가 아래에서 위로 자라나는 효과)
3. 그리드 라인과 눈금 표시
4. 막대 터치 시 해당 데이터 정보 표시

이런 커스텀 차트는 데이터 시각화가 필요한 앱에서 정말 유용해! 재능넷에서 데이터 분석이나 비즈니스 앱 개발 관련 재능을 판매한다면, 이런 커스텀 차트 구현 능력은 클라이언트에게 큰 가치를 제공할 수 있을 거야. 📈

마무리: 커스텀 뷰의 무한한 가능성 🌟

지금까지 안드로이드에서 Canvas와 Paint 클래스를 활용한 커스텀 뷰 만들기에 대해 알아봤어! 정말 많은 내용을 다뤘지? 😊

커스텀 뷰는 안드로이드 개발에서 창의성을 발휘할 수 있는 가장 강력한 도구 중 하나야. 기본 UI 컴포넌트로는 표현하기 어려운 독특한 디자인이나 인터랙션을 구현할 수 있지. 네가 상상할 수 있는 거의 모든 UI를 Canvas와 Paint로 구현할 수 있다고 봐도 과언이 아니야! 🎨

이 글에서 다룬 내용을 정리해보면:

1. 커스텀 뷰의 기본 개념과 구조
2. Canvas와 Paint 클래스의 역할과 사용법
3. 도형, 텍스트, 이미지 그리기
4. 애니메이션 구현하기
5. 터치 이벤트 처리하기
6. 성능 최적화 팁
7. 실전 예제: 커스텀 차트 뷰 만들기

이제 너도 멋진 커스텀 뷰를 만들 준비가 됐어! 처음에는 간단한 도형부터 시작해서 점점 복잡한 UI로 발전시켜 나가보는 걸 추천해. 연습을 통해 실력이 쌓이면 정말 놀라운 UI를 만들 수 있을 거야. 🚀

재능넷에서 안드로이드 개발 관련 재능을 공유하거나 구매하려는 분들에게 이 글이 도움이 됐으면 좋겠어. 특히 UI/UX에 관심 있는 개발자라면 커스텀 뷰 제작 능력을 키워두면 정말 큰 경쟁력이 될 거야! 💪

더 많은 프로그래밍 지식과 팁을 얻고 싶다면 재능넷의 다른 글들도 참고해보길 바라! 또 다른 흥미로운 주제로 곧 다시 만나자! 👋