Main Content

그리드 레이아웃을 사용하여 앱 컴포넌트 위치와 크기 관리하기

앱 열기

이 앱은 앱의 크기를 조정할 때 그리드 레이아웃 관리자를 사용하여 앱 컴포넌트를 정렬하고 크기를 조정하는 방법을 보여줍니다. 그리드 레이아웃 관리자를 사용하면 각 컴포넌트의 픽셀 위치를 설정하지 않고도 앱 컴포넌트의 레이아웃을 쉽게 관리할 수 있습니다. 또한 그리드 레이아웃을 사용하면 크기 조정 동작을 더 유연하게 제어할 수 있습니다. 그리드 레이아웃 관리자의 사용 방법에 대한 자세한 내용은 앱 디자이너에서 그리드 레이아웃 관리자 사용하기 항목을 참조하십시오.

그리드 레이아웃의 컴포넌트 동작

아래 앱에서 왼쪽 패널의 UI 컴포넌트는 펄스의 파라미터를 제어합니다. 앱 창의 크기에 관계없이 일관된 경험을 제공하기 위해 그리드 레이아웃 관리자를 사용하여 컨트롤이 배치됩니다. 앱의 크기가 조정되면 그리드 레이아웃에서 컨트롤이 정렬됩니다. 오른쪽 패널에는 데이터 시각화를 위한 좌표축이 있어 사용자가 펄스의 파라미터를 변경하면 플롯이 그에 따라 업데이트됩니다. 그리드 레이아웃의 컴포넌트가 크기 조정에 어떻게 반응하는지 확인하려면 앱 창의 너비를 줄여 보십시오. 앱 창을 줄여도 그리드 레이아웃의 컴포넌트는 일관된 크기를 유지합니다.

그리드 레이아웃을 갖는 앱 만들기

디자인 보기에서 그리드 레이아웃 관리자를 추가하고 구성한 다음 UI 컴포넌트를 구성된 레이아웃에 추가해 보겠습니다.

  1. 앱 디자이너 시작 페이지에서 자동 재배치 기능이 있는 2단 앱을 새로 만듭니다.

  2. 그리드 레이아웃을 왼쪽 패널에 추가합니다. 앱 디자이너는 그리드 레이아웃을 전체 앱 창에 배치하거나 사용자가 그리드 레이아웃을 놓는 컨테이너에 배치합니다. (여기서는 왼쪽 패널임)

  3. 그리드의 행 개수와 열 개수를 조정합니다. 그리드 레이아웃을 마우스 오른쪽 버튼으로 클릭하고 상황별 메뉴에서 그리드 레이아웃 구성을 선택합니다. 행 또는 열을 선택하여 크기 조정 구성 메뉴에서 행과 열을 추가하고 제거할 수 있습니다. 이 예제에서는 그리드 레이아웃을 7개 행과 4개 열을 갖도록 정렬합니다.

  4. 크기 조정 구성 메뉴에서 ColumnWidth 속성과 RowHeight 속성을 설정합니다. 이 예제에서는 노브가 포함된 열의 ColumnWidth를 "1x"로 설정합니다. 이렇게 하면 앱의 크기가 변경되었을 때 열이 공간을 채우도록 조정됩니다. 이렇게 가중 너비를 사용하면 노브가 동일한 너비를 가지고 그리드 공간이 균일하게 사용되도록 할 수 있습니다. 편집 필드가 포함된 행의 RowHeight 속성을 "fit"로 설정합니다. 이렇게 하면 행이 자동으로 맞춰집니다.

  5. 컴포넌트 브라우저에서 그리드 레이아웃의 추가 속성을 지정합니다. ColumnSpacing 값과 RowSpacing 값을 편집하여 열과 행 사이의 간격을 변경하고 Padding 속성을 사용하여 그리드의 외부 둘레 주변의 간격을 조정합니다. 이러한 속성에 대한 자세한 내용은 GridLayout Properties 항목을 참조하십시오.

  6. UI 컴포넌트를 컴포넌트 라이브러리에서 그리드 레이아웃의 원하는 위치로 끌어와 그리드에 추가합니다.

그리드 레이아웃을 사용하여 앱의 레이아웃을 설정한 후 코드 보기에서 사용자 입력에 반응하도록 앱을 프로그래밍합니다. 콜백에 대한 자세한 내용과 사용자 입력에 따라 플롯을 업데이트하는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오. 앱을 실행하고 앱 창의 크기가 조정될 때 그리드 레이아웃이 컴포넌트의 위치와 크기를 어떻게 조정하는지 확인하려면 앱 디자이너의 예제를 실행하십시오.

참고 항목

함수

속성

관련 항목