이 섹션에서는 데이터베이스의 레코드와 같은 항목 리스트를 표시하는 데 유용한 컨테이너 유형인 Repeating group (반복 그룹)을 다룹니다.
(1) Repeating group(반복 그룹) 정의
반복 그룹은 각 항목에 대해 그룹의 콘텐츠를 한 번씩 반복하여 데이터베이스의 레코드와 같은 항목의 목록(List)을 표시하는 데 사용되는 컨테이너 유형입니다.
- 이전 글에서는 그룹(Group)에 데이터를 로드하고 하위 요소가 해당 데이터를 참조하도록 허용할 수 있는 일반 그룹(Group)에 대해 살펴보았습니다.
- 반복 그룹은 단일 레코드가 아닌 데이터 목록(List)와 함께 작동하도록 설정된다는 점을 제외하면 거의 동일한 방식으로 작동합니다.
예시)
예를 들어 앱에 사용자 목록(List)을 표시하고 사용자 이름 및 이메일 주소와 같은 정보를 포함하고 싶다고 가정해 보겠습니다.
- 해당 정보를 표시하는 Repeating group(반복 그룹)에 텍스트 요소를 추가하면 목록에 있는 사용자 수만큼 그룹의 콘텐츠가 복제됩니다. 목록에 5명의 사용자가 포함된 경우 반복 그룹에 추가하는 모든 요소는 5번 반복됩니다.
다음으로 반복 그룹을 사용하여 창의적인 방식으로 유연한 데이터 목록을 설정할 수 있는 몇 가지 방법을 살펴보겠습니다.
(2) List (목록) 디자인
아래 예시에는 Repeating group(반복 그룹)이 작동하는 방식에 대해 알아야 할 몇 가지 중요한 사항이 있습니다.
- 콘텐츠 유형을 User(사용자)로 설정했습니다. 즉, 반복 그룹은 User(사용자) 목록(List)을 데이터 소스로 허용합니다.
- 데이터 소스에서 Do a search for 명령을 사용하여 사용자 목록을 로드합니다.
- Repeating group(반복 그룹)에서 내부의 텍스트 요소가 각 행에 대해 한 번씩 반복되는 것을 볼 수 있습니다. 각 행을 셀이라고 합니다.
- 표현식에 현재 셀의 X를 포함하여 각 셀의 사용자를 참조할 수 있습니다.
- 아래 예시에서는 콘텐츠 유형이 사용자로 설정되어 있으므로 현재 셀의 사용자가 됩니다. 현재 사용자를 참조하여 이름을 가져올 수 있습니다.
아래의 실제 앱에서 어떻게 결과가 보이는지 봅시다.
현재 셀의 사용자 이름을 참조하여 각 셀에 로드된 사용자에 대한 정보를 표시할 수 있습니다.
(3) Card (카드) 디자인
이전 예시에서 본 것처럼 Repeating group(반복 그룹)을 사용하여 CRM의 연락처 목록 또는 제품 인벤토리 시스템의 제품과 같은 간단한 목록을 설정할 수 있습니다.
제품 카드와 같이 다른 방식으로 디자인된 목록을 설정하는 강력한 방법으로도 사용할 수 있습니다.
이 예시에서는 두 셀의 Repeating group(반복 그룹)을 보여줍니다. 이러한 셀 내부에서 일반 그룹 및 기타 요소를 결합하여 이전에 만든 목록과 매우 다른 디자인을 만듭니다.
- 위의 그림에서 그림자가 있는 흰색 카드는 반복 그룹의 셀 내에 배치된 일반 그룹입니다. 흰색 배경, 둥근 모서리 및 그림자로 스타일을 지정하고 이미지, 몇 가지 텍스트 요소 및 버튼을 배치하여 디자인을 완성했습니다.
- 버블 디자인 편집기에서 요소를 보면 각 요소가 상위 그룹의 데이터(여기서는 제품)를 참조한다는 것을 알 수 있습니다. 상위 그룹(그림자가 있는 그룹)은 차례로 반복 그룹의 현재 셀을 참조합니다.
- 데이터베이스 관점에서 우리가 보고 있는 제품에는 Repeating group(반복 그룹)의 각 셀에 대해 로드하고 표시할 수 있는 이름(텍스트), 가격(숫자), 이미지(이미지) 및 설명(텍스트)에 대한 필드가 포함됩니다.
이 예시에서는 Product라는 데이터 Type을 설정하고 Repeating group(반복 그룹)에 표시할 수 있는 몇 가지 필드를 할당했습니다.
(4) Masonry(벽돌) 디자인
Bubble의 반응형 엔진을 사용하면 Repeating group(반복 그룹)을 사용하여 완전히 반응하는 Masonry(벽돌) 디자인을 설정할 수 있습니다.
- 항목 표시를 Masonry(벽돌) 그리드로 사용하면 모든 화면 크기에 맞게 자동으로 조정되는 동적 크기로 반복 그룹의 항목을 표시할 수 있습니다.
: Masonry(벽돌) 디자인을 사용하려면 몇 가지 를 설정해야 합니다.
Masonry(벽돌) 레이아웃에서는 반응형 엔진(responsive engine)을 사용해야 합니다.
- 반복 그룹의 속성 편집기에서 Set fixed number of rows 및 Stretch rows to fill vertical space 가 선택 해제되어 있는지 확인하십시오.
- 반복 그룹의 스크롤 방향(Scroll Direction of the Repeating Group)을 vertical(세로)로 설정합니다. (위에 항목 체크 해제 시에만 표시됩니다.)
- 항목 중 Display items as masonry grid 표시 체크
masonry 설정이 지정되면 행 셀 간격 및 열 셀 간격 설정을 변경하여 각 셀 사이의 간격을 픽셀 단위로 조정할 수 있습니다.
