(안드로이드) 42 - 그래픽(Graphic) 1 - Canvas, Paint, Drawable

1. 화면에 그래픽 그리기

---

안드로이드에서 뷰(View) 혹은 뷰(View)를 상속하여 만드는 화면 구성 요소는 정해진 과정을 거친 후에 화면에 표시된다. 이 과정에 대해 알기위해서 뷰가 화면에 표시되기 이전에 그래픽으로 그려지는 방법을 이해해야한다.

먼저 간단한 예제를 통해서 뷰를 상속받은 CustomView 클래스를 만들어 간단한 그래픽을 그려준 후 화면에 표시하면서 과정을 이해해보자.

<CustomView.java\>

public class CustomView extends View {

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint(); //페인트 객체 생성
        paint.setColor(Color.RED); //페인트 색 지정

        /*왼쪽 위 꼭짓점이 (100, 100)이고 오른쪽 아래 꼭지점이 (200, 200)인 사각형
        * Paint 객체의 Style은 default 값이 Style.FILL이므로 내부가 채워지도록 그려진다*/
        canvas.drawRect(100, 100, 200, 200, paint);

        /* 중심이 (150, 400)이고 지름이 100인 원을 내부가 비워진 형태로 그리기 */
        paint.setStyle(Paint.Style.STROKE); //STROKE 스타일로 그리기
        paint.setStrokeWidth(2.0F); //STROKE 두께 지정
        canvas.drawCircle(150, 400, 100, paint); //원 그리기

        /* 텍스트 그리기 */
        paint.setTextSize(100);
        paint.setColor(Color.MAGENTA);
        canvas.drawText("안드로이드", 100, 800, paint);
    }
}

모든 View 객체는 화면에 보이기 전에 onDraw(Canvas canvas) 메소드가 호출된다. 이 때 파라미터로 전달되는 Canvas 객체의 여러가지 메소드를 이용해 Canvas객체 위에 그래픽을 그릴 수 있다. 이 때 Paint 객체도 정의해주어야한다. Canvas는 그림을 그릴 도화지와 같고 Paint는 물감과 같은 개념인 것이다.

이제 직접 그래픽을 그린 뷰를 화면에 보이도록 하기위해 메인 액티비티에서 setContentView() 메소드로 전달되는 뷰를 방금 정의한 뷰 클래스로 지정해준다.

setContentView(new CustomView(this));

이렇게 하고 앱을 실행하면 아래와 같이 빨간색 사각형이 그려진 화면을 볼 수 있다.

위의 예제에서는 그래픽을 그리기위한 과정이 단계별로 적용되어 있다.

1. View 클래스 상속하여 커스텀뷰 만들기
2. 페인트 객체 생성
3. onDraw() 메소드 재정의
4. 뷰 객체 로드하여 화면에 띄우기

2. 그리기 객체(Drawable)

---

모든 그래픽 요소는 그리기 객체의 형태로 만들어서 그릴 수 있다. Canvas의 그리기 메소드들을 사용하면 사각형, 원 등부터 심지어 비트맵 이미지도 그릴 수 있는데, 굳이 그리기 객체를 만드는 이유는 무엇일까? 그리기 객체를 만들어 페인트부터 그래픽의 모양, 범위 등등의 속성들을 지정하여 하나의 그리기 객체로 만들어두면 독립적인 객체로 관리할 수 있기 때문이다.

이번에도 그리기 객체를 직접 만들어 사용해보며 과정을 이해하자.

public class CustomViewDrawables extends View  {

    private ShapeDrawable upperDrawable;
    private ShapeDrawable lowerDrawable;

    public CustomViewDrawables(Context context) {
        super(context);

        /* 이 코드는 디바이스 스크린 크기정보를 가져오는 일반적인 방법이다.*/
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display display = manager.getDefaultDisplay();
        Point sizePoint = new Point();
        display.getSize(sizePoint);
        int width = sizePoint.x;
        int height = sizePoint.y;

        /* /res/values/color.xml 파일에 정의 된 색 정보 가져오기*/
        Resources curRes = getResources();
        int blackColor = curRes.getColor(R.color.color01);
        int grayColor = curRes.getColor(R.color.color02);
        int darkGrayColor = curRes.getColor(R.color.color03);

        /*upperDrawable객체를 사각형모양으로, 범위는 화면의 2/3로 지정*/
        upperDrawable = new ShapeDrawable();
        RectShape rectangle = new RectShape();
        rectangle.resize(width, height*2/3);
        upperDrawable.setShape(rectangle);
        upperDrawable.setBounds(0, 0, width, height*2/3);

        /*grad 객체를 upperDrawable 객체의 페인트 쉐이더로 지정*/
        LinearGradient grad = new LinearGradient(0, 0, 0, height*2/3, grayColor, blackColor, Shader.TileMode.CLAMP);
        Paint paint = upperDrawable.getPaint();
        paint.setShader(grad);

        /*lowerDrawable객체를 사각형모양으로, 범위는 화면의 1/3로 지정*/
        lowerDrawable = new ShapeDrawable();
        RectShape rectangle2 = new RectShape();
        rectangle2.resize(width, height*1/3);
        lowerDrawable.setShape(rectangle2);
        lowerDrawable.setBounds(0, height*2/3, width, height);

        /*grad2 객체를 lowerDrawable 객체의 페인트 쉐이더로 지정*/
        LinearGradient grad2 = new LinearGradient(0, 0, 0, height*1/3, blackColor, darkGrayColor, Shader.TileMode.CLAMP);
        Paint paint2 = lowerDrawable.getPaint();
        paint2.setShader(grad2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        upperDrawable.draw(canvas); //upperDrawable 객체 그리기
        lowerDrawable.draw(canvas); //lowerDrawable 객체 그리기
    }
}

ShapeDrawable은 도형을 정의할 때 사용하는 Shape 객체를 그릴 때 사용하는 Drawable 객체이다. 위 코드에서는 ShapeDrawable 객체를 두 개 만들었다. 각각의 Drawable 그리기 객체는 아래의 과정을 통해 정의되었다.

1. 휴대전화의 크기 정보를 가져와 width, height 변수로 참조한다.
2. 리소스에 직접 정의한 컬러 정보를 가져와서 blackColor, grayColor, darkGrayColor 변수로 참조한다.
3. Shape객체를 만들어 도형 정보를 정의하고 upperDrawable 객체의 모양으로 설정한다. 그리고 그리기 객체의 Bound를 설정해준다.
4. LinearGradient 객체를 사용해 쉐이더 정보를 설정한다.
5. upperDrawable의 페인트 객체를 가져와 LinearGradient 객체를 쉐이더로 설정한다.

이제 위에서 정의한 그리기 객체를 onDraw() 메소드 안에서 캔버스 위에 그린다. 이후 메인액티비티에서 setContentView() 메소드를 사용해서 화면에 나타내고 앱을 실행해보면 다음의 화면을 확인할 수 있다.

그리기 객체는 한 번 만들어놓으면 독립적으로 관리를 할 수 있고 몇 번이고 가져다가 쓸 수 있다.