https://github.com/TGoddessana/MyBodyCalculator/tree/before-auto-layout

위의 파일을 기반으로, 작업을 시작합니다.

오토 레이아웃을 적용함으로서 이루고자 하는 것

위와 아래 사진은 각각 다른 아이폰 기기에서 앱을 구동했을 때의 레이아웃 상태입니다. 아이폰 11을 기반으로 레이아웃을 제작하였기 때문에, 아래의 아이폰 13 미니 기기에서는 레이아웃이 어딘가 치우쳐져 있는 것을 볼 수 있죠. 오토 레이아웃을 적용함으로서, 다른 기종에서도 화면의 일관성을 유지하도록 제작해보려 합니다.

화면을 가로로 돌리지 못하도록 설정

    func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
           
           return UIInterfaceOrientationMask.portrait
       }

위의 소스를 AppDelegate.swift에 추가해서 화면을 돌렸을 때에 화면이 길게 늘어지지 않도록 설정했습니다. 세로 모드로 고정시켜 놓는 쪽이 조금 더 편하게 앱을 사용할 수 있을 것이라 생각했기 때문입니다. 보통 가로 모드로 전환하면 쿼티 키보드가 뜨는데 이는 화면을 많이 가리기도 해서 저의 경우는 잘 쓰지 않는 편입니다. 아무튼, 위의 코드를 넣고 앱을 실행하면 다음과 같이 화면을 돌려도 화면의 모드가 고정됩니다.

맨 위 라벨 정렬하기

위의 “BMI 계산기” 부분을 처리해 보도록 하겠습니다. 오토 레이아웃에서 제일 기본적인 것은,

• 해당 뷰의 좌표
• 해당 뷰의 크기

를 알면 됩니다.

위의 사진에서처럼 크기를 지정해 주면 옆에서 제약 조건이 늘어났음을 확인할 수 있습니다.

저는 위의 라벨이, 기기의 종류와 상관없이 항상 세로의 정가운데에, 그리고 맨 위에서 아래로 10만큼 떨어져 있기를 원합니다. 먼저 정렬 부분을 처리해 보겠습니다.

이제 위에서 아래로 10만큼 떨어지게 하는 제약 조건을 추가해 보겠습니다.

위의 작업을 완료하고 나면 요소를 덮고 있던 빨간색 줄이 없어진 것을 알 수 있습니다. 이는 xcode에서 오토 레이아웃을 계산할 수 있게 되었음을 의미합니다.

아이패드로 위의 앱을 구동해 보았을 때, 위의 사진처럼 중앙에, 그리고 위에서 아래로 일정 간격만큼 떨어지게 잘 적용된 모습을 볼 수 있죠. 비록 하나만 클리어했지만, 첫 번째 오토 레이아웃을 성공적으로 적용했습니다.

Stack View 적용하기

stack : (깔끔하게 정돈하여) 쌓다[포개다]; 쌓이다, 포개지다

스택은 위와 같은 의미를 가지고 있습니다. 스택 뷰를 적용하면 각각의 뷰들을 쉽게 나열할 수 있습니다.

가로 스택 뷰를 불러와서 각각 숫자를 넣는 부분들을 쌓아 뒀습니다.

위와 같이 여러 개의 스택 뷰들을 중첩하는 것도 가능합니다.

뷰끼리의 제약 조건 설정하기

제가 원하는 것은 위처럼 각각의 모서리 아랫부분에 양옆이 맞춰지는 것입니다.

두 요소(스택 뷰와 맨 위의 라벨) 을 선택한 다음, 두 제약 조건들 ( 왼쪽에 맞추기, 오른쪽에 맞추기) 를 선택해 주면 위와 같이 원하는 대로 결과가 나옵니다.

그런데, 위의 것에서 실행 버튼을 누르면 정렬만 잘 되어 있을 뿐 나머지는 위로 올라가 있네요. 이것은 우리가 스택 뷰 자체의 위치를 정해주지 않았기 때문입니다.

이 문제를 해결해보겠습니다. 아시겠지만, 위의 스택 뷰 모둠은 아래의 사진과 같은 구성으로 되어 있습니다.

위에서 말했던, 스택 뷰를 중첩할 수 있다는 의미는 바로 이것입니다. 1번 스택 뷰, 그리고 맨 위의 라벨을 동시 선택한 다음, 제약 조건을 걸어 주겠습니다.

서로의 위 모서리 부분을 맞추어 주는 Top edges 정렬 옵션을 사용하여 위와 같게 만들 수 있습니다. 저의 경우, 검정색 스택(모든 걸 총괄하는 스택) 뷰의 윗부분과 라벨의 윗부분의 차이를 120만큼 주었습니다.

마지막 – 사진 처리하기

제가 원하는 것은, 예를 들면 아이패드와 같이 큰 화면에서 위의 앱을 구동했을 때에 사진이 그만큼 커지는 것입니다.

그러면 아래와 같이 제약 조건들을 주면 됩니다.

• 제약 조건 1의 사진을 잘못 그렸네요. 아랫쪽의 모서리를 슈퍼 뷰의 아랫 모서리 부분과 함께 선택한 후, 제약 조건을 걸어 줍니다.

아래의 제약 조건 2는 뷰의 전체(슈퍼 뷰) 와 사진을 선택한 후 제약 조건을 걸어주면 됩니다.

결과물

글의 처음에서 의도했던 대로 오토 레이아웃이 잘 동작하는 것을 확인할 수 있습니다.

오토 레이아웃의 가장 기본적인 기능을 사용해서 프로젝트에 적용해보았는데, 추후 테이블 뷰 등과 같은 여러 가지 뷰들에 대해서 오토레이아웃을 적용하는 것도 한번 포스팅 해 보겠습니다!