앱인벤터 새로운 목록뷰 사용방법

이 글은 읽는데 약 6분이 걸립니다.

이번 nb187 릴리즈로 목록뷰 컴포넌트에 많은 변화가 생겼습니다.
이번에 업데이트된 목록뷰의 기능을 살펴보겠습니다.

참고로 nb187 릴리즈의 다른 업데이트 내역은 아래 글에 정리해두었습니다:
https://m.blog.naver.com/edisondl/222481250756


추가된 속성

총 8개의 속성값이 추가되었으며, 이상한 버튼도 생겼습니다.
지금부터 하나씩 알아보겠습니다.


Orientation 속성

목록뷰의 스크롤 방향을 지정하는 옵션입니다.
값으로는 vertical과 horizontal이 있습니다.
vertical은 수직 스크롤로, 기본 옵션입니다.
horizontal은 수평 스크롤입니다.

위 사진처럼 horizontal의 경우 목록뷰는 한 줄이 되며, 좌우 스크롤이 가능합니다.
위 사진은 일부러 스크롤을 살짝 밀어둔 모습입니다.

요소 값을 요소 문자열속성에 직접 입력하면 수평 스크롤이 적용되지 않습니다.
horizontal을 쓰려면 디자이너의 ListData 속성의 버튼을 눌러 추가해야 합니다.


ListViewLayout 속성

기존에는 단순히 텍스트를 나열할 수만 있었으나, 이제 이 속성으로 부가 텍스트나 이미지를 함께 표시할 수 있습니다.

총 5개의 레이아웃이 있습니다.


1. MainText

텍스트 요소 하나만 표시하는 기본적인 레이아웃입니다.


2. MainText,DetailText(Vertical)

하나의 주 텍스트와 하나의 디테일(Detail) 텍스트를 수직으로 배치합니다.


3. MainText,DetailText(Horizontal)

주 텍스트와 디테일 텍스트를 수평으로 배치합니다.


4. Image,MainText

이미지를 좌측에 표시하고, 주 텍스트를 옆에 표시합니다.


5. Image,MainText,DetailText(Vertical)

이미지를 왼쪽에, 주 텍스트와 디테일 텍스트는 그 오른쪽에 수직으로 배치합니다.


ListData 속성

ListData 속성에는 못 보던 버튼이 하나 생겼습니다.
새로 추가된 기능을 적용하기 위해서는 기존에 요소 문자열 속성에 쉼표로 구분하여 요소들을 나열한 것과 다르게, 이 버튼을 눌러서 값을 추가해야 합니다.

위에서도 설명했듯 요소 문자열로 요소들을 지정하면 레이아웃이나 방향(orientation)이 정상적으로 적용되지 않습니다.
요소 문자열과 ListData 두 군데 모두 값이 설정돼있으면 ListData가 우선됩니다.

물론 블록에서도 값을 추가할 수 있습니다.

버튼을 누르면 창이 뜨는데, 레이아웃 종류와 관계없이 값이 없으면 위와 같이 뜹니다.
Click to Add Row Data 버튼을 눌러가면서 값을 한 줄씩 추가할 수 있습니다.

이 버튼을 눌렀을 때 나타나는 모습은 레이 아웃별로 조금씩 다릅니다.



MainText의 경우에는 단순히 하나의 텍스트만 입력 가능합니다.

MainText,DetailText(Vertical)과 MainText,DetailText(Horizontal)의 경우에는 메인 텍스트와 디테일 텍스트를 입력할 수 있습니다.

Image,MainText의 경우에는 메인 텍스트와 앱인벤터에 미디어로 업로드한 이미지를 선택할 수 있습니다.
이미지를 선택하지 않으면 이미지는 나타나지 않습니다.

Image,MainText,DetailText(Vertical)의 경우에는 메인 텍스트, 디테일 텍스트, 이미지를 선택할 수 있습니다.


ImageWidth, ImageHeight 속성

목록뷰에 사진을 표시할 경우 사진의 각각 너비, 높이를 지정합니다.



~Detail 속성

FontSizeDetail, FontTypefaceDetail, TextColorDetail 속성은 각각 디테일 텍스트의 크기, 폰트, 색상을 지정하는 데 사용합니다.



추가된 블록들

속성 블록을 제외하고 총 5개의 함수 블록이 추가되었습니다.

1. CreateElement

세 개의 텍스트 파라미터 mainTextdetailText,imageName을 받는 함수 블록입니다.
이 세 값을 받아 새 레이아웃에 적용할 수 있는 요소를 생성합니다.

기존에는 텍스트 하나만 나열했으므로 단순 텍스트 리스트를 요소 속성에 지정했지만, 이제는 레이아웃에 따라 최대 세 개의 값이 쓰이므로 이 블록을 이용해 하나의 요소를 생성합니다.

불필요한 값은 굳이 입력하지 않고 빈 텍스트 블록만 끼워두어도 됩니다.

요소를 딕셔너리 형식으로 반환하며, 내부적으로 다음과 같은 형식입니다:

{
"Text1": "메인 텍스트",
"Text2": "디테일 텍스트",
"Image": "이미지 이름"
}



2. Get~ 

이 세 블록은 위의 CreateElement 블록으로 생성한 딕셔너리 형식의 요소 한 개로부터 각각 디테일 텍스트, 이미지 이름, 메인 텍스트를 가져와 텍스트 형식으로 반환합니다.

참고로 현재 선택된 항목에 대한 값은 위 세 블록이 아니라 속성 가져오기 블록에 추가된 블록으로 가져올 수 있습니다.
ㆍ 메인 텍스트는 기존처럼 선택된 항목 속성에서 가져옵니다.
ㆍ 디테일 텍스트는 새로 추가된 SelectionDetailText 속성에서 가져옵니다.
ㆍ 이미지 이름은 아직 속성에서는 가져올 수 없습니다.


3. Refreh 

현재 목록뷰의 요소에 변경사항이 있다면 그것을 적용합니다.
다만 내부적으로 값 변경이 있으면 실행되기에 큰 필요성은 못 느끼겠습니다.
내부적으로는 리스트뷰의 어댑터를 재생성해서 데이터를 갱신합니다.



블록으로 항목 추가

위에서 디자이너에서 항목을 정적으로 추가하는 것만 봤다면, 이제는 CreateElement 블록을 이용해 동적으로 항목을 추가해보겠습니다.

블록이 바뀌었지만 어렵지 않습니다.
위 사진처럼 요소 속성에 리스트를 두는데, 리스트의 값은 텍스트 대신 CreateElement 블록으로 요소를 생성하여서 꼽으면 됩니다.

이게 끝입니다.

댓글

제목과 URL을 복사했습니다