[3팀] Android-12-Kotlin : 키즈 드로잉 앱 (1)

 

이 글은 유데미 강의 Android 12 및 Kotlin 개발 완전 정복을 참고하여 작성하였습니다.

작성자 : 송가현 

개발환경은 Windows, Android Studio입니다. 

키즈 드로잉 앱 114 부터 119까지의 내용입니다.

 

 

1. 키즈 드로잉 앱 세팅하기

화면에 무언가를 그릴 수 있도록 하는 파트입니다.

 

1) manifests 파일로 가서 orientation을 수정해 앱의 방향을 고정한다.

<activity android:name=".MainActivity"
	android:screenOrientation="portrait"
    >
    
    화면방향을 세로 모드로 설정한 것임

강의에서는 세로 모드로 설정했는데, 가로 모드로 설정하고자 할 때는 어떻게 해야할지 궁금해 찾아보았음.

android:screenOrientation="landscape"

2) 새로운 코틀린 클래스를 만들고 Drawing View 라는 클래스

: 이 class는 뷰로 사용한다.

: Activity에 포함된 AppCompatActivity에 포함된 기능을 나중에 계속 활용할 수 있기 때문이다.

import android.util.AttributeSet
import android.view.View
import android.graphics.*

class DrawingView(context: Context, attrs:AttributeSet): View(context, attrs){

	private var mDrawPath: customPath?=null
    private var mCanvasBitmap: Bitmap?=null
    private var mDrawPaint: Paint?=null
    private var mCanvasPaint: Paint?= null
    private var mBrushSize: Float = 0.toFloat()
    private var color= Color.BLACK
    private var canvas" Canvas?=null
    
    init{
    	setupDrawing()
    }
    
    private fin setUpDrawing(){
    	mDrawPaint=Paint()
        mDrawPath= CustomPath(color, mBrushSize)
        mDrawPaint!!.color=color
        mDrawPaint!!.style=Paint.Style.STROKE
        mDrawPaint!!.strokeJoin=Paint.Join.ROUND
        mDrawPaint!!.strokeCap=Paint.Cap.ROUND
        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)
       
        mCanvasBitmap!!.let {
            canvas.drawBitmap(it, 0f,   0f, mCanvasPaint) 
        }

        for (p in mPaths) {
            mDrawPaint?.strokeWidth = p.brushThickness
            mDrawPaint?.color = p.color
            canvas.drawPath(p, mDrawPaint!!)
        }
		
        if (!mDrawPath!!.isEmpty) {
            mDrawPaint?.strokeWidth = mDrawPath!!.brushThickness
            mDrawPaint?.color = mDrawPath!!.color
            canvas.drawPath(mDrawPath!!, mDrawPaint!!)
        }
    }

 

2. 화면에 선 계속 그리게 하기

배열에 선을 담아내는 원리로 그린다.

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() 
                mDrawPath?.moveTo(
                    touchX,
                    touchY
                )
            }

            MotionEvent.ACTION_MOVE -> {
                mDrawPath?.lineTo(
                    touchX,
                    touchY
                ) 
            }

            MotionEvent.ACTION_UP -> { 

                mPaths.add(mDrawPath!!) //Add when to stroke is drawn to canvas and added in the path arraylist

                mDrawPath = CustomPath(color, mBrushSize)
            }
            else -> return false
        }

        invalidate()
        return true
    }

 

 

3. 캔버스 주변에 작은 보더 추가하기

 

fun setSizeForBrush(newSize: Float) {
    mBrushSize = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP, 
        newSize, 
        resources.displayMetrics 
    )
    mDrawPaint?.strokeWidth = mBrushSize
}

fun setColor(newColor: String) {
    color = Color.parseColor(newColor)
    mDrawPaint?.color = color
}