onDraw() 를 활용하여 그림그리기

 

onDraw() 이용한 그림그리기

 

꾸준히 유행인 심리테스트들 중에서 그림그리는 심리테스트를 보고 떠올라 그림그리기 심리테스트 앱을 만들어보았다. 

심리테스트 말고도 실제 은행에서 카드를 발행할때 사인을 만들거나, 휴대폰으로 서명할때 이 메서드가 쓰인다고 보면 된다.

 

 

안드로이드에서 그림그리기를 구현하려면 몇가지 필요한 메서드들이 있다.

 

1.  onTouchEvent()  

         - 터치한곳의 좌표값을 이용하여 그리기 출력   

         - 눌렀을때, 누르면서 이동할때, 떼었을때로 나뉘어짐

 

2.  onDraw()

        - 그림그리기를 처리해주는 메서드.

        - Canvas와(도화지 역활/그리는 내용)  Paint(색,각도,글꼴/그리는 방법)가 있다.

 

 

 

1.activity_draw.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.drawingpsychologicaltest.PaintView
        android:id="@+id/paintview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:background="@color/colorPink"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"/>

    <ImageView
        android:id="@+id/skechbook_iv"
        android:layout_width="wrap_content"
        android:layout_height="220dp"
        android:background="@drawable/skechbook_pencil"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"/>
    <TextView
        android:layout_width="230dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/skechbook_iv"
        android:layout_marginTop="60dp"
        android:layout_marginLeft="70dp"
        style="@style/explanation_tv"
        android:text="숲속을 걷고있는 당신. 그곳에서 집을 발견했습니다.
                                    그곳에서 본 집을 그려주세요."
        />

    <ImageButton
        android:id="@+id/eraser_img_btn"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@+id/skechbook_iv"
        android:background="@drawable/eraser_icon"
        android:layout_alignParentRight="true"
        android:layout_marginTop="235dp"
        android:layout_marginRight="10dp"
        />

    <ImageView
        android:id="@+id/bottom_iv"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorPink"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        />

    <Button
        android:id="@+id/done_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/main_btn_customise"
        android:layout_alignTop="@id/bottom_iv"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        style="@style/done_tv"
        android:text="@string/done_name"
        />

</RelativeLayout>

 

 

2. FingerPath.java

public class FingerPath  {
    public int color;
    public int strokeWideth;
    public Path path;

    public FingerPath(int color, int strokeWideth, Path path) {
        this.color = color;
        this.strokeWideth = strokeWideth;
        this.path = path;
    }
}

 

 

3. PaintView.java

public class PaintView extends View {

    public static int BRUSH_SIZE = 10;
    public static final int DEFAULT_COLOR = Color.BLACK;
    public static final int DEFAULT_BG_COLOR = Color.WHITE;
    private static final float TOUCH_TOLERANCE = 4;
    private float mX, mY;
    private Path mPath;
    private Paint mPaint;
    private ArrayList<FingerPath> paths = new ArrayList<>();
    private int currentColor;
    private int backgroundColor = DEFAULT_BG_COLOR;
    private int strokeWidth;
    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);



    public PaintView(Context context) {
        this(context, null);
    }

    public PaintView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(DEFAULT_COLOR);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setXfermode(null);
        mPaint.setAlpha(0xff);  //255

    }
    
    public void init(DisplayMetrics metrics){
        int heigh = metrics.heightPixels;
        int width = metrics.widthPixels;

        mBitmap = Bitmap.createBitmap(width, heigh, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);

        currentColor = DEFAULT_COLOR;
        strokeWidth = BRUSH_SIZE;
    }
    public void normal(){

    }

    public void clear(){
        backgroundColor = DEFAULT_BG_COLOR;
        paths.clear();
        normal();
        invalidate();
    }

    protected void onDraw(Canvas canvas){
        canvas.save();
        mCanvas.drawColor(backgroundColor);

        for(FingerPath fp : paths){
            mPaint.setColor(fp.color);
            mPaint.setStrokeWidth(fp.strokeWideth);
            mPaint.setMaskFilter(null);
            mCanvas.drawPath(fp.path, mPaint);
        }
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        canvas.restore();
    }
    private void touchStart(float x, float y){
        mPath = new Path();
        FingerPath fp = new FingerPath(currentColor, strokeWidth, mPath);
        paths.add(fp);

        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }
    private void touchMove(float x, float y){
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);

        if(dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE){
            mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }
    }
    private void touchUp(){
        mPath.lineTo(mX, mY);
    }
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                touchStart(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touchMove(x, y);
                invalidate(); //터치 이동중에도 그림 출력
                break;
            case MotionEvent.ACTION_UP:
                touchUp();
                invalidate();
                break;
        }

        return true;
    }
}

뷰를 다시 그리는 경우가 매우 자주 발생하며, 다수의 그리기 객체는 많은 비용을 들여 초기화해야 한다.

onDraw() 메서드 내에서 그리기 객체를 만들면 성능이 크게 저하되고 UI가 느리게 표시될 수 있다. 

 

 

4.MainActivity

 

public class MainActivity extends AppCompatActivity {
    public PaintView paintView;
    private Button mDoneBtn;
    private ImageButton mClearBtn;
    

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

        //완성화면으로, 그림결과 넘겨주기
        mDoneBtn = (Button)findViewById(R.id.done_btn);
        mDoneBtn.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(
                        getApplicationContext(),
                        ResultActivity4.class);

                startActivity(intent);

            }
        });
        
        //지우개 버튼
        mClearBtn = (ImageButton)findViewById(R.id.eraser_img_btn);
        mClearBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                paintView.clear();
            }
        });


        paintView = (PaintView)findViewById(R.id.paintview);
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getRealMetrics(metrics);
        paintView.init(metrics);

    }

}

 

 

 

그리기 심리테스트도 재밌지만, 다음에는 하이브리드로 MBTI같은 심리테스트도 만들어 보고 싶다 ~.~ 

 

---

 

<개발환경> 

java version "1.8.0_271"

android API 10.0.0+ (R)

android studio "4.0.1"

 

 

<참고>

developer.android.com/training/custom-views/custom-drawing?hl=ko

Do it! 안드로이드 앱 프로그래밍(정재곤 지음)