Main Content

자동 재배치로 크기가 조정되는 앱 만들기

이 예제에서는 앱 콘텐츠를 자동으로 확대하고 축소하고 재배치하는 방식으로 크기 조정에 반응하는 자동 재배치 기능이 있는 앱을 만드는 방법을 보여줍니다. 해상도와 화면 크기가 다양한 여러 환경에서 공유하려는 앱에 자동 재배치를 사용합니다. 자동 재배치를 사용하면 앱이 각 앱 사용자의 화면 크기에 맞게 앱 콘텐츠의 크기를 조정하고 재배치할 수 있습니다. 앱의 자동 재배치에 대한 자세한 내용은 Apps with Auto-Reflow 항목을 참조하십시오.

앱의 자동 재배치 동작

이 앱에서 컨트롤은 왼쪽의 고정 패널에 있습니다. 재배치되는 오른쪽 패널에는 시각화와 데이터 테이블이 포함된 두 개의 탭이 있습니다. 이 패널의 앱 콘텐츠는 앱 창의 크기에 따라 크기가 조정되고 재배치됩니다. 예를 들어, 앱 창의 너비를 줄이면 오른쪽 패널이 크기 조정에 맞게 동적으로 조정되고 고정된 왼쪽 패널 아래로 이동됩니다.

자동 재배치 기능이 있는 앱 만들기

먼저 앱 디자이너 시작 페이지에서 자동 재배치 기능이 있는 2단 앱을 새로 만듭니다. 앱 디자이너가 2개의 패널을 만듭니다. 왼쪽 패널은 고정되어 있고 오른쪽 패널은 재배치됩니다. 그런 다음 디자인 보기에서 컴포넌트의 레이아웃을 설정합니다.

  • 컴포넌트 라이브러리에서 컨트롤을 왼쪽 패널에 추가합니다. 관련 컨트롤을 그룹화하려면 왼쪽 패널 내에서 추가 패널을 사용합니다.

  • 시각화를 위한 좌표축과 탭 그룹 내의 데이터 테이블을 오른쪽 패널에 추가합니다. 앱 창의 크기를 조정하면 재배치 패널 내 컴포넌트들의 레이아웃이 자동으로 조정됩니다.

앱의 레이아웃을 설정한 후 코드 보기에서 사용자 입력에 반응하도록 앱을 프로그래밍합니다. 사용자 입력을 기반으로 좌표축과 테이블을 업데이트하는 콜백 함수를 만드는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오. 완전하게 코딩된 앱을 살펴보고 앱에서 자동 재배치가 어떻게 작동하는지 확인하려면 앱 디자이너에서 이 예제를 실행하십시오.

참고 항목

함수

속성

관련 항목