안드로이드 그래픽(Graphic)

---

1. 그래픽

안드로이드에서는 그래픽 기능과 애니메이션을 지원한다.

2차원 그래픽과 3차원 그래픽을 지원하는데 이번 포스팅에서는 2차원 그래픽을 알아보자.

커스텀 뷰 클래스를 작성하여 각종 도형 및 텍스트, 이미지 등을 화면에 그려보자.

 

1) 커스텀 뷰를 사용하여 그리기

안드로이드에서는 그래픽 기능과 애니메이션을 지원한다.

커스텀 뷰 클래스를 작성하고 onDraw() 메서드를 재정의하여 화면에 그림을 그려보자.

커스텀 뷰를 사용하여 그리기를 구현하는 경우 다음과 같은 구조를 갖는다.

class MyView extends View {

    public MyView(Context context) {
        super(context);
        setBackgroundColor(Color.BLUE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        // 그림을 그리는 코드 작성
    }
}
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // MyView를 생성하고 Activity의 컨텐츠뷰로 설정
        MyView myView = new MyView(this);
        setContentView(myView);
    }
}

 

2) Canvas 클래스와 Point 클래스

안드로이드에서 그림을 그리기 위해 다음과 같은 2개의 클래스가 필요하다.

 

• Canvas 클래스
  그림을 그리는 캔버스에 해당하며 도형, 이미지, 텍스트 들을 그리는 다양한 메서드를 가지고 있다.
  그림이 캔버스의 경계를 벗어나지 않도록 잘라주는 클리핑 기능도 제공한다.
  캔버스의 크기는 getWidth(), getHeight() 메서드를 통하여 얻을 수 있다. 
• Paint 클래스
  그림을 그리는 물감과 붓에 해당하며 색상이나 선의 스타일, 채우기 스타일, 폰트, 안티에일리어싱 여부 등과 같은 그리기 속성을 갖고 있다.
  항상 Paint 객체를 마지막 매개변수로 하여 호출되어야 한다.

 

3) 기본 도형을 그리는 메서드

점, 직선, 사각형, 타원, 텍스트 등을 그릴 수 있는 메서드들을 Canvas 클래스가 제공한다.

다음과 같은 각 메서드와 매개변수의 이름을 보고 사용해보자.

 

• drawPoint(float x, float y, Paint paint)
  (x, y) 위치에 점을 그린다.
• drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
  (startX, startY)부터 (stopX, stopY)까지 직선을 그린다.
• drawRect(foat left, float top, float right, float bottom, Paint paint)
  좌측 상단이 (left, top)이고 우측 하단이 (right, bottom)인 사각형을 그린다.
• drawCircle(float cs, float cy, float radius, Paint paint)
  중심이 (cx, cy)이고 반지금이 radius인 원을 그린다.
• drawText(String text, float x, float y, Paint paint)
  (x, y) 위치에 텍스트를 그린다.

 

4) 복잡한 도형을 그리는 메서드

앞서 살펴본 기본 도형보다는 좀 더 복잡한 도형을 그리는 메서드를 살펴보자.

다음과 같은 각 메서드와 매개변수의 이름을 보고 사용해보자.

 

• drawRoundRect(RectF rect, float rx, float ry, Paint paint)
  둥근 사각형을 그리는 메서드.
  RectF는 사각형 객체, rx와 ry는 사각형 모서리 부분의 반지름이다.
• drawOval(RectF oval, Paint paint)
  drawOval()은 oval에 내접하는 타원을 그린다.
  paint 스타일에 따라 채워지거나 외곽선만 그려진다.
• drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
  oval 안에 그려지는 원호.
  startAngle에서 시작해서 sweepAngle까지 원호를 그린다.
  각도의 단위는 degree이며 시계방향으로 증가한다.
  만약 sweepAngle이 360보다 크면 타원이 전부 그려진다.
  만약 useCenter가 true면 원점을 포함하여 쐐기 모양으로 그려진다.
• drawLines(float[] pts, Paint paint)
  연속된 직선을 그린다.
  각 직선은 pts 배열에서 연속된 4개의 값을 취하여 그려진다.
  1개의 직선을 그리기 위해서 적어도 4개의 값을 가지고 있어야 한다.
• drawColor(int Color)
  캔버스의 전체 비트맵을 지정된 색상으로 채운다.

---

2. 도형 그리기 예제

앞서 살펴본 내용을 바탕으로 기본 도형과 복잡한 도형을 그리는 예제를 작성해보자.

다음과 같이 MainActivity.java 의 코드 내용을 작성한다.

class MyView extends View {

    public MyView(Context context) {
        super(context);
        setBackgroundColor(Color.BLUE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setColor(Color.YELLOW);

        paint.setStrokeWidth(20);

        // basic
        canvas.drawLine(100, 100, 700, 100, paint);
        canvas.drawRect(100, 300, 700, 700, paint);
        canvas.drawCircle(300, 1000, 100, paint);
        paint.setTextSize(80);
        canvas.drawText("This is Test", 100, 800, paint);

        // extend
        canvas.drawRoundRect(new RectF(30, 1300, 330, 1400), 15, 15, paint);
        canvas.drawOval(new RectF(450, 1300, 750, 1400), paint);
        paint.setColor(Color.RED);
        canvas.drawArc(new RectF(500, 1500, 750, 1700), 360, 1000, true, paint);
        float[] pts = {30, 1550, 300, 1650, 300, 1650, 100, 1750, 100, 1750, 360, 1800};
        paint.setStrokeWidth(10);
        canvas.drawLines(pts, paint);
        super.onDraw(canvas);
    }
}
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MyView myView = new MyView(this);
        setContentView(myView);
    }
}

 

View 클래스를 상속받아서 사용자 정의 뷰인 MyView를 정의하였다.

MyView에서는 onDraw() 메서드를 재정의하여 화면을 다시 그릴 때 자동으로 호출한다.

onDraw() 메서드에 그림을 그리는 코드를 넣어 Line, Rect, Circle 등을 그려준다.

결과는 다음과 같다.

이와 같이 다양한 도형을 그릴 수 있다.