[Android] 2D 그래픽스 기초

오래간만에 블로그 포스팅을 한다...

최근에 Custom View에 관심을 가지면서 스터디를 한 내용을 정리해야 하는데... 역시 블로그가 가장 만만하군..

안드로이드에서는 이미 많은 기본 View들을 제공하지만 지원하지 않는 애니메이션등 여러가지 효과를 구현하기 위해서는 직접 자신만의 View를 구현할 필요가 있다.

자신만의 View를 만들기 위해서는 상속받아야 하는 클래스를 찾아야 한다. 안드로이드의 기본 컴포넌트들을 찾아보면 모두 기본적으로 View클래스를 상속 받았음을 알 수 있다.

우리가 지금부터 만들어 볼 View역시 View클래스를 상속받아 만들도록 한다.

 
package com.cashyalla.graphics;

import android.content.Context;
import android.view.View;

public class FirstCustomView extends View {

	public FirstCustomView(Context context) {
		super(context);
	}
	
}

위와 같이 View를 상속받는 클래스를 만들게 되면 부모 클래스의 생성자를 오버라이드 할 필요가 있다. View에는 세가지의 생성자가 존재하는데 View(Context context) 외의 나머지 생성자들은 xml에서 해당 View를 생성할 때 사용되므로 여기서는 오버라이드를 할 필요는 없다.

생성자 외에 우리가 구현해야 할 부모 클래스의 두 가지 메소드가 있다.

onLayout(boolean changed, int left, int top, int right, int bottom)

Called from layout when this view should assign a size and position to each of its children. 

onDraw(Canvas canvas)

Implement this to do your drawing.

 
바로 위의 두 메소드이다.

onLayout은 반드시 상속 받아야 하는것은 아니지만 처음 하는 것이니 그냥 해보도록 한다.
기능은 Api문서에 나와 있듯이 해당 View의 사이즈와 위치가 할당 되었을 때 호출것이다. 즉 이 메소드가 호출 되고 나서야 우리가 구현하는 View의 사이즈를 알 수 있다. 생성자에서 getWidth(), getHeight() 메소드를 호출하여 값을 출력해 보면 두 값 모두 0이 출력되지만 super의 onLayout을 호출 한 이후의 getWidth(), getHeight()의 값은 실제 View의 크기를 출력하게 된다.

onDraw는 실제 LCD에 그림을 그리는 기능을 수행한다. 인자로 넘어오는 canvas가 바로 우리가 그림을 그릴 도화지 역할을 하게 된다. Canvas클래스 안에는 실제 그리기를 수행하는데 도움을 주는 메소드들이 내장되어 있다. 바로 draw* 로 시작하는 메소드들인데 이번 포스트에서 사용해 볼 메소드들은

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
Draw the specified arc, which will be scaled to fit inside the specified oval.

drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
Draw the specified bitmap, with its top/left corner at (x,y), using the specified paint, transformed by the current matrix.

drawCircle(float cx, float cy, float radius, Paint paint)
Draw the specified circle using the specified paint.

drawColor(int color)
Fill the entire canvas' bitmap (restricted to the current clip) with the specified color, using srcover porterduff mode.

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
Draw a line segment with the specified start and stop x,y coordinates, using the specified paint.

drawPoint(float x, float y, Paint paint)
Helper for drawPoints() for drawing a single point.

drawRect(Rect r, Paint paint)

Draw the specified Rect using the specified Paint.

정도이다.. 메소드 이름들이 참 알기쉬워서 좋다. 말 그대로 호, bitmap이미지, 원, 색, 선, 점, 도형을 그린다는 뜻이다.

알아볼 만큼 알아봤으니 이제 실제 그리기를 구현해 보도록 한다.

 

package com.cashyalla.graphics;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.view.View;

public class FirstCustomView extends View {

	private Paint mPaint;
	private Bitmap mBitmap;
	private Rect mRect;
	private RectF mRectF;
	
	public FirstCustomView(Context context) {
		super(context);
	}
	
	/**
	 * 
	 * View의 크기가 결전되면 이 메소드가 호출이 된다.
	 * changed -> 새로운 View인지 변경되는 View인지 판단
	 * left -> left좌표
	 * top -> top좌표
	 * right -> right좌표
	 * bottom -> bottom좌표
	 * right - left = View의 width값이 된다.
	 * bottom - top = View의 height값이 된다.
	 * 
	 */
	@Override
	protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);
		
		// 화면의 크기가 정해진 후 객체들의 초기화를 진행한다.
		mPaint = new Paint();
		// 리소스로부터 이미지를 가져온다. 여기서는 기본 아이콘을 이미지로 사용한다.
		mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
		// 사각형을 그리기 위한 Rect클래스를 생성한다.
		mRect = new Rect(10, 10, 100, 100);
		// 호를 그리기 위한 RectF클래스를 생성한다.
		mRectF = new RectF(110, 10, 200, 100);
	}
	
	/**
	 * 
	 * 이곳에서 실 제 그리기를 수행한다.
	 * 인자로 넘어오는 canvas가 실제 그림을 그릴 도화지 이다.
	 * 
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		// View의 화면 전체를 흰색으로 칠한다.
		canvas.drawColor(Color.WHITE);
		// 사각형을 그리기 전에 페인트를 빨간색으로 설정한다.
		mPaint.setColor(Color.RED);
		// 설정된 페인트를 사용하여 사각형을 그린다.
		canvas.drawRect(mRect, mPaint);
		// View의 좌측 하단에 아이콘을 그린다.
		canvas.drawBitmap(mBitmap, 0, getHeight() - mBitmap.getHeight(), null);
		// 파란색의 호를 그리겠다.
		mPaint.setColor(Color.BLUE);
		// 첫번째 인자 RectF는 호가 그려질 영역이며
		// 두번째 인자는 시작 각도
		// 세번째 인자는 실제 호의 각도
		// 네번째 인자는 호의 중심을 그릴것인가 그리지 않을 것인가
		// 다섯번째 인자는 호를 그리는데 사용할 페인트이다.
		// 네번째 인자를 false로 바꾸어서도 그려보도록 한다.
		canvas.drawArc(mRectF, 0, 90, true, mPaint);
		// 검정색 원을 그리기 위해 색을 설정한다.
		mPaint.setColor(Color.BLACK);
		// 첫번째, 두번째 인자는 원의 중심점을 가리킨다.
		// 세번째 인자는 원의 반지름... 네번째 인자는...
		canvas.drawCircle(getWidth() / 2, getHeight() / 2, 50, mPaint);
		// 색을 지정하는 방법은 다양하다..
		mPaint.setColor(Color.parseColor("#148CFF"));
		// 그림을 그릴 때 그리는 점의 크기를 변경할 수 있다.
		mPaint.setStrokeWidth(5);
		// x 300, y 30지점에 점을 찍는다. 굵기는 5
		canvas.drawPoint(300, 30, mPaint);
		// rgb색상값을 직접 입력하여 색을 지정한다. 0~255
		mPaint.setColor(Color.rgb(128, 128, 128));
		// 첫 두개의 인자는 선의 시작 점의 위치
		// 3, 4번째의 인자는 선의 종료 점의 위치이다..
		canvas.drawLine(0, getHeight() / 2, getWidth() / 2, getHeight(), mPaint);
	}
	
}

package com.cashyalla.graphics;

import android.app.Activity;
import android.os.Bundle;

public class GraphicsActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new FirstCustomView(this));
    }
}

Activity에서 우리가 만든 View를 사용하도록 설정 하는것도 잊지말자! 기본 도형을 그리는 데에는 그리 큰 어려움은 없었다.. 

다음에는 어떤 포스팅을 언제 하게 될지는 모르겠다..

점점 게을러지는듯...