[iOS/AutoLayout] 동일한 형태이나, 다른 방식의 모호하지 않은 레이아웃 만들기(Example of Nonambiguous Layout Solutions)

AutoLayout 4번째 포스팅을 시작해보도록 하겠습니다.

 

지난 포스팅에서 다룬 '모호하지 않은 레이아웃(nonAmbiguous Layout)'에 이어,

1개 뷰의 레이아웃이 아닌, 2개의 UIView간의 관계를 설정하는 과정을 살펴볼까 합니다.

 

아래서 다룰 예시는, 제약을 위한 절대적인 해답이 아닌

모호하지 않은 레이아웃을 만들기 위한 다양한 방식 중 하나이므로

추후 원하는 화면을 구현하기 위한 참고용으로서 확인하시길 바랍니다. 

 

 

---

 

 

모호하지 않은 레이아웃 만들기 (2)

상위 뷰(혹은 Container), 그리고 인접 뷰(neighborhood)와의 관계를 통한 AutoLayout 완성

 

앞서 언급한 바와 같이,

이번 포스팅에서는 2개의 UIView가 활용되는 AutoLayout을 연습해보고자 합니다.

 

구체적인 실습한 내용은 다음과 같습니다.

화면에는 각각 Red, Blue 색상의 하위 뷰(SubView)가 위치하고 있습니다.

1. 이들은 좌, 우로 나란히 정렬되어 있으며
2. 상위 뷰(SuperView)와 다른 View와의 간격은 위, 아래, 양옆 모두 20points로 동일합니다.
3. 또한, 가로모드 에서도 동일한 형태와 간격(20point)을 유지해야 합니다.

🖐🏻 반드시 모든 iPhone 디바이스의 세로, 가로모드에서 동일한 형태로 보여아 합니다.
🖐🏻 UIView의 크기(Size)는 설정하지 않습니다.

올바른(모호하지 않은, nonAmbiguous)레이아웃과 잘못된(모호한, ambiguous) 방식

 

---

 

1️⃣ 상위 뷰(Superview)와의 관계를 통한 제약 설정 

• 상위 뷰와 제약을 설정함으로서 위치(Location)를 잡아갑니다.
  • 각각의 뷰는 상위 뷰와의 제약(20point)을 우선 설정합니다.
  • Top, Bottom은 뷰 모두 동일하며,
    RedView는 Leading, BlueView는 trailing 제약을 설정합니다.
• 뷰 간의 간격을 설정하고, 너비를 동일하게 설정합니다. 
  
  • 각각의 뷰의 사이즈를 별도로 설정하지 않고, 제약만으로 설정하고자 합니다.
  • RedView와 BlueView의 너비(width)를 같도록 제약합니다.

상위 뷰(Superview)와의 관계를 통한 제약 설정

 

• 제약관계를 코드로 살펴보면 다음과 같습니다.

// Vertical Constraints
// RedView, BlueView 모두 상위 뷰(Superview)와의 제약을 통해 top, bottom layout을 설정
Red.top = 1.0 * Superview.top + 20.0
Superview.bottom = 1.0 * Red.bottom + 20.0
Blue.top = 1.0 * Superview.top + 20.0 // ✅
Superview.bottom = 1.0 * Blue.bottom + 20.0 // ✅

// Horizontal Constraints
Red.leading = 1.0 * Superview.leading + 20.0
Blue.leading = 1.0 * Red.trailing + 20.0
Superview.trailing = 1.0 * Blue.trailing + 20.0
Red.width = 1.0 * Blue.width + 0.0

 

 

2️⃣ 인접 뷰(neighborhood)와의 정렬을 통한 제약 설정 

• 2개 뷰 중, 하나의 뷰의 제약 관계를 활용함으로서 AutoLayout을 완성합니다.
  • RedView의 Top, Bottom Layout을 기반으로
    뷰 간 정렬을 통해 BlueView의 제약을 설정합니다.
  • BlueView는 RedView의 제약관계에 의존하는 관계를 형성합니다.

인접 뷰(neighborhood)와의 정렬을 통한 제약 설정

 

• 제약관계를 코드로 살펴보면 다음과 같습니다.

// Vertical Constraints
// RedView의 Top, Bottom 위치를 기반(정렬 방식)으로 BlueView 크기 설정
Red.top = 1.0 * Superview.top + 20.0
Superview.bottom = 1.0 * Red.bottom + 20.0
Red.top = 1.0 * Blue.top + 0.0 // ✅ 
Red.bottom = 1.0 * Blue.bottom + 0.0 // ✅

//Horizontal Constraints
Red.leading = 1.0 * Superview.leading + 20.0
Blue.leading = 1.0 * Red.trailing + 20.0
Superview.trailing = 1.0 * Blue.trailing + 20.0
Red.width = 1.0 * Blue.width + 0.0

 

---



이번 포스팅을 끝으로 기본적인 제약 방식에 대한 학습이 마무리 되었습니다.

 

이어서 다음 포스팅에서는 한 단계 더 나아가,

유동적인(Dynamic) 레이아웃을 활용할 수 있는 방식인 

 

• 제약조건 부등식(Constraints Inequalities)
• 제약 우선순위(Constraint Priorities)

 

위 2가지 내용을 다루도록 하겠습니다.