005. Example03_Canvas

이번 예제에서는 Canvas를 View로 가지는 프로그램을 작성해 보겠다.

 

앞의 예제에서는 MainActivity에서 setContentView의 파라미터로 xml형태의 파일을 View로 지정했었다. 따라서, xml에 View에 들어갈 컴퍼넌트와 그 레이아웃을 입력하면 되었었다.

 

이번에는 Canvas에 직접 그래프를 그리는 클래스를 작성하고, 이 View클래스를 MainActivity에서 setContentView로 지정하는 예제를 만들어 본다. 최종 완성되어 실해되는 모습은 다음과 같다.

 

 

 

1. 새 프로젝트 생성

"File - New - Other... - Android Application Project"를 하고, Application Name을 "AndroidEx3_Canvas"로 한다. 나머지는 디폴트 설정값 그대로 유지.

 

 

 2. CanvasView 클래스 생성

Package Explorer에서, src/com.example.androidex3_canvas를 선택하고 마우스 우클릭.

"New - Class"를 선택하고, 아래 다이얼로그 화면과 같이 입력

• Name = CanvasView
• Superclass = android.view.View
• Constructors from superclass항목 체크

 

Finish버튼을 누르게 되면, 다음과 같이 생성된 형태가 될 것이다.

 

 

 

이 상태에서 CanvasView클래스에 onDraw메서드를 추가하자

 

3. CanvasView의 onDraw메서드 작성

CanvasView가 생성될 때 onDraw메서드가 자동 수행된다.

위에서 만든 CanvasView클래스에 아래와 같은 내용으로 onDraw메서드를 코딩한다.

 protected void onDraw(Canvas canvas){
      Paint paint = new Paint();
  
      int w = canvas.getWidth();
      int h = canvas.getHeight();
  
      //draw circle
      paint.setColor(Color.RED);
      canvas.drawCircle(w/2, h/4, h/10, paint);
  
      paint.setColor(Color.GREEN);
      int len = h/10;
      canvas.drawRect(w/2 - len, h/2, w/2 + len, h/2 + len, paint);  
 }

 

4. MainActivity의 setContentView

MainActivity에 위에서 만든 CanvasView를 지정한다. setContentView메서드의 파라미터로 지정해주면 된다.

 

 

 

5. 실행해보기

AndroidEx3_Canvas프로젝트를 선택하고 마우스 우클릭.

"Run As - Run Configurations..."를 하고,

• 새로운 Run을 만들고,
• Name = ex3
• Project = AndroidEx3_Canvas
• Target탭의 Always prompt to pick device 체크

Apply하고 Run을 해서, 이 글 맨 위처럼 나오면 OK. 

 

전체 소스 

AndroidEx3_Canvas.zip

 

 

-끝-

AndroidEx3_Canvas.zip

0.61MB