안녕하세요. 이지이지입니다.
이번 포스팅에서는 위의 이미지에서 보이는 것과 같은 팝업 시트 사용법에 대해 알려드리도록 하겠습니다.
c.f.) 팝업 시트라는 용어는 제가 붙인 것이지 앱인벤터 정식 용어는 아닙니다. 하단에서 나타나는 시트는 네이티브앱(자바, 코틀린 등)에서는 BottomSheet라고 부릅니다.
앱인벤터에서 팝업 시트를 사용하기 위해서는 확장프로그램(extension)을 사용해야 합니다.
오늘 사용할 확장 프로그램은 두 가지 입니다.
1. CustomSheet: 팝업 시트 확장프로그램
2. GetMetrics: CustomSheet에서 크기를 지정할 때 사용할 확장프로그램
제가 만든 소스 파일(extension 포함)과 확장프로그램을 내려받아 참고하시기 바랍니다.
| CustomSheet 블록 설명 |
팝업 시트는 팝업으로 사용할 컴포넌트를 미리 만들어두고, 이 컴포넌트를 확장 프로그램 CustomSheet에 연결하여 사용합니다.
보통 HorizontalArrangement 또는 VerticalArrangement 컴포넌트를 팝업 시트로 많이 사용합니다.
위의 블록은 확장프로그램에 팝업 시트를 사용할 컴포넌트를 연결하는 블록입니다.
① id: 팝업 시트를 여러 개 등록할 수 있으므로 지금 등록하는 팝업 시트에 고유 번호를 부여합니다.
사용자가 임의대로 번호를 부여할 수 있으며, 정수로 입력합니다.
② component: 팝업 시트로 사용할 컴포넌트를 지정합니다.
③ gravity: 팝업 시트의 위치를 설정하는 것으로 정수로 입력합니다. 48(위), 80(아래), 17(가운데)
④~⑤ height & width: 높이와 너비를 설정하는 것으로 dp(Density Independent Pixel) 값으로 입력합니다.
- -1: fill parent, -2: wrap content(automatic과 같다고 생각하면 됩니다.)
- 앱인벤터에서는 기본적으로 px(픽셀)을 사용하는데, dp의 사용이 선뜻 다가오질 않습니다.
- 그래서 GetMetrics 확장프로그램을 사용하는데, 위의 예에서 접혀져 있는 height 부분의 블록을 보겠습니다.
- 기본적으로 CustomSheet 확장프로그램의 매뉴얼도 없고, width와 height부분에 dp 값을 넣으라고 하는데... 정확하지 않아 여러 테스트를 거쳐 보았습니다.
위의 블록 GetMetrics1.HeightPixels x GetMetrics1.Density의 결과, 높이가 전체 화면으로 설정됩니다.
뒤에 6으로 나누어 주어 전체 화면의 1/6만큼 팝업 시트의 크기를 설정한 것입니다.
더 자세한 사항은 dp to px, dpi 등으로 검색해서 알아보시기 바랍니다.
(저도 아직 이 부분에 대해서는 배움이 필요하네요.)
⑥ dimAmount: 팝업 시트가 활성화되었을 때, 배경의 흐림 정도를 설정합니다.
0~1사이의 소수로 입력합니다.
⑦ animationType: 애니메이션 유형을 설정합니다. (⑩ swipeEnabled와 관련 있습니다.)
⑧ animationDuration: 애니메이션의 시간을 설정합니다. milliseconds 단위이며 1,000은 1초를 나타냅니다.
⑨ isCancelable: 뒤로가기 버튼을 눌렀을 때, 팝업 시트의 사라짐 여부를 설정하며 true 또는 false로 입력합니다.
⑩ swipeEnabled: 사용자가 스와이핑하여 팝업 시트를 사라지게 할 수 있을지 여부를 설정하며 true 또는 false로 입력합니다.
true로 설정했을 경우 스와이프의 방향은 ⑦ animationType의 반대 방향입니다.
- id의 팝업시트를 사라지게 합니다.
- 팝업 시트로 등록된 요소들의 Id를 리스트로 가져옵니다.
- 지정된 id의 시트가 보여지고 있는지의 여부를 가져옵니다.
- 지정된 id와 확장프로그램과의 연결을 해제합니다.
- 지정된 id의 컴포넌트가 팝업 시트로 나타나게 합니다.
이상 앱인벤터에서 팝업 시트를 사용하는 방법이었습니다.
유용하고 널리 쓰이는 UI이니 잘 활용하시기 바랍니다.~~~
댓글