앱 인벤터에서 그림판용(Paint) 앱 코드 작성을 고려해 보자. 다음과 같이 색상 선택용 3개의 버튼과 밑판용 Canvas 및 그림판 화면을 지우기 위한 Wipe 버튼으로 구성이 가능하다. Canvas 란 단순히 스케치 북처럼 배경 그림 없이 백색으로도 선택이 가능하며 때로는 특정한 이미지나 사진을 사용할 수도 있는데 그림판이므로 이 Canvas 상에 선을 그을 수 있으며 아울러 일정한 직경의 점을 짝을 수도 있다.
앱 인벤터 코드는 다음과 같이 대단히 간결하여 6개의 이벤트 코드로 구성된다. 즉 색상 선태 버튼 3개, 화면을 지우기 위한 Wipe 버튼, 드래그에 의한 선긋기와 터치로 Dot 찍기 이벤트로 구성된다.
이와 유사하게 안드로이드 스튜디오에서 앱 인벤터 보다 훨씬 간단한 오픈소스를 사용하는 일종의 그림판 코드를 작성해 보자. 조사결과 아주 간단하게 작성이 가능한 쓸 만한 오픈소스 2종류를 찾을 수 있다. 그 중에 하나인 Sylvain Saurel의 코드를 소개하도록 한다.
https://medium.com/@ssaurel/learn-to-create-a-paint-application-for-android-5b16968063f8
다른 하나는 Sue Smith 의 코드로서 그림판 자체가 훨씬 더 세련되긴 했으나 처음 시도해 보기에는 GitHub 의 코드를 Copy & Paste (복사 붙이기) 작업만 하기 에도 벅찰 정도이므로 Sylvain 의 코드를 다루어 본 후 시도해도 늦지 않을 것이다.
Sylvain 의 코드는 기능이 선 긋기와 메뉴에 의한 선의 특성 모드를 선택할 수 있는 정도로 간단함에도 불구하고 앱 인벤터 코드에 비해 코드 자체는 상당히 복잡한 편이다. 검색에 의하면실시간으로 그림판 코드 작성을 보여주는 유튜브 영상들이 제법 있는데 거의 암기에 의한 영상으로 보인다. 코드의 내용을 살펴보면 public class, private variables 및 protected 루틴들이 혼재 되어 있어 그 알고리듬 구조가 복잡한 편이라 이런 종류의 코드를 즉석에서 써 내려가기는 상당히 어려운 구조로 보인다. 즉 전체 코드 암기에 의한 영상 처리일 따름임에 유의하도록 하자. 하지만 코드 입력 순서가 대단히 중요하기에 몇 번씩 반복하여 그런 영상을 볼 필요는 있다.
위 그림의 프로젝트 Tree 구조에 적어둔 순서에 따라 코드를 전적으로 복사 붙여넣기 에 의해 작성하도록 한다.
1 번째 FingerPath Class는 현재의 스미트폰 화면에 긋게되는 메뉴선택 사항 포함 오브젝트의 정보 즉 this 에 대한 FingerPath 오브젝트 생성 Class 이다.
2 번쨰 PaintView Class는 FingerPath Class를 불러 사용하게 되며 페인팅 작업 모든 과정에 대한 루틴들이 포함된다.
5 번쨰 MainActivity에서는 PaintView 와는 달리 스마트폰 화면에서 Painting 작업이 아닌 onCreate 이라든지 메뉴 펼치기와 메뉴 중 아이템 선택 작업에 관한 코드를 포함하게 된다.
3 번째 activity_main.xml은 Relative layout 으로 정의 하고 스마트폰 화면 전체를 match_parent로 설정한다. 아울러 특정 위젯 사용은 없으며 대신에 <com.example.mypain.PaintView ∙∙∙ 용법에 의해 화면 전체를 PaintView 전용 화면으로 설정하게 된다. 이 용법은 Sue Smith 의 블로그에서도 나타나는데 처음에는 익숙치 못해 적응을 못했으나 Sylvain도 동일한 기법을 사용함을 보고 이해하게 되었다. 따라서 Sylvain 의 코드를 Copy & Paste 할 수 있으면 Sue Smith 의 GitHub에 저장된 코드도 유사한 방법으로 작성이 가능하다는 것을 뜻한다.
4 번째로 res 폴더에서 Android Resource File 생성기능을 사용하여 menu의 main.xml에서 그림판 메뉴 코드를 작성하자.
5 번째로 마지막 MainActivity 코드를 작성하도록 한다.
필자처럼 전적으로 Copy & Paste 아트(Art)를 사용한다면 Sylvain 의 코드를 복사해 넣되 몇가지 점에 유의해야 한다. 즉 Android.Manifest.xml에서 자신의 코드명을 확인하고 MainActicity에서 <com.example.사용자파일명을 확인함과 아울러 activity_main.xml에서 <com.example.사용자파일명.PaintView을 확인하여 수정하도록 하자. 이런 방식으로 코드 실행은 가능하지만 결국 코드를 자신의 것으로수정하려면 내용을 세부적으로 분석해 볼 필요가 있다
첨부된 코드를 다운받아 실행시켜 보자.
Painting.zip
'안드로이드 스튜디오' 카테고리의 다른 글
| 5.2 안드로이드 스튜디오 Drawing App의 결정판 Sue Smith의 그림판 복원 (0) | 2020.03.25 |
|---|---|
| 안드로이드 스튜디오 MyPaint 실행 동영상 (0) | 2020.03.24 |
| 안드로이드 스튜디오 Intent 실행 테스트 동영상 (0) | 2020.03.23 |
| 초보를 위한 안드로이드 스튜디오 블루투스 ListPIcking 코드 (0) | 2020.03.22 |
| ListView 실행 테스트 (0) | 2020.03.21 |