이번에는 솔직히 내가 글쓰는거보다 사람들 자료정리가 정말 잘되어있어서

걍 자료만 뿌릴거임

원리를 이해하면 쉬워지는 오토레이아웃(Auto layout)

이 사람글이 제일 좋은거같음

앞서 계속 언급했지만 IOS는 Xml로 화면 안만듬

뭐 가능은 하겠다만 직관적이지않음

안드로이드도 속성뒤지게많아서 찾아가면서해야하는데

이건 오죽하겠음 ?

안드로이드에서도 핸드폰 크기에 맞춰서 사이징을 해야함

IOS도 똑같음

그걸 배워볼거임

Autoresizing

• autoresizingMask는 상위 뷰의 크기 변경에 따라 하위 뷰가 어떻게 크기와 위치를 조정할지를 결정하는 비트 마스크.

• 화면의 크기에 따라 View의 크기를 자동 조절

• 기능
  • 여백 고정기능
  • View 크기 조절 기능
  

• 설정 방법
  – 각 View 객체별로 설정
  – 원하는 View 객체를 선택한 후 크기 속성 inspector에서 설정

• 상기 설정의 해석

  • View의 너비: 화면의 크기에 따라 비례하여 너비가 조절된 \
  • View의 높이: 화면의 크기가 변하여도 높이는 고정
  • 왼쪽, 위쪽 여백: 화면의 크기가 변하여도 높이는 고정
  • 오른쪽, 아래쪽 여백: View의 너비, View의 높이, 왼쪽, 위쪽 여백이후 남는 값

  더 자세한건 이 글 에서 보는게 좋을듯

  IOS 6이후로 저거 잘 쓰진않음

Autolayout

정의

• ​Auto Layout은 iOS에서 사용자 인터페이스의 뷰 계층 구조 내 모든 뷰의 크기와 위치를 제약 조건을 기반으로 동적으로 계산하는 레이아웃 시스템입니다.
• 이 시스템은 다양한 화면 크기, 방향, 콘텐츠 변화 등에 자동으로 대응할 수 있도록 설계되어, 반응형 인터페이스를 구축하는 데 필수적입니다 .

– 하나의 View에 대하여 어떠한 화면의 크기에 대해서도 좌측상단좌표(left, height) 와 크기(width, height)를 계산할 수 있으면 Satisfiable layout라 함
– 화면상의 모든 View가 Satisfiable layout이면 오토레이아웃을 만족한다고 함

– View의 크기(너비, 높이)와 이웃 View와 간격으로 Satisfiable Layout를 이루는 것 – 다른 이웃: 가장 가까운 이웃(Default)

핵심 개념

• 제약 조건(Constraints): 뷰 간의 관계를 정의하는 규칙입니다. 예를 들어, 버튼의 상단이 이미지 뷰의 하단에서 8포인트 아래에 위치하도록 설정할 수 있습니다

• 내재 콘텐츠 크기(Intrinsic Content Size): 레이블, 버튼 등 콘텐츠에 따라 크기가 결정되는 뷰의 고유 크기입니다. Auto Layout은 이러한 내재 크기를 고려하여 레이아웃을 계산합니다 .
  

• 콘텐츠 허깅 및 압축 저항(Content Hugging & Compression Resistance): 뷰가 자신의 콘텐츠 크기를 유지하려는 경향을 나타내며, 레이아웃 충돌 시 어떤 뷰가 크기를 조정할지를 결정하는 우선순위입니다.
  

정의에 필요한 속성

Autoresizing + Autolayout =
두 메커니즘을 함께 사용할 경우, translatesAutoresizingMaskIntoConstraints 속성을 false로 설정하여 AutoResizing 마스크가 Auto Layout 제약 조건으로 변환되지 않도록 해야 합니다.

오토레이아웃 지원 도구

StoryBoard의 에디터 창의 우측하단에 다음과 같은 오토레이아웃 툴을 제공

Align Tool

– Align Tool은 뷰들을 정렬 시키는데 사용
– 원하는 뷰들을 선택하고 Align Tool을 클릭
– 아래와 같은 팝업에서 적절한 제약조건을 선택 후 더함

Resolve Auto Layout Issues Tool

일반적인 자동 레이아웃 문제를 해결하기위한 여러 가지 옵션을 제공
– 상단은 현재 선택된 뷰, 아래쪽 옵션은 모든 뷰에 영향

– “Update Constraint Constants”는 현재의 Constraint에서 UIView의 이동후 이 동값에 대한 상수를 적용하고자 하는 경우
– “Add Missing Constraints”는 추가적으로 제약 조건들을 자동으로 생성 – ”Reset to Suggested Constraints”는 현재 적용된 제약 조건들을 지우고 필요한 제약 조건들을 자동으로 생성하는 방법
– “Clear Constraints”는 해당 제약조건을 모두 지움

Add new constraints(Pin tool)

– Pin tool은 뷰의 상대적 위치와 크기에 대한 제약 조건을 적용
– 원하는 뷰를 선택하고 Pin Tool을 클릭
– 팝업 뷰에서 다양한 여백 및 크기 선택

콘텐츠 크기의 우선 순위

• 허깅 우선순위(hugging priority)
  – 늘어나기 싫어하는 우선순위 (낮으면 잘 늘어난다, 고무밴드와 같다) – 크기에 대한 설정이 없는 뷰 객체는 가장 낮은 우선 순위를 갖는다

• 압축저항 우선순위(compression resistance priority)
  – 줄어들기 싫어하는 우선순위 (낮으면 잘 줄어든다, 스프링과 같다)
  – 크기에 대한 설정이 없는 뷰 객체는 가장 낮은 우선 순위를 갖는다

StackView

• 스택 뷰는 복잡한 제약 조건을 도입하지 않고도 자동 레이아웃의 기능을 쉽게 활 용할 수있는 방법을 제공
  – 안드로이드에서 LinearLayout와 매우 유사

• axis: (UIStackView only): 오리엔테이션 지정
• distribution: 자식 뷰들을 오리엔테이션 방향에서 따라 분배 방법 지정
• alignment: 오리엔테이션의 수직 방향에서 자식 뷰들의 위치 지정
• spacing: distribution에서 자식 뷰들 사이의 간격

• 사용법

1. UILabel(초록색 배경)과 UITextField(파란색 배경)를 적절한 위치에 좌우가 되도록 갖다 놓아라
   UILabel의 텍스트를 Login ID로 하라

2. UILabel과 UITextField를 모두 선택한 상태에서 “메뉴->Editor->Embeded In- >StackView를 선택하라.

3. Interface Builder의 오른쪽하단
   

를 클릭하여 StackView를 선택하여도 된다. • StackView의 배경색을 그림과 같이 적당한 색(노란색)으로 변경하라