[JAVA][안드로이드] 그림판 앱 구현하기

안녕하세요!

 

오늘은 스틱코드를 이용하여 간단한 그림판 앱을 구현해보도록 하겠습니다.

 

진행 순서는 아래와 같이 진행하겠습니다.

1. Touch 이벤트

2. 선 그리기

 

 

1. Touch 이벤트

안드로이드에서는 터치 이벤트를 제공하고 있어, 손가락으로 클릭 했을 때, 드래그 했을 때, 손가락을 화면에서 뗐을 때에 원하는 로직을 구동하기 위한 코드를 추가할 수 있습니다.

 

먼저 터치 이벤트가 어떻게 작동되는지 확인 하기 위해 중앙에 텍스트뷰를 위치하여 클릭 위치의 XY좌표를 구해 텍스트로 찍히도록 레이아웃을 구성해보겠습니다.

 

* activity_main.xml

 

 

다음으로 MainActivity에 필요한 변수 선언과 터치 이벤트를 정의 하겠습니다.

 

 

 

* 터치 이벤트

ACTION_DOWN : 손가락이 화면에 닿았을 때
ACTION_MOVE : 드래그 상태
ACTION_UP : 손가락을 떼었을 때

 

이 중 ACTION_DOWN과 ACTION_MOVE 이벤트를 이용하겠습니다.

 

 

ACTION_DOWN과 ACTION_MOVE 이벤트가 실행 될때의 XY 좌표를 가져오는 코드와 레이아웃 중앙의 텍스트 뷰의 텍스트를 변경하도록 코드를 작성합니다.

 

마지막 return 값을 변경하셔야 하는데 터치 결과값을 받겠다는 의미로 true로 바꿔줍니다.

 

앱을 실행하여 화면 클릭과 드래그 시 중앙의 XY 좌표가 표기 되는 것을 볼 수 있습니다.

터치 이벤트 소스 코드

stickode.com/detail.html?no=1989

스틱코드

 

 

2. 선 그리기

다음으로 터치 시 그림이 그려지는 기능을 구현해보도록 하겠습니다.

 

Canvas - 그림을 그리는 내용

onDraw - 캔버스에서 그림 그리기를 처리해주는 메소드

Paint - 그림을 그리는 방법

Path - 그릴 그림을 저장, 자바에서 버퍼와 같은 기능

 

먼저 SetView 클래스를 만들어 그림이 그려지는 로직을 담도록 하겠습니다.

 

* SetView.java

 

 

onDraw 메소드에 그려질 선의 설정을 해줍니다.

 

 

 

1번 과정에서 쓴 터치 이벤트를 오버라이드 하여 터치 될때와 드래그 할 때 path 객체에 좌표를 담아주는 작업을 진행합니다.

 

 

마지막에 invalidate() 메소드로 위에 작성된 onDraw를 호출합니다.

 

* MainActivity

마지막으로 MainActivity에서 activity_main.xml 대신 View를 상속받은 SetView 를 사용하도록 수정해줍니다.

 

 

 

앱을 실행하고 화면을 드래그 하면 다음과 같이 선이 그려지는 것이 보실 수 있습니다.

 

소스 코드

stickode.com/detail.html?no=1990

스틱코드