자동 레이아웃은 iOS 장치용 사용자 인터페이스 개발에 사용되는 제약 기반 레이아웃 시스템입니다. Auto Layout이라고도 하는 이 레이아웃 기반 제약 시스템은 기본적으로 다양한 크기와 방향의 화면에 적응하는 적응형 UI입니다.
자동 레이아웃은 개발자가 인접 요소 또는 상위 요소 사이의 관계를 정의하여 위치를 점유하는 제약 조건에 완전히 의존합니다.
왜 자동 레이아웃인가?
iOS 애플리케이션을 디자인하는 동안 개발 중인 UI가 모든 화면 크기 및 방향과 동등하게 호환되는지 확인해야 합니다. 자동 레이아웃은 원할 때 편리합니다.
아래 이미지를 고려하십시오. iPhone 6의 중앙에 유지되는 버튼은 다른 iOS 기기의 치수가 다르기 때문에 중앙에 다른 기기와 정렬되지 않습니다. 이 게시물에서는 제약 조건에 초점을 맞출 것이므로 치수에 대해 더 알고 싶다면 https://iosres.com/
을 확인하세요.
우리가 개발한 UI가 모든 장치와 방향에서 균일한지 확인하기 위해 Auto Layout을 사용할 것입니다. 자, 시작하겠습니다.
1단계 − Xcode 열기 → New Projecr → Single View Application → 이름을 "AutoLayout"으로 지정합니다.
2단계 − Main.storyboard를 열고 아래 그림과 같이 버튼을 추가합니다. 참고로 iPhone 7Plus로 장치를 선택합니다.
여기에서 제약 없이 임의의 위치에 하나의 버튼을 추가한 것을 볼 수 있습니다. 우리의 목표는 이 버튼을 중앙에 배치하고 모든 장치 및 방향과 호환되도록 하는 것입니다. 3단계로 이동하기 전에 정확히 무엇을 해야 하고 이를 달성하기 위해 어떻게 해야 하는지 이해합시다.
Xcode는 자동 레이아웃 제약 조건 → 자동 레이아웃 막대 및 Control-드래그를 정의하는 두 가지 방법을 제공합니다. 이 블로그에서도 자동 레이아웃 막대를 매우 자주 사용하지만 Control-드래그를 사용하는 방법도 알려 드리겠습니다. 인터페이스 빌더의 오른쪽 하단 모서리에 있는 Xcode에서 5개의 버튼을 볼 수 있습니다. 이 버튼은 제약 조건을 정의하는 데 사용되는 레이아웃 버튼입니다.
이제 자동 레이아웃 막대를 사용하여 두 버튼에 제약 조건을 제공할 것입니다.
완전한 제약 시스템이 작동하는 주요 이론은 4개의 매개변수(선행, 후행, 상단 및 하단)와 높이, 너비, 수직 및 수평 중심입니다.
3단계 − 버튼과 정렬 탭을 클릭하고 아래와 같이 컨테이너에서 수평 및 수직을 활성화합니다.
두 제약 조건을 모두 추가한 후 버튼이 화면 중앙에 정렬된 것을 볼 수 있습니다.
선택적으로 아래 그림과 같이 컨트롤 드래그 기능을 통해 동일한 결과를 얻을 수 있습니다. UI 구성 요소를 선택하고 컨트롤 버튼을 탭하고 드래그하여 제약 조건을 부여하고 중앙을 수평 및 수직으로 제공합니다.
4단계 − 이제 버튼의 너비와 높이를 정의합니다. 아래 그림과 같이 새 제약 조건 추가 옵션을 선택하고 높이와 너비를 추가합니다.
또는 컨테이너에 수평 및 수직을 제공하지 않으려는 경우 선행 제약 조건, 후행 제약 조건, 상단 여백 및 하단 여백을 제공할 수 있습니다.
5단계 − 따라서 필요한 모든 제약 조건을 제공했으므로 항상 4개의 가장자리를 기억해야 합니다. X축에 정렬, Y축에 정렬, 너비 및 높이 UI 구성 요소를 잡아야 합니다.
이제 다른 장치에서 실행하고 결과를 살펴보겠습니다. 우리는 다른 기기와 방향으로 달리게 될 것입니다.
제약 조건을 편집할 수도 있습니다. 수정하거나 제거하려는 경우 오른쪽 창의 유틸리티 영역에서 5번 옵션을 선택하고 이미지와 같이 아래로 스크롤합니다.
따라서 이 튜토리얼은 자동 레이아웃 및 제약 조건을 사용하여 적응형 UI를 개발하는 방법에 대해 간략하게 설명하기 위한 것입니다. 위의 기본 개념을 사용하여 여러 구성 요소를 사용해 볼 수 있습니다.