NEW 앱인벤터2 강좌23. 컴포넌트 탐구 – 레이아웃(수평배치/수직배치/스크롤배치…)

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

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

이번 강좌에서는 레이아웃으로 분류되어있는 컴포넌트들에 대하여 알아보겠습니다.


0. 개요

레이아웃 컴포넌트들은 팔레트에 레이아웃이라는 이름으로 묶여있으며, 총 5개가 있습니다.
이것들 각각은 크게 할 이야기가 많지 않아서 그냥 통으로 묶어서 소개하겠습니다.

이름에서 알 수 있듯 수평배치는 컴포넌트들을 수평(가로)으로 나열합니다.
스크롤 가능 수평 배치는 수평배치에 수평 스크롤이 더해진것으로, 화면을 벗어나면 자동으로 스크롤이 생깁니다.
수직 배치와 스크롤 가능 수직 배치도 수평 배치와 수평이냐 수직이냐의 차이뿐입니다.

조금 특이한게 표배치인데, 표처럼 컴포넌트들을 딱딱 정렬할 수 있습니다.

각 컴포넌트의 영어 이름은 다음과 같습니다:

한글명

영어명

수평 배치

HorizontalArrangement

스크롤 가능 수평 배치

HorizontalScrollArrangement

표형식 배치

TableArrangement

수직 배치

VerticalArrangement

스크롤 가능 수직 배치

VerticalScrollArrangement


1. 형태

위에서 보시다시피 모양에는 거의 차이가 없습니다.
표형식 배치만 내부 색이 하얀색이고 나머지는 연한 회색입니다.
또한 내부에 아무 컴포넌트도 없으면 저렇게 정사각형 모습입니다.

내부에 컴포넌트가 들어가면 모양에 따라 바뀝니다.

1. 속성

속성이나 블록이나 표배치외의 나머지들은 모두 동일하므로 묶어서 설명하겠습니다.

수평배치/수직배치/스크롤 가능 배치 속성

속성명

설명

수평 정렬(AlignHorizontal)

수평 정렬 시 정렬 기준을 지정합니다.

너비가 자동이면 적용되지 않습니다.

수직 정렬(AlignVertical)

수직 정렬 시 정렬 기준을 지정합니다.

높이가 자동이면 적용되지 않습니다.

배경색(BackgroundColor)

배경색을 지정합니다.

이미지가 지정되어있으면 이미지가 없어질 때 까지 표시되지 않습니다.

높이(Height)

컴포넌트의 높이를 지정합니다.

너비(Width)

컴포넌트의 너비를 지정합니다.

이미지(Image)

배경 이미지를 지정합니다.

배경색보다 우선순위가 높이 배경색이 있어도 이미지가 있다면 이미지가 보입니다.

보이기 여부(Visible)

컴포넌트의 보이기 여부를 지정할 수 있습니다.

만약 거짓이면 내부의 모든 컴포넌트도 같이 보이지 않게 됩니다.

위에서 수평 정렬과 수직 정렬은 다음과 같이 배치되는 것을 뜻합니다:

표형식 배치 속성

속성명

설명

열(Columns)

표시할 표의 세로 칸 수를 지정합니다.

높이(Height)

컴포넌트의 높이를 지정합니다.

너비(Width)

컴포넌트의 너비를 지정합니다.

행(Rows)

표시할 표의 가로 칸 수를 지정합니다.

보이기(Visible)

컴포넌트의 보이기 여부를 지정할 수 있습니다.

만약 거짓이면 내부의 모든 컴포넌트도 같이 보이지 않게 됩니다.

행과 열이 헷갈리시는 분들은 이렇게 외워보세요:
가로 행! 세로 열!
저도 이렇게 외웠습니다
그런데 앱인벤터는 이게 반대입니다…

2. 블록

수평배치/수직배치/스크롤 가능 배치 속성 지정 블록

블록

입력형식

설명

숫자

수평 정렬 방식을 지정합니다.

1=왼쪽 / 2=가운데 / 3=오른쪽

숫자

수직 정렬 방식을 지정합니다.

1=위 / 2=가운데 / 3=아래

색상

배경색을 지정합니다.

숫자

높이를 px 단위로 지정합니다.

숫자

높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

텍스트

배경 이미지를 지정합니다.

논리

컴포넌트의 보이기 여부를 지정합니다.

숫자

너비를 px 단위로 지정합니다.

숫자

너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

표형식 배치 속성 지정 블록

블록

입력형식

설명

숫자

높이를 px 단위로 지정합니다.

숫자

높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

논리

컴포넌트의 보이기 여부를 지정합니다.

숫자

너비를 px 단위로 지정합니다.

숫자

너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

표배치의 경우 속성 블록에 별거 없습니다.
블록으로는 행과 열의 개수를 바꾸지 못함에 유의하세요.

수평배치/수직배치/스크롤 가능 배치 속성 블록

블록

반환형식

숫자

숫자

색상

숫자

텍스트

논리

숫자

컴포넌트

표형식 배치 속성 블록

블록

반환형식

숫자

논리

숫자

컴포넌트

3. 자세히 알아보기

속성 같은건 위에서 알아봤고요,
이제 각각 실제로 어떻게 쓰이는지 알아보겠습니다.

3-1. 수평 배치

내부의 컴포넌트를 수평으로 배열합니다.

다만 위 사진처럼 넘치면 짤리는것을 볼 수 있습니다.
이렇듯 공간이 부족하면 마지막 버튼의 모양이 이상하게 보이며 잘립니다.

3-2. 스크롤 가능 수평 배치

수평 배치에 스크롤 기능이 추가된것입니다.
위 상황처럼 공간이 넘칠경우 자동으로 가로 스크롤이 생깁니다.

3-3. 수직 배치

수평 배치와는 반대로 컴포넌트들을 수직으로 나열해줍니다.
다만 기본적으로 컴포넌트는 위에서 아래로 쌓이기 때문에 꼭 필요한게 아니면 크게 쓰지 않아도 됩니다.

마찬가지로 영역을 벗어나면 짤립니다.
다만 위 같은 경우는 스크린의 속성에서 스크롤을 허용해도 해결 가능합니다.

3-4. 스크롤 가능 수직 배치

보시듯 스크롤이 가능해집니다.

이렇게 높이를 적당히 지정하면(사진에서는 40%) 저 부분에서만 부분적으로 스크롤이 되게 할 수 있습니다.

3-5. 표형식 배치

표형식 배치는 내부 컴포넌트들을 마치 표의 칸에 넣듯이 정렬할 수 있습니다.
이걸 쓰려면 먼저 행(Row)과 열(Colums)를 알아야 하는데요…
앱인벤터는 이상하게도 이걸 반대로 쓰고 있습니다.
행이 가로고 열이 세로인데 앱인벤터서 행을 늘리면 세로 칸이 늘어나는 이상한 상황이 나오게 됩니다…

하여튼 적당히 숫자를 바꿔봅시다.
열을 4로, 행을 2로 바꿔보세요. 아마 세로로 긴 직사각형이 될겁니다.
거기에 아무 컴포넌트나 하나 들고 왔다갔다 해보세요.

보시듯 움직일 떄 마다 칸이 나타나며 중간에 그냥 떡하니 배치하는 것도 가능한 것을 알 수 있습니다.
주로 딱딱 틀에 맞게 배치해야 하는 경우 쓰입니다.

댓글

제목과 URL을 복사했습니다