안녕하세요. 이지이지입니다.
앱인벤터 2번째 Tip 포스팅으로 레이블을 표처럼 활용하는 방법에 대해 설명드리도록 하겠습니다.
※ 레이블을 표로 활용하는 이유는?
앱인벤터에서는 컴포넌트의 개수를 변화하는 수에 대응하여 추가하거나 삭제할 수 없습니다.
예를 들어, 가계부를 만들 때 사용자마다 지출항목이 1개일수도 있고 10개일수도 있습니다.
이런 경우 앱인벤터에서는 리스트뷰 컴포넌트 또는 레이블 컴포넌트의 줄바꿈 기능을 활용하여 대응할 수 있습니다.
예제 앱을 통해 설명드리니 아래 소스 파일을 참고하며 글을 보시기 바랍니다.
| 화면 구성 |
예제 앱의 화면 구성은 간단하게 이루어져 있습니다.
레이블의 줄바꿈 기능은 HTML format 기능을 사용하지 않을 경우에는 \n, HTML format 기능을 사용할 경우에는 <br>로 사용하는데, 예제 앱에서는 HTML format 기능을 사용하도록 하겠습니다.
위의 화면 구성에서 레이블을 표로 사용할 컴포넌트는 빨간색 네모 안의 레이블 들입니다.
HTML format 기능을 사용하기 위해 위의 레이블 컴포넌트의 속성 중 HTML format에 체크합니다.
그리고 각 레이블마다 구분이 될 수 있도록 BackgroundColor 속성은 여러분들이 원하는 색으로 설정하면 되겠습니다.
| 블록 코딩 |
먼저 Screen1이 처음 시작될 때, 실행되는 블록과 사용될 변수입니다.
Screen1이 시작되었을 때, 각 레이블의 첫 번째 행에 제목이 표시되도록 합니다.
① 변수 headings에 각 열의 제목으로 사용할 텍스트를 저장해둡니다.
② 변수 label_components에 표로 사용할 레이블 컴포넌트를 저장해둡니다.
→ Any component 블록을 사용하기 위한 것입니다.
※ headings와 label_components에 저장되는 항목의 개수는 같아야 합니다.
③ 1부터 시작하여 변수 label_components의 항목 개수만큼 1씩 증가하며 do안의 블록을 실행합니다.
→ 위의 예에서는 변수 label_components의 항목 개수가 3이므로 1부터 3까지 실행됩니다.
④~⑤ 각 레이블의 제목을 표시합니다.
④ set Label.Text of component는 텍스트를 변경할 레이블 컴포넌트를 지정하는 것으로 component에 삽입된 컴포넌트를 지정하게 됩니다.
→ get number가 1일 때에는 lbl_NoData, 2일 때에는 lbl_AnimalData, 3일 때에는 lbl_CategoryData의 레이블을 지정하게 됩니다.
⑤ <b> 태그는 글자를 굵게 표현한다는 의미이고, </b>는 글자를 굵게 표현하는 것을 종료하라는 HTML 태그입니다.
→ get number가 1일 때에는 No, 2일 때에는 Animal, 3일 때에는 Category를 텍스트로 나타냅니다.
다음은 [추가하기] 버튼을 눌렀을 때 실행되는 블록과 필요한 변수입니다.
① 변수 no에 초기값으로 0을 저장해둡니다.
→ 변수 no는 항목의 개수를 저장해두는 역할과, 표의 No열에 사용할 것입니다.
② 변수 data에 초기값으로 빈 리스트를 저장해둡니다.
→ 레이블에 표시될 데이터를 저장해 둘 변수입니다.
③ [추가하기] 버튼을 클릭했을 때,
④ 변수 no에 기존의 no에 저장된 값에 1을 더해줍니다.
⑤ 변수 data에 항목을 추가합니다.
→ 만약 이전에 추가된 항목이 없었고, 동물에는 "강아지", 분류에는 "포유류"로 입력했다면,
변수 data에는 [["1", "강아지", "포유류"]]와 같이 데이터가 저장됩니다.
⑥ 1부터 변수 label_components에 저장된 항목의 개수만큼 1씩 증가하며 do안의 블록을 실행합니다.
→ 위의 예에서는 변수 label_components의 항목 개수가 3이므로 1부터 3까지 실행됩니다.
⑦ 화면에 표시되는 텍스트를 변경할 컴포넌트를 지정합니다.
→ get number가 1일 때에는 lbl_noData가, 2일 때에는 lbl_AnimalData가, 3일 때에는 lbl_Category 컴포넌트가 지정됩니다.
⑧~⑩ 기존 레이블에 있는 데이터(⑧)에 줄바꿈(⑨)을 한 후, 추가된 항목(⑩)을 더하여 화면에 표시합니다.
Label.Text와 Label.HTMLContent의 차이점은 텍스트에 HTML 코드의 포함여부입니다.
이번 예에서는 HTML 코드가 포함되어 있으므로 Label.HTMLContent를 사용하여 기존 레이블에 표시되어 있던 텍스트를 가져온 것입니다.
→ 아무 항목도 추가하지 않은 상태인 경우, Screen1이 처음 실행되었을 때 각 레이블의 텍스트를 제목을 나타내도록 설정해 두었으므로
- lbl_noData.Text: No
- lbl_AnimalData.Text: Animal
- lbl_CategoryData.Text: Category
→ 첫 번째로 동물에 "강아지", 분류에 "포유류"를 입력했다면
- lbl_noData.Text:
No
1
- lbl_AnimalData.Text:
Animal
강아지
- lbl_CategoryData.Text:
Category
포유류
→ 두 번째로 동물에 "도마뱀", 분류에 "파충류"를 입력했다면
- lbl_noData.Text:
No
1
2
- lbl_AnimalData.Text:
Animal
강아지
도마뱀
- lbl_CategoryData.Text:
Category
포유류
파충류
위와 같은 식으로 데이터가 표현됩니다.
이상 앱인벤터에서 레이블로 표 만들기에 대한 포스팅이었습니다.
한 번 익혀두면 유용하게 사용할 수 있는 기능이니 참고하셔서 꼭 활용해보시기 바랍니다.
댓글