05. 그래픽 빨간색 사각형 그리기 그래픽 그리기 발 표 자 : 07 정 경 오

빨간색 사각형 그리기 그래픽 그리기 기능을 확인할 수 있는 가장 쉬운 방법은 뷰(View) 클래스를 상속한 후 이 뷰에 직접 그래픽을 그리는 것입니다. 다음은 빨간색 사각형을 화면에 그리기 위한 단계를 보여줍니다. 속성 설명 1단계 새로운 클래스를 만들고 뷰를 상속받습니다. 2단계 페인트 객체를 초기화하고 필요한 속성을 설정합니다. 3단계 onDraw() 메소드 내에 사각형을 그리는 메소드를 호출합니다. 4단계 onTouch() 메소드 내에 터치 이벤트를 처리하는 코드를 넣습니다. 5단계 새로 만든 뷰를 메인 액티비티에 추가합니다.

1단계 - 뷰 상속하기 새로운 CustomView 클래스는 View 클래스를 상속하도록 하고 Context 객체 하나를 파라미터로 전달받는 생성자 하나로 정의합니다.

2단계 - 페인트 객체 초기화하기 페인트 객체는 그래픽을 그리기 위해 필요한 속성을 담고 있습니다. 다음 예제에서는 페인트 객체를 하나 만든 후에 색상을 빨간색으로 설정합니다.

3단계 - onDraw() 메소드 구현하기 onDraw() 메소드는 뷰가 화면에 디스플레이 될 때 자동으로 호출됩니다. 따라서 뷰에 그래픽을 그리기 위해서는 onDraw() 메소드 안에서 캔버스 객체에 정의된 메소드들 중 원하는 것을 호출하여 그리면 됩니다. 다음 예제에서는 캔버스 객체에 정의된 그리기 메소드들 중에서 좌표값과 페인트 객체를 이용해서 사각형을 그리는 drawRect()를 사용합니다.

4단계 - onTouch() 메소드 구현하기 onTouch() 메소드는 터치 이벤트를 처리하는 일반적인 방법을 제공합니다. 다음 예제에서는 손가락으로 누른 곳의 X, Y 좌표값을 토스트 메시지로 잠깐 보여줍니다.

5단계 - 메인 액티비티에 추가하기 이렇게 새로 만든 CustomView 클래스를 메인 액티비티에 추가할 때는 new 연산자를 사용하여 객체를 하나 만든 후 setContentView() 메소드를 이용해 화면 전체에 보여줍니다.

실행 시 화면

그래픽 그리기 속성 설명 캔버스 (Canvas) 그래픽을 그리기 위해 필요한 주요 클래스들은 다음과 같습니다. 속성 설명 캔버스 (Canvas) 뷰의 표면에 직접 그릴 수 있도록 만들어 주는 객체로 그래픽 그리기를 위한 메소드가 정의되어 있습니다. 페인트 (Paint) 그래픽 그리기를 위해 필요한 색상 등의 속성을 담고 있습니다. 비트맵 (Bitmap) 픽셀로 구성된 이미지로 메모리 상에 그래픽을 그리는 데 사용합니다. 그리기 객체 (Drawable) 사각형, 이미지 등의 그래픽 요소가 객체로 정의되어 있습니다.

그래픽 그리기 예제 설명 다음 예제에서는 두 개의 사각형에 색상을 지정하여 채운 후 선으로 그리는 과정을 보여줍니다. 선의 두께를 설정할 때는 setStrokeWidth() 메소드를 사용하고, 투명도를 조절할 때는 setARGB() 메소드를 사용합니다. 점선으로 그리고 싶은 경우에는 안드로이드에서 제공하는 효과 중에서 DashPathEffect 클래스를 이용할 수 있습니다. 여기에서는 선이 그려지는 부분과 선이 그려지지 않는 부분이 각각 5의 크기로 지정되었습니다. 일반적인 선을 그릴 때는 drawLine(), 원을 그릴 때는 drawCircle() 메소드 그리고 텍스트는 drawText() 메소드를 이용할 수 있습니다. 부드럽게 선을 그리고 싶을 경우에는 setAntiAlias(true) 코드를 사용할 수 있으며, 원과 텍스트에 그 효과가 적용됩니다.

그래픽 그리기 - 1 - ①첫 번째 사각형을 Fill 스타일로 설정 ②첫 번째 사각형을 Stroke 스타일로 설정 설정하고 PathEffect 적용

그래픽 그리기 - 2 - ⑤첫 번째 원에 색상 적용 ⑥두 번째 원에 AntiAlias 설정 ⑦첫 번째 텍스트를 Stroke 스타일로 설정 ⑧두 번째 텍스트를 Fill 스타일로 설정 ⑨전체 사각형 중에서 Clipping 영역으로 설정한 사각형의 일부분 그리기

실행 시 화면

캔버스 객체를 이용해 호출할 수 있는 대표적인 메소드들 속성 설명 점 그리기 void drawPoint(float x, float y, Paint paint) 하나의 점을 그립니다. drawPoints()를 이용하면 여러 개의 점을 그릴 수 있습니다. 선 그리기 void drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 두 점의 X,Y 좌표값을 이용해 선을 그립니다. drawLines()를 이용하면 여러 개의 선을 그릴 수 있습니다. 사각형 그리기 void drawRect(float left, float top, float right, float bottom, Paint paint) 모서리의 좌표값을 이용해 사각형을 그립니다. 둥근 모서리의 void drawRoundRect(RectF rect, float rx, float ry, Paint paint) 사각 영역과 모서리 부분 타원의 반지름 값을 이용해 둥근 모서리의 사각형을 그립니다. 원 그리기 void drawCircle(float cx, float cy, float radius, Paint paint) 원의 중앙 좌표값과 반지름을 이용해 원을 그립니다. 타원 그리기 void drawOval(RectF oval, Paint paint) 사각 영역을 이용해 타원을 그립니다. 아크 그리기 void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 사각 영역과 각도를 이용해 아크를 그립니다. 패스 그리기 void drawPath(Path path, Paint paint) 패스 정보를 이용해 연결선 또는 부드러운 곡선을 그립니다. 비트맵 그리기 void drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 비트맵 이미지를 주어진 좌표값에 그립니다.