뷰에 그래픽 그리기

그래픽 기능을 확인할 수 있는 방법은 뷰 클래스를 상속한 후, 이 뷰에 직접 그래픽을 그리는 것이다

 

뷰 화면에 빨간 사격형을 그리는 단계

1단계 - 새로은 클래스를 만들고 뷰를 상속받음

2단계 - 페인트 객체를 초기화하고 필요한 속성을 설정

3단계 - onDraw 메소드 내에 사각형을 그리는 메소드를 호출

4단계 - onTouchEvent 메소드 내에 터치 이벤트를 처리하는 코드를 넣음

5단계 - 새로 만든 뷰를 메인 액티비티에 추가

 

CustomView.java

package com.example.a65_sample_customview;

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;


public class CustomView extends View {

    //    페인트 객체는 그래픽을 그리기 위해 필요한 속성을 담고 있다
    private Paint paint;

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

        init(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);

        init(context);
    }

    private void init(Context context) {

        paint = new Paint();
        paint.setColor(Color.RED);

    }

    //    onDraw 메소드는 뷰가 화면에 나타날 때 자동으로 호출
//    뷰에 그래픽을 그리기 위해선s onDraw 안에서 원하는 그래픽을 그리면 됨
//    onDraw 메소드는 부모 클래스인 View 클래스에 정의되어 있으므로 재정의하여 사용
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(100, 100, 200, 200, paint);
    }

    //    onTouchEvent 메소드도 부모 클래스인 View 클래스에서 재정의하여 사용
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            Toast.makeText(super.getContext(), "MotionEvent.ACTION : " + event.getX() + ", " + event.getY(), Toast.LENGTH_LONG).show();
        }

        return super.onTouchEvent(event);
    }
}

 

 

MainActivity

package com.example.a65_sample_customview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CustomView customView = new CustomView(this);
        setContentView(customView);
    }
}

 

 

 

 

자바로 만든 뷰를 xml에 추가하려면

    <com.example.a65_sample_customview.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

 

 

 

그래픽을 그릴 때 필요한 클래스

Canvas
뷰의 표면에 직접 그릴 수 있도록 만들어 주는 객체로 그래픽을 그리기 위한 메소드가 정의되어 있다

Paint
그래픽 그리기를 위해 필요한 색상 등의 속성을 담고 있다

Bitmap
픽셀로 구성된 이미지로 메모리에 그래픽을 그리는 데 사용

Drawable
사각형, 이미지 등의 그래픽 요소가 객체로 정의

 

 

CustomViewStyle.java

package com.example.a66_sample_customviewstyle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;

public class CustomViewStyle extends View {

    Paint paint;

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

        init(context);
    }

    public CustomViewStyle(Context context, 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);
        paint.setColor(Color.RED);
        //        첫번째 사각형
        canvas.drawRect(10, 10, 100, 100, paint);

        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2.0F);
        paint.setColor(Color.GREEN);
        canvas.drawRect(10, 10, 100, 100, paint);


        paint.setStyle(Paint.Style.FILL);
        paint.setARGB(128, 0, 0, 255);
        //        두번째 사각형
        canvas.drawRect(120, 10, 210, 100, paint);

//        점선 그리기
        DashPathEffect dashPathEffect = new DashPathEffect(new float[]{5, 5}, 1);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3.0F);
        paint.setPathEffect(dashPathEffect);
        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);
        //        네번째 원
        canvas.drawCircle(160, 160, 40, paint);

        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
        paint.setColor(Color.MAGENTA);
        paint.setTextSize(30);
        //        5번째 텍스트
        canvas.drawText("Text", 20, 260, paint);

        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(30);
        //        6번째 텍스트
        canvas.drawText("Text", 20, 320, paint);
    }
}

 

 

MainActivity

package com.example.a66_sample_customviewstyle;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        CustomViewStyle view = new CustomViewStyle(this);
        setContentView(view);
    }
}