[ Swift ] AutoLayout

이번에는 IOS 개발을 진행하면서 편하게 진행할 수 있는 AutoLayout에 대해서 진행을 해보려고 한다.

 

AutoLayout

• 제약 조건( Constraints )을 이용해서 뷰의 크기와 위치를 지정하는 것
• 다양한 해상도 비율에 대응하기 위해 나온 기능
• Android에서 유사한 기능으로 ConstraintLayout이 있다.
• 세로보기 화면 뿐만 아니라 가로보기 화면에서도 가능하다.

즉, 정리를 한다면 다양한 해상도의 비율을 제공하는 각각의 클라이언트 기기( 핸드폰 )에 알맞은 UI를 보여줌으로써 정말 간단히 정의하자면 약간 반응형이라고 생각해도 좋을 것 같다.

 

확인을 위해서 Xcode를 실행하고, StoryBoard를 찾아가보자.

 

< StoryBoard >

Sample로 만든 프로젝트에서 좌측 네비게이터에서 main을 클릭하고 StoryBoard 영역에서 숨겨져있는 섹션들을 모두 펼치면 이렇게 StoryBoard Entry Point를 확인할 수 있다.

 

StoryBoard는 IOS 앱의 사용자 인터페이스를 시각적으로 표시하여 컨텐츠 화면간의 연결을 보여주는 시각적인 도움을 제공한다.

StoryBoard는 Scene으로 구성되며, 각 Scene은 ViewController와 View를 나타낸다.

즉, 여러 화면들을 StoryBoard를 활용하여 만드는 것이라고 생각하면 된다.

 

StoryBoard 우측 하단에는 제약조건을 이용하여 View의 위치를 지정해줄 수 있는 다양한 메뉴가 있고, 해당부분은 실습을 통해서 추가적으로 설명을 진행하도록 하겠다.

 

우선 위에서 언급한 내용대로 스토리보드의 화면으로 돌아가서

 

< StoryBoard에서 Label 추가 >

이렇게 StoryBoard 상태에서 위의 상단의 Toolbar에 + 버튼을 클릭하면 Storyboard 상에 넣을 수 있는 항목이 표시된다.

그럼 Label을 입력하여 나오는 항목을 드래그 드롭 하면 Storyboard에 추가할 수 있다.

 

< Label 문구 변경 >

옮겨 넣은 Label을 한 번 클릭하면 라벨의 사이즈를 바꿀 수 있고, 더블 클릭할 경우 해당 라벨이 활성화 된다.

또한 해당 Label의 문구를 더블클릭할 경우에는 Label에 표기되는 문구를 수정할 수 있다. 필자는 Hello World로 입력을 진행했다.

 

또한 Label의 문구를 수정한 후에 enter를 입력할 경우 우측의 이미지와 같이 자동으로 라벨의 사이즈를 문구에 맞게 맞춰서 줄여준다.

해당 문구에 불필요한 공간이 필요없음으로 인하여 이렇게 자동으로 알아서 줄여준 내용을 확인할 수 있다.

 

이제 StoryBoard의 기능중 1개인 Add New Constraint에 대해서 알아보도록 하자.

Add New Constraint는 뷰간의 제약조건을 설정할 수 있다.

 

< Add New Constraints >

라벨을 클릭해둔 상태에서 아래에 보면 Add New Constraints를 설정할 수 있는 버튼이 존재한다.

 

시계방향으로 탑, 트레일링, 바텀, 리딩 제약조건에 값을 설정할 수 있고, 뷰의 너비와 높이등 다양한 제약조건을 설정할 수 있다.

참고로 트레일링은 오른쪽 리딩은 왼쪽을 뜻한다.

 

현재에는 Constraint to margins가 체크 되어있는 것을 볼 수 있다.

해당 부분을 해제하자. 해당 부분을 체크하게 되면 기본 margin 값을 포함한 간격이 제약조건으로 걸리기 때문에 우선적으로 해제를 하도록 하자.

 

< 제약 조건 추가 >

Constraint to margins를 해제하였고, 트레일링과 리딩의 항목을 30, 30 으로 설정을 한 후에 Add 2 Constraints 버튼을 클릭하니 우측의 이미지처럼 제약조건이 걸린 것을 확인할 수 있다.

 

추가된 제약조건이 현재 2가지로 확인이 되는데 만약 추가된 제약조건들을 모르겠다. 싶으면 

 

< 추가된 제약조건 확인 >

좌측의 이미지처럼 View Controller Scene의 섹션들을 펼쳐서 Constraints의 항목을 확인하면 된다.

추가로 해당 라벨을 선택한 후에 우측의 이미지대로 우측의 인스펙터 영역에서 삼격형 항목을 선택하면 아래에 해당 항목의 제약조건을 확인할 수 있다.

 

현재는 부모뷰 기준으로 리딩, 테일링 기준이 30만큼 떨어져 있는 것을 확인할 수 있다.

< Alignment 조정 >

추가적으로 라벨의 TEXT를 가운데 정렬을 해보았다. 우측 인스펙터 영역에서 삼각형 옆의 모양을 선택하면 이렇게 가운데 정렬을 할 수 있다.

또한 폰트사이즈도 해당 부분에서 변경할 수 있다. 현재는 System 17.0으로 되어있는 항목을 30으로 변경하였다.

라벨 문구의 정렬과 폰트 사이즈 증가를 진행해보았다.

 

 

그럼 이제 UI View를 하나 추가해보자

 

< UIView 추가 >

Label을 추가했던 것대로 View를 선택해서 드래그앤드롭을 통해서 UIView를 추가하였다.

 

그다음에 AutoLayout 확인을 위해서 해당 UIView의 백그라운드를 빨강색으로 변경해보자.

 

< ViewBackground 변경 >

동일하게 우측의 인스펙터 영역에서 Background를 선택하여 색상을 변경해줬다.

필자는 빨강색을 너무 좋아하는 사람이기때문에 빨간색으로 설정을 하였다.

 

< 간격 50 조정 >

위의 라벨과 간격을 50만큼 줄 수 있도록 제약조건을 추가하였다. 위에서 했던것과 동일하게 진행해주면 된다.

그리고 좌측의 제약조건 섹션을 확인해보면 좌측의 이미지대로 표현이 되는 것을 확인할 수 있다.

 

그럼 이제 버튼을 하나 추가해보도록 하자.

 

< Button 추가 >

Label과 View를 추가햇던 것과 동일한 방법으로 Button을 추가하였다.

그럼 이제 해당 버튼을 슈퍼뷰의 중간에 올 수 있도록 정렬을 진행해보도록 하자.

 

Align

뷰간의 정렬을 설정할 수 있는 내용이다.

정렬 제약조건을 추가할 수 있고, 정렬하고자 하는 2개의 뷰를 선택하여 수직정렬 수평정렬을 추가할 수 있다.

 

< Align 적용 >

Button을 슈퍼뷰의 중간으로 정렬할 수 있도록 Horizontally in Container를 체크를 해줬더니, Button이 가운데로 이동한 것을 확인할 수 있었다.

이렇게 Align은 정렬 기능을 사용할 수 있다.

 

일단 이정도면 AutoLayout의 화면구성이 어느정도는 완료가 되었다.

 

 

그럼 이제 Preview 화면을 통해서 어떻게 적용이 되어있는지 확인을 한번 해보도록 하자.

 

< Preview 화면 >

 

좌측의 이미지는 Preview 화면을 보여줄 수 있도록 하는 메뉴를 보여주었다.

우측의 이미지는 현재 Preview한 화면이다. 현재 아래에 보면 iPhone 11이라고 표현이 되어있는데 현재 Preview한 화면이 iPhone 11에서 볼 수 있는 화면이라고 생각하면 된다.

 

그럼 이제 이것을 다른 아이폰으로 변경해보도록 하자.

 

< 다른 기종 추가 >

좌측의 이미지대로 아래의 + 버튼을 클릭하면 다른 기종을 선택할 수 있고 우측의 이미지는 아이폰 SE1세대를 추가한 사진이다.

이렇게 적용한 내용대로 표기되는 것을 알 수 있다. 

 

각각 다른 기기들을 사용하는 사람들이 있기 때문에 이렇게 UI의 설정을 해상도 비율에 맞게 적용할 수 있다.

 

추가적으로 AutoLayout중에 Resolve Auto Layout Issues 기능이 있다.

AutoLayout 관련된 이슈들을 해결하는 옵션들을 제공하며, 현재 제약조건을 기준으로 뷰를 업데이트 하거나, 캔버스 안에 뷰의 현재위치를 통해 제약을 업데이트할 수 있다.

누락된 제약을 추가하거나 제약을 삭제하거나 추천하는 제약조건을 사용할 수 있다. 하지만 그렇게 많이 사용하지 않음으로 그냥 기능이 있다. 라는 것만 알아두면 될것 같다.

 

이렇게 스토리보드를 이용하면 화면을 구성할 수 있고 오토레이아웃을 이용하면 뷰간 제약조건을 활용하여 다양한 해상도 비율에 대응할 수 있다.

 

현재 기초단계를 진행하기 때문에 스토리보드와 오토레이아웃을 이용하여 UI를 구성할 것이고, 이후 다른 어플들을 만들면서 어떻게 UI를 구성할 수 있는지 감을 잡을 수 있을것 같다.