뷰에 그래픽 그리기
안드로이드에서 그래픽을 사용할 때 자바와의 차이점은 그래픽스(Graphics) 객체가 아니라 캔버스(Canvas) 객체에 그려야 한다는 것이다.
일반적으로 뷰를 그리는 단계는 아래와 같다.
| 구분 | 설명 |
|---|---|
| 1단계 | 새로운 클랫를 만들고 뷰를 상속 받는다. |
| 2단계 | 페인트 객체를 초기화하고 필요한 속성을 설정한다. |
| 3단계 | onDraw 메서드 내에 사각형을 그리는 메서드를 호출한다. |
| 4단계 | onTouchEvent 메서드 내에서 터치 이벤트를 처리하는 코드를 넣는다. |
| 5단계 | 새로 만든 뷰를 메인 액티비티에 추가한다. |
화면에 빨간 사각형 그리기
그래픽을 새로 그려주기 위해 CustomView를 정의 해줍니다.
CustomView.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class CustomView extends View {
private Paint paint;
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
paint = new Paint();
paint.setColor(Color.RED);
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawRect(100, 100, 200 , 200, paint); // 사각형 그리기
}
@Override
public boolean onTouchEvent(MotionEvent event){
if(event.getAction() == MotionEvent.ACTION_DOWN){
Toast.makeText(super.getContext(), "MotionEvent.ACTION_DOWN: " +
event.getX() + ", " + event.getY(), Toast.LENGTH_LONG).show();
}
return super.onTouchEvent(event);
}
}
페인트 객체는 그래픽을 그리기 위해 필요한 속성을 담고 있다.
Paint 자료형으로 된 변수를 하나 선언하고 init 메서드 안에서 객체를 생성한다.
onDraw 메서드는 뷰가 화면에 그려질 때 자동으로 호출된다.
따라서 뷰에 그래픽을 그리기 위해서는 onDraw 메서드 안에서 재정의하여 사용한다
onTouchEvent 메서드는 터치 이벤트를 처리하는 일반적인 방법을 제공한다.
onTouchEvent 메서드 또한 부모 클래스인 View 클래스의 것을 재정의하여 사용한다.
MainActivity.java
1
2
3
4
5
6
7
8
9
10
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CustomView view = new CustomView(this);
setContentView(view);
}
}
결과
그래픽을 그릴 때 필요한 클래스와 메서드
| 클래스 | 설명 |
|---|---|
| 캔버스(Canvas) | 뷰의 표면에 직접 그릴 수 있도록 만들어 주는 객체로 그래픽 그리기를 위한 메서드가 정의 되어 있다. |
| 페인트(Paint) | 그래픽 그리기를 위해 필요한 색상 등의 속성을 담고 있다. |
| 비트맵(bitmap) | 픽셀로 구성된 이미지로 메모리에 그래픽을 그리는 데 사용한다. |
| 드러어블 객체(Drawable) | 사각형, 이미지 등의 그래픽 요소가 객체로 정의되어 있다. |
여러가지 도형 그리기
MainActivity.java
1
2
3
4
5
6
7
8
9
10
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CustomViewStyle view = new CustomViewStyle(this);
setContentView(view);
}
}
CustomViewStyle.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
public class CustomViewStyle extends View {
Paint paint;
public CustomViewStyle(Context context) {
super(context);
init(context);
}
public CustomViewStyle(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
paint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setStyle(Paint.Style.FILL); // 첫 번째 사각형을 Fill 스타일로 설정
paint.setColor(Color.RED);
canvas.drawRect(10, 10, 100, 100, paint);
paint.setStyle(Paint.Style.STROKE); // 두 번째 사각형을 Stroke 스타일로 설정하고 PathEffect 적용
paint.setStrokeWidth(2.0F); // 선의 두께
paint.setColor(Color.GREEN);
canvas.drawRect(10, 10, 100, 100, paint);
paint.setStyle(Paint.Style.FILL);
paint.setARGB(120, 0, 0, 255); // 투명도 설정
canvas.drawRect(120, 10, 210, 100, paint);
// 점선으로 그리고 싶을 경우에 사용
DashPathEffect dashEffect = new DashPathEffect(new float[]{5,5}, 1);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3.0F);
paint.setPathEffect(dashEffect);
paint.setColor(Color.GREEN);
canvas.drawRect(120, 10, 210, 100, paint);
paint = new Paint();
paint.setColor(Color.MAGENTA); // 첫 번째 원에 색상 적용
canvas.drawCircle(50,160,40,paint);
paint.setAntiAlias(true); // 두 번째 원에 AntiAlias (선을 부드럽게)
canvas.drawCircle(160,160,40,paint);
paint.setStyle(Paint.Style.STROKE); // 첫 번째 텍스트를 Stroke 스타일로 설정
paint.setStrokeWidth(1);
paint.setColor(Color.MAGENTA);
paint.setTextSize(30);
canvas.drawText("Text (Stroke)",20,260,paint);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(30);
canvas.drawText("Text", 20, 320, paint);
}
}
결과
