[Android/Kotlin] 드로잉앱(1)

그림을 그릴수있는 간단한 앱을 만들어볼건데 이번에는 화면에 그림이 그려지고 손을 떼면 그림이 사라지는 부분을 만들어볼것이다

 

먼저 Manifest에 들어가서 activity안에 이 코드를 추가해준다

화면을 세로방향으로 고정시켜주는 코드다

android:screenOrientation="portrait"

 

 

그다음에 DrawingView.kt라는 코틀린 class를 만들어서 코드를 작성해준다

 

package com.example.drawingapp

import android.content.Context
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

// view를 사용해서 context, attrs라는 변수생성 (이렇게하면 밑에다가 변수나 메서드 만들수있음 / 히위요소사용,재정의 가능)
class DrawingView(context: Context, attrs : AttributeSet) : View(context, attrs){

    // 변수생성
    private var mDrawPath : CustomPath? = null   //그려질 path
    private var mCanvasBitmap : Bitmap? = null
    private var mDrawPaint : Paint? = null       //geometry,text,bitmap등을 그릴때 사용하는 스타일이나 색상
    private var mCanvasPaint : Paint? = null
    private var mBrushSize : Float = 0.toFloat() //붓 두께(0으로 설정)
    private var color = Color.BLACK              //색상(검정)
    private var canvas : Canvas? = null          //그림그릴수있는 배경


    init {
        setUpDrawing()
    }


    //setUpDrawing 함수생성해서 모든변수를 설정
    private fun  setUpDrawing(){
        mDrawPaint = Paint()
        mDrawPath = CustomPath(color,mBrushSize)   //color,mBrushSize는 null이 아니기 때문에 CustomPath로 바로 전달가능 / 이제 mDrawPath는 null이 아님
        mDrawPaint!!.color = color                 //컬러설정
        mDrawPaint!!.style = Paint.Style.STROKE    //스타일설정
        mDrawPaint!!.strokeJoin = Paint.Join.ROUND //stroke의 시작 설정(둥글게)
        mDrawPaint!!.strokeCap = Paint.Cap.ROUND   //stroke의 끝 설정(둥글게)
        mCanvasPaint = Paint(Paint.DITHER_FLAG)
        mBrushSize = 20.toFloat()
    }

    //화면의 크기가 바뀔때마다 불러오게
    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mCanvasBitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888)
        canvas = Canvas(mCanvasBitmap!!)

    }

    //그림그릴때 실행
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawBitmap(mCanvasBitmap!!, 0f, 0f, mCanvasPaint)

        if(!mDrawPath!!.isEmpty){
            mDrawPaint!!.strokeWidth = mDrawPath!!.brushThickness   //페인트 두꼐
            mDrawPaint!!.color = mDrawPath!!.color
            canvas.drawPath(mDrawPath!!, mDrawPaint!!)
        }

    }


    //화면터치했을때 실행
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        val touchX = event?.x
        val touchY = event?.y

        when(event?.action){

            //화면 눌렀을때(터치했을때) 실행할 이벤트
            MotionEvent.ACTION_DOWN ->{
                mDrawPath!!.color = color
                mDrawPath!!.brushThickness = mBrushSize //얼마나 두꺼운지

                //가지고있던것을 리셋(그린선을 지움)하고
                mDrawPath!!.reset()
                // touchX,touchY위치로 이동 (touchX,touchY가 null이 아닌경우에만)
                if (touchX != null) {
                    if (touchY != null) {
                        mDrawPath!!.moveTo(touchX, touchY)
                    }
                }
            }

            //화면 드래그 했을때 실행할 이벤트
            MotionEvent.ACTION_MOVE -> {
                if (touchX != null) {
                    if (touchY != null) {
                        mDrawPath!!.lineTo(touchX,touchY)
                    }
                }
            }

            //화면에서 손가락 땠을때 실행할 이벤트
            MotionEvent.ACTION_UP -> {
                mDrawPath = CustomPath(color, mBrushSize)
            }
            else -> return false
        }
        // 전체뷰 무효화
        invalidate()

        return true
    }


    //internal inner를 썼으므로 CustomPath클래스를 DrawingView 내부에서만 사용
    //CustomPath라는 변수고, path타입
    internal inner class CustomPath(var color : Int, var brushThickness : Float) : Path(){



    }


}

DrawingView.kt

 

 

그리고 화면에 방금 쓴 내용이 보여질수있도록 activity_main.xml에 DrawingView를 추가한다

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.drawingapp.DrawingView
        android:id="@+id/drawing_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingClass" />

</androidx.constraintlayout.widget.ConstraintLayout>

 activity_main.xml

 

 

 

 

 

 

지금까지 작성한코드를 실행시켜보면 이렇게 작동한다. 그림을 그릴수있지만 떼면 다시 사라진다

이 다음에는 손을 떼도 그림이 사라지지 않게 만들어볼것이다!