14. 앱인벤터 리스트(list) 사용하기 - 학생명부 만들기

 

 

 

이번 글에서는 앱인벤터로 '학생 명부' 만들기 앱을 만들어 보겠습니다. 

학생명부 만들기에서는 '리스트' 블록을 사용합니다.

 

'변수'가 하나의 값만을 저장하는 저장소라면

'리스트'는 여러 값을 저장하는 저장소입니다. 

 

앱인벤터에서 '리스트'는

하나의 독립된 공간이 아닌 '칸막이' 이며

독자적으로 쓰이지 않고 변수나 DB와 함께 활용해야 합니다.

 

리스트 관련 블록은

리스트이름, 위치, 항목으로 이루어져있습니다. 

 

---

 

1. 앱 화면과 기능 구상하기

 

 

학생 명부 앱은 

리스트에 학생 이름을 미리 저장해 둔 다음

학생 추가, 학생 삭제, 변경 버튼을 만들어서

학생 명부를 수정 할 수 있습니다. 

 

 

 

 

2. 앱 화면 만들기

 

 

학생 명부 앱의 화면은 아래와 같습니다. 

 

일단 현재 학생들의 이름을 볼 수 있는 '현재' 탭이 있고

학생 이름을 추가할 수 있는 '추가'

삭제할 수 있는 '삭제'

이름을 변경할 수 있는 '변경'

그리고 '현재' 탭과 같은 기능을 제공하는 '비고' 버튼이 있습니다.

 

 

 

전체 컴포넌트를 보면

수평배치1, 수직배치1, 수평배치2, 수평배치3으로 이루어져 있고

각각의 수평과 수직배치에

텍스트, 레이블, 버튼 등을 넣어주었습니다.

 

스크린1의 속성도 살펴보겠습니다. 

배경색이나, 앱의 이름, 글자색과 수평정렬, 수직정렬을 조정해줍니다.  

 

 

 

3. 코딩하기

 

 

3-1. 리스트 만들기

 

먼저 '학생이름'이라는 변수를 만들어 주고 변수에 '리스트 만들기'를 넣어줍니다.

그리고 원하는 리스트의 항목들을 추가해줍니다.

 

저는 리스트의 항목에 RM, 진, 슈가, 제이홉, 지민을 입력해보았습니다.

각 항목은 맨 처음부터 1,2,3,4,5번 위치라고 볼 수 있습니다.

 

3-2. 현재 버튼 코딩

 

리스트 만들기가 되었다면

'현재' 버튼에 대해 코딩해보겠습니다.

'현재' 버튼을 클릭하면 텍스트박스1에 학생 이름이 쭉 출력되어야합니다.

 

일단 기존에 있던 텍스트박스1의 텍스트 값들을 지워주고

'학생이름' 리스트의 항복들을 각각 반복해서 불러오는 블록을 연결합니다.

그리고 텍스트박스1의 텍스트는 텍스트박스1의 텍스트에 '리스트의 항목'을 합쳐줍니다.

항목들이 한 줄로 입력되지 않고 다음 줄에 입력되게 하기 위해 \n도 합쳐줍니다.

 

또한 텍스트박스1에서만 항목들이 보이는 것이 아니라

목록뷰에서도 항목들이 보이게하기위해

목록뷰의 요소문자열의 값을 텍스트박스1의 텍스트로 지정해줍니다.

나머지 텍스트박스2와 3의 값은 지워줍니다.

 

 

3-3. 추가 버튼 코딩 

 

다음으로는 추가 버튼에 대해 코딩을 해보겠습니다. 

'추가' 버튼을 클릭하면 학생이름을 추가할 수 있도록 하기 위해

'항목 삽입하기 리스트, 위치, 항목' 블록을 이용합니다.

 

리스트는 '학생 이름' 리스트이고 위치는 텍스트박스2에 입력한 위치,

항목은 텍스트박스3에 입력한 항목을 넣어줍니다.

 

텍스트박스2에 6을 쓰고 텍스트박스3에 '뷔'를 썼다면

'학생이름'이라는 리스트의 6번 위치에 '뷔'라는 항목이 추가 됩니다.

 

그리고 텍스트박스2와3은 다시 값을 지워줍니다.

 

 

 

3-4. 삭제 버튼 코딩

 

이제 삭제 버튼 코딩을 해보겠습니다. 

 

'삭제' 버튼을 눌렀을 때 학생이름을 삭제할 수 있도록 

'항목 삭제하기 리스트, 위치' 블록을 가져옵니다.

 

리스트에서 어떤 항목을 삭제하고 싶다면

리스트내에 위치만 알면 됩니다. 

 

그리고 텍스트박스2와3은 다시 빈 문자열로 만들어줍니다.

 

 

3-5. 변경 버튼 코딩

 

그 다음은 변경 버튼 코딩입니다. 

 

'변경' 버튼을 눌렀을 때는

바꾸길 원하는 위치의 항목 값을 바꾸어 줄 수 있습니다.

이 때는 '항목 교체하기 리스트, 위치, 바꿀항목' 블록을 사용합니다.

 

만약 텍스트박스2에 1을 쓰고 텍스트박스3에 '정국'을 썼다면

1번인 'RM'이 '정국'으로 바뀌게 됩니다.

 

 

3-6. 비고 버튼 코딩

 

마지막으로 비고 버튼을 코딩해보겠습니다. 

 

'비고'를 누르면 '현재'버튼을 누른 것과 같은 효과가 있습니다. 

 

여기서는 for문을 이용해보았습니다.

 

index라는 변수를 만들어주고

index의 초기값은 1로 저장합니다.

 

index값이 리스트의 길이보다 같거나 작을때

아래의 블록들을 반복합니다.

 

텍스트박스1의 텍스트값은 텍스트박스1의 텍스트와

학생이름리스트의 index값이 나타내는 위치 항목(1번째 항목)을 합쳐줍니다.

 

그리고 index값은 1 증가시킵니다.

이제 index값이 2가 되었고 리스트의 2번째 항목을 텍스트박스1에 추가시켜줍니다.

이렇게 index값이 리스트의 길이와 같을 때까지 index값을 1씩 증가시키면서 반복문을 돌려줍니다.

 

 

3-7. 전체 블록

 

마지막으로 

전체 블록입니다. 

 

 

4. 테스트하기

 

이제 실제로 만들어진 학생 명부 앱의작동 모습을 보겠습니다. 

 

 

 

완료!!!!

리스트는 앱인벤터에서 매우 많이 사용되는 기능이므로

많이 연습해보는게 좋습니다.