[꾸준i-OS] alignment rectangle( 쉬운 설명, easy-explained )

0. 설명 전 판깔기

우선 오토레이아웃을 쓰는 이유가 뭐였죠?

 

 절대적인 좌표계를 사용하는 것은, 마치 스크린의 사이즈를 미리 알고 있다고 가정하고 쓰는 것입니다. 그래서 만약, 아이폰7의 좌표를 기준으로 만든 앱이 아이폰 11프로 또는 랜드스케이프 모드의 아이패드에서 사용된다면, 당연히 매우 작게 보일 거고, 화면에 레이아웃이 이상하게 잡히겠죠. 

 

 저런 문제를 방지하기 위해, UIView의 frame이 런타임 동안에 계산되면서 실시간으로 사용되고 있는 스크린 사이즈를 고려해서 결정될 수 있게 해주는 것이 autolayout입니다. 

 

 뜬긊없이 오토레이아웃이 왜 나오냐구요?

 

 오토레이아웃이 바로 오늘 다룰 주제인 Alignment Rectangle을 기준으로 작동하기 때문입니다. 

 

1. 도대체 Alignment Rectangles ? 란 무엇일까요? ( 영어 주의, 바로 한국어 나오니까 나가지 마세요 !! )

As developers create complex views, they may introduce visual ornamentation such as shadows, exterior highlights, reflections, and engraving lines. As they do, these features are often drawn onto p_w_picpath art rather than being added through layers or subviews. Unlike frames, a view’s alignment rectangle should be limited to a core visual element. Its size should remain unaffected as new items are drawn onto the view. Consider the left side of Figure 1-11. It shows a view drawn with a shadow and a badge. When laying out this view, you want Auto Layout to focus on aligning just the core element—the blue rectangle—and not the ornamentation.

한 UIView에 추가된, 그림자 효과, 뱃지 등등, 왼쪽부터 그림1, 그림2, 그림3

(출처 : blog.51cto.com/linjohn/1670691 )

 

 추가적인 비쥬얼적인 장식이 없는 뷰를 만들면 frame <-> alignment rectangle은 다르지 않습니다. 하지만, 그 뷰에 그림자를 추가하거나, highlight를 주거나, 뱃지를 달거나 할 때, 둘은 서로 달라집니다. 

 

 그림2의 검은 직사각형으로 표시된 게 원래 뷰라고 합시다. 이때, 그림1에서 보면 알 수 있듯이 뷰에, 그림자, 뱃지가 추가되어 있네요. 그렇죠? 이러한 부가적 비쥬얼 장식 효과들은, layer나 subview로서 추가되지 않고, p_w_picpath art로서 추가됩니다. 즉, alignment rectangle은 frame rectangle과 달리, 이 뷰의 상대적 위치 및 사이즈를 잡는 오토레이아웃에 쓰이기 때문에, 그 뷰의 핵심 시각 요소에만 집중할 필요가 있습니다. 그래서 그림3 의 영역이 frame rect. 라고 하면, 그림2의 영역이 바로 오늘 다루는 alignment rect.이 되겠습니다(물론 좌표와 사이즈를 가졌겠죠).

 

오토 레이아웃은 뷰의 위치와 사이즈 기준을 바로 이 alignment rect.로 잡고 진행됩니다. 그러니까, 자꾸, " 대부분의 경우, 즉, 부가적 시각 장식이 없는 경우, 대부분의 경우 frame rect.와 alignment rect.는 일치한다"라고들 하는 것이죠.

 

2. Alignment Rectangle의 주요 속성들

예시) UILabel(UIView)의 alignment rectangle을 결정하는, 레이아웃 요소들. ( 출처 : iOS Programming 7th, Aaron Hillegass )

 

Alignment Rectangle의 결정적인 레이아웃 속성들

  여기서 부턴, 그 저희가 오토레이아웃 설정할 때 나오는 GUI에 나오는 내용과 일치합니다. 다만, 이 기준이 뭐다? 바로 Alignment Rectangle을 기준으로 가해지는 기준이다를 기억해주세요 !!

 

1. width, height

 

  사이즈를 결정합니다. 너무 당연하죠.

 

2. top, bottom, left, right

 

  해당 UIView의 alignment의 top, bottom, left, right 방향 모서리와, 다른 UIView의 alignment rectangle top, bottom, left, right 모서리 사이의 간격을 결정합니다.

 

3. centerX, centerY

 

  해당 UIView alignment rectangle의 중앙을 결정합니다. x축에서의 중앙 좌표와 y축에서의 중앙 좌표요.

 

4. FirstBaseline, LastBaseline

 

  보통 UIView에서, bottom과 동일한 속성이나, UITextField(UIView), Multiline Text Label, Text View와 같이 텍스트 입력이 들어가는 UIView중 일부에 대해서는, FirstBaseline, LastBaseline은 alignment rectangle의 bottom이 아닌, 그것이 보여주는 텍스트의 최고 밑부분을 말합니다. 이를 통해서, alignment rectangle에서 벗어날 수 있는 g, p와 같은 descender( a,b,c,d,e,f,g,p를 보시면 아시겠죠. g,p의 글자의 일부는 더 밑부분 까지 걸쳐있는 것? 이런 글자들을 descender라고 부릅니다. ) 까지 포괄한 최고 밑부분을 기준으로 산정될 수 있습니다.

그럼 뭐가 좋죠? 왜 이렇게 까지 하는 걸까요? 진짜 ...

  그럼 반대로 묻겠습니다. 만약 alignment rectangle기준으로 레이아웃을 설정했고, 밑에 매우 라벨이 있었는데 p, g의 밑으로 더 내려간 부분이 겹치면 어떻게 할 겁니까? 앱이 매우 없어 보일 텐데요 !!

  그래서 만약 text view, multiline textlabel, UITextField와 같은 UIView의 Bottom과 다른 UIView를 다룬다면 간격을 뭘 기준으로 정해야되게요? 

 바로 이 alignment rectangle의 baseline 속성입니다.

 

 

5. Leading, Trailing

 

  left, right와 대부분 같으나, 사용 언어에 대한 더 세밀한 조정이 되어있는 속성입니다. 만약, 왼쪽에서 오른쪽으로 읽는 언어의 경우( 영어, 한국어, 중국어 등 대부분 ) leading이 left, trailing이 right와 같습니다. 만약 아랍어?!와 같이 오른쪽에서 왼쪽에서 읽히는 언어의 경우, leading이 right와 같고, trailing이 left와 같습니다. 

 

 

 

 

3. Outro

 저는 frame도 겨우 뭔지 감을 익혀가는 데,

alignment rectangle이 나오자 마자, 또 뭐지? 뭐 이리 알게 많아? 라는 짜증이 났습니다만,

또 어느정도 배우고 나니, 별로 다르지도 않고, 좀 기분이 나아졌습니다. 여전히, 제가 잘못 이해한 게 있을 수 있으니 댓글에 남겨주세요.