앱인벤터 레이아웃-표형식배치 컴포넌트

 

레이아웃-표형식배치 컴포넌트

 

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.

이번 시간에는 레이아웃에서 표형식배치 컴포넌트에 대해 이해하고 실습을 하고자 한다. 표형식배치 컴포넌트는 표 모양으로 컴포넌트를 배치하는데, 열과 행의 수로 컴포넌트를  배치할 수 있고, 표의 높이와 너비를 지정할 수 있다.

 

. 표형식배치 컴포넌트

다양한 사용자 인터페이스의 컴포넌트를 표 형식으로 배치할 때 사용한다. 표의 높이와 너비로 표의 크기를 정하고 표의 행과 열의 개수로 배치할 수 있는 컴포넌트를 정한다. 기본으로 drag&drop하면 2x2의 표형식배치 컴포넌트가 삽입된다.

 

 

팔레트

표형식배치 컴포넌트는 팔레트에 “레이아웃”에 있다. 표형식배치 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 레이블이 추가된다.

 

뷰어

추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.

 

표형식배치를 하고 사용자인터페이스의 다양한 컴포넌트를 배치할 수 있다. 아래 예제는 표형식배치 컴포넌트에 4개의 버튼 컴포넌트를 배치한 예제 화면이다.

 

앱인벤터 레이아웃 표형식배치 컴포넌트 예시 화면

  

컴포넌트

컴포넌트에는 Screen1아래에 “표형식배치1”와 4개의 버튼 컴포넌트가 있다.

 

 

표형식배치 속성값

 

표형식배치 속성값에는 열, 행 등의 속성값이 있다.

열의 값은 세로 칸의 개수이고 행의 값은 가로 줄의 개수이다.

 

앱인벤터 표형식배치 컴포넌트 속성값

 

  

표형식배치 컴포넌트 블록

 

표형식배치 컴포넌트 블럭에는 높이와 높이비율, 너비와 너비퍼센트 블럭 등이 있다.

 

 

표형식배치 컴포넌트 가져오기/지정하기 블럭들

 

. 앱인벤터 표형식배치 컴포넌트 높이비율 블럭

 

높이를 현재 스크린 높이에 대한 비율로 표의 높이를 지정한다. 예로 높이 비율이 50이면 스크린 높이의 반만큼 길어진다.

 

앱인벤터 표형식배치 높이 블럭

 

 

. 앱인벤터 표형식배치 컴포넌트 너비퍼센트 블럭

 

너비를 현재 스크린 너비에 대한 비율로 지정한다. 예로 너비 비율이 50이면 스크린 너비의 50%만큼 길어진다.

앱인벤터 표형식배치 너비 블럭

  

지금까지 스크롤가능수평배치/수직배치 컴포넌트의 블럭들에 대해 살펴보았다.

 

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.