[Android] Graphic 1: View 에 그래픽 그리기

화면에 추가할 수 있는 View 에는 다양한 그리기 방법을 적용할 수 있다. 표준 자바에서와 거의 동일한 방식으로 구성할 수 있지만 자바가 Graphics 객체에 그래픽을 그린다면, 안드로이드는 Canvas 객체에 그려야 한다는 것이 차이점이다.

 

별로 어려운 내용은 아니니, 예제와 함께 따라가 보자.

---

새로운 View를 생성하고 Graphic을 그리는 단계는 보통 5개 단계로 나눌 수 있다.

 

1. 새로운 클래스를 만들고 View를 상속받는다.

 

 우선, custom 패키지를 생성하고 그 아래에 View 객체를 상속받는 CustomView 클래스를 생성한다.

생성자를 추가한 뒤, 생성자를 초기화할 init() 메서드도 함께 작성한다.

 

◎custom.CustomView.java

package com.example.samplegraphic.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.Nullable;

public class CustomView extends View {

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

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {

    }

}

 

2. 페인트 객체 초기화하기

 

 페인트 객체는 그래픽을 그리기 위해 필요한 속성을 담고 있다. Paint 객체를 선언한 뒤, init() 메서드에서 이를 초기화하고 색상을 설정해주자.

 

◎custom.CustomView.java

package com.example.samplegraphic.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.Nullable;

public class CustomView extends View {

    // 그래픽을 그리기 위한 속성을 담고 있음
    private Paint paint;

    public CustomView(Context context) {
        super(context);
        init(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);

    }
    
}

 

3. onDraw() 콜백 메서드 구현

 

onDraw() 메서드는 뷰가 화면에 그려질 때 자동으로 호출된다. 따라서 뷰에 그래픽을 그리기 위해서는 onDraw() 메서드 안에서 원하는 그래픽을 그리면 된다.

 

◎custom.CustomView.java

package com.example.samplegraphic.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.Nullable;

public class CustomView extends View {

    // 그래픽을 그리기 위한 속성을 담고 있음
    private Paint paint;

    public CustomView(Context context) {
        super(context);
        init(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
    // View 가 화면에 그려질 때 호출되는 콜백
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(100, 100, 200, 200, paint);
    }
  }

 

4. onTouchEvent() 메서드 구현

 터치 이벤트를 처리하는 가장 일반적인 방법인 onTouchEvent를 구현한다.

 

◎custom.CustomView.java

package com.example.samplegraphic.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.Nullable;

public class CustomView extends View {

    // 그래픽을 그리기 위한 속성을 담고 있음
    private Paint paint;

    public CustomView(Context context) {
        super(context);
        init(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
    // View 가 화면에 그려질 때 호출되는 콜백
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(100, 100, 200, 200, paint);
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if(e.getAction() == MotionEvent.ACTION_DOWN) {
            Toast.makeText(super.getContext(), "MotionEvent.ACTION_DOWN :" + e.getX() + ", " + e.getY(), Toast.LENGTH_LONG).show();
        }
        return super.onTouchEvent(e);
    }
}

 

5. MainActivity에 CustomView 클래스 추가 및 레이아웃 구성

 

새로 작성한 CustomView를 메인 엑티비티에 레이아웃 구성요소로서 삽입한다.

 

◎MainActivity.java

package com.example.samplegraphic;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.example.samplegraphic.custom.CustomView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        CustomView view = new CustomView(this);
        setContentView(R.layout.activity_main);
    }
}

 

◎activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.example.samplegraphic.custom.CustomView
            android:layout_width="match_parent"
            android:layout_height="match_parent" android:id="@+id/customView"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

---