Swifter {Swift Developer}

메뉴

iOS 오토레이아웃(Auto Layout) 사용법 1

아이폰은 아이폰5, 아이폰 SE,  아이폰6,  아이폰6Plus등 다양한 종류의 기기가 출시되고 있지만 앱개발자에게는 정말 귀찮고 일이 많아지게 되었다. 그중 가장 큰 것은 앱 화면의 디자인이라고 본다.

아이폰 크기가 다양하게 진화됨에 따라 앱도 다양한 크기에서 제대로 볼 수 있도록 디자인해야 한다. 만약, 아이폰5전용으로 화면 디자인을 만들어버리면, 아이폰6Plus용에서는 일부 화면이 남아서 보이게 되고 아이폰6 Plus용 화면 디자인으로 개발하면 아이폰5나 아이폰SE에서는 화면일부가 보이지 않게 된다. 그래서 Xcode는 다양한 화면크기에 자동으로 레이아웃을 조절해주는 기능이 추가되었다. 그것이 바로 AutoLayout이다. 또한 화면크기가 변경되는 것만이 아닌, 화면을 체크하고 화면방향에 따라 화면 가로세로 비율에 따라 변경되는 경우도 AutoLayout이 지원해준다.

iOS 앱 화면을 디자인시 Interface Builder에서 요소(Label, Image, Button등)을 드래그앤드롭하여 배치한다. 드래그앤드롭으로 배치한 유일한 요소는 논리적 픽셀의 절대좌표로 표시되고 있기 때문에 다른 크기의 기기에서 보면 벌어지거나 퍼지게 된다. 예로 아이폰5(4인치)는 논리적픽셀값이 320×586크기인데 아이폰6 Plus(5.5인치)에서는 414×736크기이다. 아이폰5크기로 디자인하면 아이폰6Plus에서는 너무 벌이진 모양새가 나오게 된다.

 

이 문제를 해결하기 위해 나온것이 바로 Auto Layout으로 다른 화면크기로 표시할 때 Constraint(제약)이라는 위치와 크기에 대한 표시규칙을 기반으로 자동으로 레이아웃을 변경하고 잘 나오도록 한다.

예로 화면 오른쪽 상단에서 거리를 기준으로 표시로 설정해서 화면크기가 어떻게 바뀌든 오른쪽으로 고정된다. 화면 너비에 맞게 표시로 설정하면 화면크기가 어떻게 변해도 화면 너비가 같은 크기로 표시된다.

화면 크기가 변경될 때 무엇을 기준으로 배치할 것인가를 결정하느 것이 Constraint이다. 예로 화면의 상하좌우 가장자리를 기준으로 버튼을 고정하고자 한다면 화면크기가 아이폰5에서 아이폰6Plus로 변경되도 틈새가 생길수 없다.

 

AutoLayout기본제약 ( Constraint)

AutoLayout의 가장 기본은 Constraint라고 본다. 이는 다른 화면크기로 표시할 때 요소는 무엇을 기준으로 배치할 것인가를 지정하는 규칙이다.

무엇을 기준으로 배치할 것이냐는 Align (정렬)과 Pin(고정)으로 2가지가 있다. AutoLayout에서는 이 두가지 방법이 중요하다. 화면 가운데 맞추고 싶거나 다른 요소와 모아서 정렬하고자 할때 Align을 사용한다. 화면 상하 좌우 가장자리에 고정 표시할 때와 크기를 고정하고 싶다면 Pin을 사용한다. 모든 레이아웃은 기본적으로 이 두가지를 사용한다. 여기서 말하는 요소는 Button, Label, Switch, ImageView, WebView, View등의 화면에 표시되는 모든 요소이다.

요소에는 다양한 모양과 종류가 있지만, 우선 모두 직사각형을 고려해서 상하좌우 및 중심점을 기준으로 배치한다.

  • Leading: 요소왼쪽(첫글자 방향)
  • Trailing: 요소 오른쪽 (문자 끝 방향)
  • Top: 요소 상단
  • Bottom: 요소 하단
  • Width: 요소 너비
  • Height: 요소 높이
  • centerX: 요소 가로방향 중심위치
  • cetnerY: 요소 세로방향 중심위치
  • Baseline: 문자 baseline
  • Horizontal: 수평
  • Verical: 수직
  • Aspect Ratio: 요소 가로세로 비율

auto1

미리보기

AUtoLayout 상태가 다른 크기화면에서 어떻게 표시되는지 Assistant Editor 미리보기를 사용하여 확인이 가능하다. 미리보기를 시작하면서 Constraint를 설정하고 어떻게 보이는지 바로 확인이 가능하다.

스토리보드파일을 선택하고 도구모음에서 Assistant Editor버튼을 클릭하고 왼쪽에서 Interface Builder오른쪽관련 프로그램파일 (ViewController.swift)가 표시된다.

auto2

오른쪽 점프바의  [Automatic]을 선택하고 [Preview]로 변경하면 미리보기 화면이 표시되고 하단에 있는 [+]버튼을 눌러 화면크기별로 비교해서 볼 수 있다.

auto3

Constraint 지정 방법

Autolayout Constraint를 설정하는 방법은 기본적으로 편집기 영역 오른쪽 아래 줄지어 있는 버튼이다. 우선 배치된 Button등의 요소를 선택하고 이 버튼들을 눌러 설정한다.

auto

Pin위치와 크기를 고정

Pin버튼을 사용하면 요소를 핀으로 고정하도록 위치 및 크기를 지정할 수 있다. 화면크기가 변해도 고정된 위치나 크기는 변하지 않는다. 예로 왼쪽을 고정하면 화면 크기가 어떻게 변경되어도 왼쪽 위치는 고정되어 변하지 않는다. 또한 너비와 높이를 고정하면 화면크기가 변경되어도 폭과 너비는 고정된 크기는 변하지 않는다.

auto5

  • “Spacing to nearest neighbor” : 요소의 상하좌우를 고정하는 여부를 지정하는 제약조건으로 빨간 점선을 클릭하면 실선으로 변경되면서 고정된다. 값을 입력해도 점선이 실선으로 변경되고 고정된다. 값 입력란에 ▼가 표시되지만 이를 클릭하면 어디에 고정할지를 선택할 수 있다. 예로 위쪽을 고정하고 싶을 때 상태표시줄에 고정하거나 화면상단에 고정하거나를 선택할 수 있다. 또한 기본적으로 화면 좌우로 조금 여유가 있는데 이 여백을 사용하지 않을 경우 [Constrain to margins]를 체크하지 않는다.
  • Width: 요소 너비를 지정하여 고정
  • Height: 요소 높이를 지정하여 고정
  • Equal Widths: 여러 요소를 같은 너비로 처리시
  • Equal Heights: 여러 요소를 같은 높이로 처리시
  • Aspect Ratio: 요소의 종횡비를 유지

auto6

Align 정렬

Align 버튼을 사용하여 선택되어 있는 여러 요소들의 위치를 정렬할 수 있다.

여러개의 Button의 왼쪽 정렬 및 Label을 화면 가운데에 오도록 하는데 사용할 수 있다.. 요소를 하나만 선택하는 경우 여러 요소 제약은 선택할 수 없다.

auto7

  • Leading Edges: 여러 요소의 왼쪽에 맞춤
  • Trailing Edges: 여러 요소의 오른쪽 가장자리에 맞춤
  • Top Edges: 여러 요소 상단에 맞춤
  • Bottoms Edges: 여러 요소의 하단에 맞춤
  • Holizontal Centers: 여러 요소의 수평방향  중심위치에 맞춤
  • Vertical Centers: 여러 요소의 수직 방향의 중심위치에 맞품
  • Baselines: 여러 레티블등의 텍스트 아래를 맞춤
  • Horizontal Center in Contrainer: 표시 영역의 수평방향 중심에 맞춤[
  • Vertical Center is Container: 표시 영역의 수직방향 중심에 맞춤

 

Resolve Auto Layout Issue 오토레이아웃 문제 해결

이 기능은  Constraints 및 배치가 문제가 있을 때 조절해주는 버튼이다. Selected Views와 All Views in Viewcontroller라는 두가지 항목이 있고 어느 쪽에도 같은 기능이 나열되어 있다.

Selected Views는 선택한 요소에 대해서만 사용한다.

All Views in ViewController는 화면의 모든 요소에 대해서 실행시 사용한다.

auto8

  • Update Frames: Constraints 및 Interface Builder에서 위치가 어긋나 있는 경우 제약에 따라 Interface Builder에서 위치를 이동한다.
  • Update Constraints: Constraints 및 Interface Builder에서 위치가 어긋나 있을 때 Interface Builder에서의 위치에 따라 제약을 변경한다.
  • Add Missing Constraints: Constraints가 부족한 경우 보족한 제약을 자동으로 추가한다.
  • Reset to Suggested Constrains: 설정되어 있는 Constraints를 삭제하고 알맞다고 판단되는 제약을 자동 추가한다.
  • Clear Constraints: 지정된 제약조건을 삭제한다.

 

드래그로 지정하는 방법

Align과 Pin버튼을 사용하지 않고 드래그만으로 지정하는 방법도 있다. 요소를 Control + 클릭 또는 마우스 오른쪽클릭하여 드래그하는 방법이다. 드래그한 방향과 분리 위치에 의해 알맞은 Constraints목록이 나오며 그 중에서 선택해서 설정한다.

auto9

위치를 지정하는 경우

위치를 지정하려면 요소를 Control + 클릭 또는  마우스 오른쪽 클릭하여 상하좌우 어느 한쪽으로 끌어놓는다. 예로 요소의 오른쪽을 기준으로 제약을 설정하려면 오른쪽으로 드래그하여 요소외부로 놓는다. 그러면 메뉴가 나오고 [Trailing Space to Container Margin]이 표시되어 있으면 이를 선택하면 요소의 오른쪽과 화면사이의 거리 제약을 추가할 수 있다.

auto10

너비나 크기를 고정하려면

너비나 크기를 고정하려면 요소를 Control + 클릭 또는 마우스 오른쪽 클릭을 해서 그 요소 중 좌우(width) 또는 상하(height)로 끌어 놓는다. 예로 너비를 지정하고 싶다면 옆으로 드래그하여 요소에 놓는다. 그러면 메뉴가 나오고 width가 표시되면 선택하면 지금 크기로 고정하는 제약을 추가할 수 있다.

auto11

auto12

Interface Builder화면은 정사각형

아이폰 화면은 직사각형인데 ViewController는 사각형 비율로 되어 있다. 이는 화면 레이아웃은 AutoLayout을 사용해서 만드는 것을 애플사가 원하는게 아닐까요?

auto13

기본 뷰는 추상적인 사각형 비율로 되어 있는듯 하지만, 정사각형 비율로 화면 디자인을 만드는 것은 처음에는 어렵다고 생각한다. 그런 경우 ViewController의 아이폰 크기를 변경할 수 있다. ViewController를 선택하고  속성 관리자(Attributes Inspector)에서 “Simulated Metrics”에서 Size항목값인 Inferred에서 iPhone 4.7-inch등으로 변경하면 선택한 기기의 크기이다.

auto14

wAny hAny를 변경하려면 기기화면 전용 레이아웃을 만들기

auto15

Interface Builder아래에 wAny hAny라는 표시가 있다. 이는 기기화면 전용 레이아웃을 만즐고 싶을 때 사용하는 기능이다.

일반 wAny hAny에서 레이아웃 화면은 화면크기와 화면 방향이 변경해도 동일한 규칙으로 배치한다. 단 wAny hCompact로 전환 화면을 배치하면 아이폰을 옆으로 했을 때 전용규칙을 설정할 수 있다. 세로로 오른쪽 하단에 요소를 배치하고 있지만 가로는 오른쪽으로 배치한다고 볼 수 있다.

wAny hAny를 클릭하면 패널이 열리고 3×3크기중에서 선택하여 어떤 기기 화면 전용 레이아웃을 만들고 싶다면 하나를 선택한다.

wAny hAny이외를 선택하는 경우 특정 기기용 레이아웃인지 아래가 파랗게 표시된다.

wCompact hCompact는 아이폰4S, 아이폰5S, 아이폰 6 S 가로 전용

auto16

wAny hCompact: 모든 아이폰의 가로전용

auto17

wCompact hAny: 아이폰4S, 5S, 6 세로 및 가로 + 아이폰6plus의 세로 전용

auto18

wAny hAny: 모든 화면용 (모든 아이폰과 아이패드용 가로 또는 세로)

auto19

wRegular hAny: 아이패드 세로 및 가로 전용

wCompact wRegular: 모든 아이폰의 세로 전용

wAny wRegular: 모든 아이폰의 세로와 아이패드 세로 및 가로 전용

wRegular wRegular: 아이패드 세로 및 가로 전용

 

wAny hAny는 기본상태로 우선 기본레이아웃을 이 상태로 만든다. 예로 아이폰 가로방향인 경우에만 레이아웃을 변경하고 싶다면 wAny hCompact를 선택하고 레이아웃을 변경한다.

또한 기기 화면에서만 요소를 배치할 수 있다. wAny hCompact를 선택한 상태에서 요소를 추가하면 아이폰의 가로일때만 요소가 나타날 수 있다.

Facebook Comments

카테고리:   Swift

댓글

죄송하지만 댓글은 닫혀 있습니다.