3.4 안드로이드 스튜디오 ListView 이해를 위한 앱 인벤터 ListView 코딩

안드로이드 스튜디오 언어 구조 특성 상 아주 간단한 코드를 작성하더라도 그 길이가 상당히 길고 작업 방식이 메뚜기 뛰어 다니듯 이리 저리 헤메 다녀야 함으로 인해 작은 단편적인 코드들을 무수히 학습해야 하는 난점이 있는 듯하다. 반면에 MIT에서 개발한 앱 작성 코드 언어인 앱 인벤터로도 안드로이드 스튜디오와 거의 비슷하게 스마트폰 앱을 작성해 낼 수 있다.

물론 두 언어가 전혀 동일하지는 않지만 거의 동일한 결과를 얻어 낼 수 있는 것으로 보이지만 안드로이드 스튜디오에 비해 앱 인벤터를 배우기는 대단히 쉬워 보인다. 그 이유는 앱 인벤터 언어의 개발자들이 안드로이드 스튜디오의 중요한 명령들과 그 응용들에 대해 폭 넓게 조사 후 모듈화 과정을 거쳤다고 보인다. 즉 안드로이드 스튜디오에서 가능한 코드 작성은 앱 인벤터에서 거의 다 된다고 봐도 무방할 것이다. 거기에다가 짧고 간단하다.

앱 인벤터의 Blocks에서 퍼즐 조각들을 맞추는 코딩 단계에서 보면 Design 단계에서 설정한 요소들의 모든 경우의 수를 고려하여 퍼즐 요소들을 제공한다는 점에유의하자. 즉 앱인벹터 언어 개발자들은 안드로이드 스튜디오 전체 명령 및 코딩 특성을 잘 이해하는 MIT의 전문가 그룹이 모듈화를 통해 만든 언어라 볼 수 있을 것이다. 모듈화의 특성은 당연히 길고 복잡한 코딩 구조를 간단하고 입체적인 형태로 전환되었다는 점이다.

이러한 점을 감안해서 안드로이드 스튜디오 앱 코딩에서 대단히 큰 비중을 차지하는 LIstView 코드를 앱 인벤터 측면에서 고려해 보기로 한다. 지난번 안드로이드 코딩에서는 주어진 String 데이터들을 리스팅해 보는 정도였지만 앱 인벤터에서는 나열된 String 데이터들 중 하나를 선택 클릭하면 이미지가 뜨는 그런 문제를 코딩하기로 하자. String 데이터로는 Strawberry, Lemon, Pear 3 종류의 과일을 선택하고 아울러 스페인어 명칭으로 png 이미지 파일을 준비하자.

앱인벤터의 디자인 구조는 다음과 같다. 3개의 과일 아이템별 CheckBox를 사용하며 각 아이템 선택 시 image에 과일 그림이 나타난다. 한편 텍스트 박스에 과일 이름을 입력할 경우에도 마찬가지로 괴일 이미지가 출력되도록 코딩하기로 한다.

안드로이드 스튜디오에서도 activity_main.xml에서도 LinearLayout을 사용하여 비슷하게 코딩이 가능할 것이다.

 

Checkbox

Blocks에서 퍼즐 조각을 코딩하자. String 들은 보이지 않은 체 3개의 체크박스만 디스플레이 된다. 체크박스1이 체크되면 즉 true 이면 Image1 픽쳐가 fresa.png 로 설정되어 나타난다. 나머지 2 경우는 반드시 false 처리되어야 한다. 체크박스2 와 체크박스3도 비슷하게 코딩된다. 이 코드가 실행되면 수직으로 배열된 3개의 체크 박스 중 하나를 체크하자마자 해당 과일이 나타난다.

Spinor 와 ListPicker

Spinor는 큰동그라미 속에 작은 동그라미가 그려진 ⊚ 모양으로서 터치 또는 클릭하면 작은 동그라미에 녹색이 채워지면서 실행된다. 반면에 ListPicker는 텍스트로쓰여진 문자열 자체로서 직접 선택 클릭이 가능하다.

이러한 클릭에서는 결국 순서 즉 index 값이 체크되어 입력된다. 유사한 방법인데 Spinor 인가 아니면 문자열인가 하는 차이이다.

다음과 같이 리스트 2종을 초기화 한다. 첫 번째 리스트는 바로 우리가 알고 있는 과일 이름에 해당한다. 2번째 리스트는 과일명 별로 이미지 파일을 스페인어로 표기하였다. 그 두 명칭이 일치하면 충돌이 일어날 수도 있기 때문일 것이다.

2종류의 기법이 거의 동일하므로 기왕 코딩하는 김에 한꺼번에 처리하도록 한다.

텍스트 입력 기법

빈칸으로 남아 있는 텍스트박스에 과일 명을 정확하게 입력 하고 Click to Fruit 버튼을 누르자.

다음 출력은 체크 박스 사용과 텍스트 입력 사례이다. Spinor 또는 ListPicker 도 마찬가지 결과를 준다.

이것이 바로 앱 인벤터의 ListView 기법인데 안드로이드 스튜디오에서도 가능하리라 본다.

첨부된 aia 파일을 앱 인벤터에서 import 하여 코드 구조를 분석해 보자.

ListViewExample.aia

ListViewExample.aia

ListViewExample.aia

0.02MB