페이지 레이아웃

단순히 위젯을 드래그 앤 드롭하여 페이지를 만들 수도 있지만 레이아웃 속성을 사용하면 설계 시간을 크게 단축할 수 있습니다. 위젯의 크기와 위치를 즉석에서 정확하게 제어할 수 있습니다.

layout 속성

패널 위젯의 기본 속성 그룹에는 하위 위젯을 정렬하는 방법을 정의하는 layout 속성이 있습니다. 이 속성에는 다음 세 가지 값을 사용할 수 있습니다.

  • 고정: 패널의 가장자리를 기준으로 하위 위젯을 정렬합니다.
  • 가로: 하위 위젯을 가로 줄에 나란히 정렬합니다.
  • 세로: 하위 위젯을 세로 줄에 위아래로 정렬합니다.

고정 옵션은 상위 패널을 절대적 기준으로 사용하여 하위 요소를 배치합니다. 가로 및 세로 옵션은 패널의 다른 위젯을 기준으로 왼쪽과 오른쪽 또는 위쪽과 아래쪽에 상대적으로 정렬합니다. 상대적으로 배치된 위젯은 주변 위젯과 함께 이동한다고 생각하면 됩니다. 실제로 이러한 방식으로 배치된 위젯을 유동적이라고 말합니다.

레이아웃 속성

모든 위젯에는 크기와 위치를 결정하는 레이아웃 속성 그룹이 있습니다. 레이아웃 그룹의 내용은 위젯 상위 패널의 layout 속성에 따라 변경됩니다.

고정 패널 레이아웃 속성

고정 패널의 위젯에는 패널의 가장자리를 기준으로 크기와 위치를 설정하는 레이아웃 속성이 있습니다. 위젯의 유형 및 개발자가 선택한 항목에 따라 표시되는 정확한 속성은 다르지만 모두 다음 네 가지 기본 유형으로 분류됩니다.

유형 설명 속성
위치 위치 속성은 위젯과 상위 위젯 가장자리 사이의 간격을 결정합니다. 위치 속성 옆의 체크박스를 선택하면 해당 항목이 사용 중지됩니다. 축에서 마지막 속성을 사용 중지하면 App Maker가 자동으로 반대 속성을 사용 설정합니다. top, bottom, left, right
절대 크기 해당 자동 크기 속성이 사용 설정되어 있지 않으면 절대 크기 속성이 위젯의 크기를 결정합니다. 크기 속성 옆의 체크박스를 선택하면 위치 속성이 사용 중지됩니다. 절대 크기 속성을 사용 중지하면 해당 축의 위치 속성에 따라 위젯의 크기가 결정됩니다. width, height
자동 크기 자동 크기 속성은 콘텐츠에 따라 위젯의 크기를 자동으로 조절합니다. 이 속성은 일부 위젯 유형에만 사용할 수 있으며 해당 절대 크기 속성을 사용 중지하지 않은 경우에만 사용할 수 있습니다. autoWidth, autoHeight
크기 제한 크기 제한 속성은 자동으로 크기가 조절된 절대 크기 축과 사용 중지된 절대 크기 축에 대한 최대 및 최소 크기 제한을 설정합니다. 크기에 위젯의 최소 또는 최대 허용 크기를 설정하는 값을 입력합니다. minWidth, maxWidth, minHeight, maxHeight

흐름 패널 레이아웃 속성

세로 및 가로 패널의 위젯에는 크기와 위치를 제어하는 레이아웃 속성도 있지만 위치 제어 옵션이 고정 패널보다 훨씬 더 제한적입니다. 유동 패널 속성은 가로 열과 세로 열로 정렬됩니다. 각 열은 해당 축을 제어합니다.

유형 설명 속성
크기 크기는 각 축에서 위젯의 크기가 설정되는 방법을 제어합니다. fixed, fit to content, fill parent 중에서 선택합니다. size
절대 크기 절대 크기 속성은 size 속성이 fixed일 경우 위젯의 크기를 결정합니다. width, height
크기 제한 제한 속성은 위젯의 size 속성이 fit to content 또는 fill parent일 경우 최대 및 최소 크기 제한을 설정합니다. minWidth, maxWidth, minHeight, maxHeight
정렬 정렬은 패널의 비유동 축 위치를 제어합니다. 가로 패널에서 위젯의 세로 정렬과 세로 패널에서 위젯의 가로 정렬을 결정합니다. align

간격

개별 위젯의 여백 및 패딩을 제어하려면 간격을 사용합니다.

유형 설명 속성
여백 페이지 위젯의 가장자리와 근처 객체 사이의 간격을 정의합니다. margin top, margin bottom, margin left, margin right
패딩 위젯의 콘텐츠와 가장자리 사이의 간격을 제어합니다. padding top, padding bottom, padding left, padding right

흐름 속성

고정 패널과 달리, 유동 패널의 위젯 배치는 대부분 패널 수준에서 이루어집니다. 유동 위젯을 배치하려면 상위 패널의 흐름 그룹에 있는 속성을 사용합니다.

속성 설명
wrap 이 속성은 흐름 축보다 넓은 위젯이 패널에 정렬되는 방식을 제어합니다.
justify 이 속성은 위젯이 흐름 축을 따라 패널에 정렬되는 방식을 제어합니다.
alignChidren 이 속성은 위젯이 비유동 축을 따라 패널에 정렬되는 방식을 제어합니다.
wrapAlign 이 속성은 wrap 속성이 사용 설정된 경우에 래핑되는 위젯이 패널에 정렬되는 방식을 제어합니다.

크기 속성

크기 속성 그룹은 레이아웃 그룹의 모든 크기 속성을 일반 속성으로 나열합니다. 따라서 데이터가 속성을 결합하여 값을 동적으로 바꿀 수 있습니다. 이 그룹의 속성은 모두 동시에 수정할 수 있으므로 충돌하는 값을 잠재적으로 설정할 수 있습니다. 예를 들어 left, right, width 값을 호환되지 않는 숫자로 설정할 수 있습니다. App Maker는 충돌하는 크기 속성에 일관된 동작을 보장하지 않습니다.

개요

캔버스 오른쪽에 있는 개요 탭을 사용하면 위젯을 잠그거나() 숨길 수 있습니다(). 잠긴 위젯은 캔버스에서 선택할 수 없으므로 실수로 이동되지 않습니다. 숨겨진 위젯은 캔버스에 렌더링되지 않으므로 그 아래에 있는 위젯과 상호작용할 수 있습니다. 숨겨진 위젯은 여전히 앱의 런타임에 표시됩니다. 잠겨 있거나 숨겨진 위젯의 위치를 변경하거나 수정하려면 개요에서 이름을 선택하세요.