[앱인벤터 기초] 레이아웃 - 스크롤가능 수평배치, 수직배치 이해하기

스크린에 넣는 컴포넌트는 한줄에 하나씩만 들어갈 수 있습니다.  한 줄에 여러개의 컴포넌트들을 넣고 싶을 때에는 레이아웃 요소들을 사용하면 되는데 기존의 수평배치와 수직배치는 스마트폰 화면 길이를 벗어나는 컴포넌트는 표시되지 않습니다.  스마트폰 화면을 벗어날때는 스크롤가능 수평배치, 스크롤가능 수직배치를 사용하면 자동으로 스크롤을 만들어서 모든 컴포넌트를 확인할 수 있습니다. 

---

스크롤가능수평배치 블록

 

스크롤수평배치는 컴포넌트들이 왼쪽에서부터 오른쪽으로 가로로 정렬되도록 하는 레이아웃입니다. 수평배치는 기본적으로 수평정렬은 왼쪽에서부터, 수직정렬은 위쪽에서부터 시작됩니다. 화면 안에 컴포넌트들이 정렬되게 할 때 주로 사용합니다.  수평정렬 속성을 가운데, 오른쪽은 선택할 수 없고 왼쪽으로만 선택할 수 있습니다. 

블록	설명
	스크롤가능수평배치 안에 들어있는 컴포넌트들이 가로로 정렬될 때 왼쪽, 가운데, 오른쪽으로 정렬되도록 설정합니다. 단, 너비가 자동일 경우 적용되지 않습니다.
	스크롤가능수평배치 안에 들어있는 컴포넌트들이 세로로 정렬될 때 위쪽, 가운데, 아래로 정렬되도록 설정합니다. 단, 높이가 자동일 경우 적용되지 않습니다.
	배경색을 가져오거나 변경할 수 있는 블록입니다. 기본적으로 rgba 배경값을 가지고 있습니다.
	세로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 높이비율은 스크린의 높이를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.
	스크롤가능수평배치에 표시할 이미지 파일명을 지정합니다. 텍스트 속성을 사용합니다.  * 한글 파일명은 지원하지 않습니다.
	컴포넌트의 보이기여부 값을 가져오거나 변경할 수 있는 블록입니다. 참, 거짓 속성을 사용합니다. 참이면 컴포넌트가 보이고 거짓이면 컴포넌트가 화면에서 보이지 않습니다.
	가로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 너비비율은 스크린의 너비를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.

 

스크롤가능수직배치 블록

 

스크롤수직배치는 컴포넌트들이 위쪽에서부터 아래쪽으로 세로로 정렬되도록 하는 레이아웃입니다. 수직배치는 기본적으로 수평정렬 속성은 위쪽에서부터, 수직정렬 속성은 위쪽에서부터 시작됩니다. 화면 안에 컴포넌트들이 정렬되게 할 때 주로 사용합니다. 수평배치 블록과 같습니다.

블록	설명
	스크롤가능수직배치 안에 들어있는 컴포넌트들이 가로로 정렬될 때 왼쪽, 가운데, 오른쪽으로 정렬되도록 설정합니다. 단, 너비가 자동일 경우 적용되지 않습니다.
	스크롤가능수직배치 안에 들어있는 컴포넌트들이 세로로 정렬될 때 위쪽, 가운데, 아래로 정렬되도록 설정합니다. 단, 높이가 자동일 경우 적용되지 않습니다.
	배경색을 가져오거나 변경할 수 있는 블록입니다. 기본적으로 rgba 배경값을 가지고 있습니다.
	세로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 높이비율은 스크린의 높이를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.
	스크롤가능수직배치에 표시할 이미지 파일명을 지정합니다. 텍스트 속성을 사용합니다.  * 한글 파일명은 지원하지 않습니다.
	컴포넌트의 보이기여부 값을 가져오거나 변경할 수 있는 블록입니다. 참, 거짓 속성을 사용합니다. 참이면 컴포넌트가 보이고 거짓이면 컴포넌트가 화면에서 보이지 않습니다.
	가로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 너비비율은 스크린의 너비를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.

 

---

스크롤가능수평배치, 수직배치 사용해보기

 

파란색 배경은 수평배치이고 초록색 배경은 수직배치입니다. 버튼을 여러개 넣었을 때 화면에 어떻게 보이는 지 확인해봅시다.

속성	스마트폰 화면