[iOS] PinLayout 문서 번역(1)

PinLayout 원리와 철학

• 매뉴얼 레이아웃 (auto layout X)
• 가능한 빠르고 간단하게
• 완전한 컨트롤: 레이아웃 프로세스의 중간에 있다.(..?)
• 간략한 문법, 한 줄로 작성

PinLayout 성능

모든 종류의 아이폰에서 매뉴얼 레이아웃과 비슷한 정도의 속도, 오토레이아웃보다 8~12배 빠름

문서

safeAreaInsets 지원

iOS11 의 UIView.safeAreaInsets 지원, 그 이하에서 UIView.pin.safeArea사용

macOS 지원

Right to left languages (RTL) 지원

Edges layout

슈퍼뷰의 edges와의 관계로 위치설정

예)

A뷰를 슈퍼뷰에 마진 10씩 주기

viewA.pin.top(10).bottom(10).left(10).right(10)

더 짧게

view.pin.all(10)

Methods:

슈퍼뷰의 edges 관련 메서드

• top(_ offset: CGFloat) / top(_ offset: Percent) / top() / top(_ margin: UIEdgeInsets)
  • 슈퍼뷰의 top으로부터 얼마나 떨어졌는지 pixel, 또는 percent가능
  • top()와 top(0)는 슈퍼뷰의 탑 엣지에 딱 붙이는 것으로 같다.(similar)
  • top(: UIEdgeInsets) ****은 UIEdgeInsets.top 사용, safeArea, readable and lyout margins에서 유용함
  • 이하 동일.
• bottom(_ offset: CGFloat) / bottom(_ offset: Percent) / bottom() / bottom(_ margin: UIEdgeInsets)
• left(_ offset: CGFloat) / left(_ offset: Percent) / left() / left(_ margin: UIEdgeInsets)
• right(_ offset: CGFloat) / right(_ offset: Percent) / right() / right(_ margin: UIEdgeInsets)
• vCenter(_ offset: CGFloat) / vCenter(_ offset: Percent) / vCenter()
  • vertical center (center.y)
  • 뷰의 센터와 슈퍼뷰의 센터 사이의 픽셀 관계 나타냄(슈퍼뷰의 높이 percentage도 가능)
  • 센터 뷰 대비, 양수는 뷰를 아래로, 음수는 뷰를 위로
  • vCenter() 랑 vCenter(0) 같다.(similar)
  • 이하 동일
• hCenter(_ offset: CGFloat) / hCenter(_ offset: Percent) / hCenter()

LTR (left-to-right) and RTL (right-to-left) Methods

• start(_ offset: CGFloat) / start(_ offset: Percent) / start() / start(_ margin: UIEdgeInsets)
  • 왼쪽에서 오른쪽으로 쓰는 언어(LTR) 방향대로 배치
  • LTR 방향에서 offset은 슈퍼뷰의 왼쪽엣지에서 떨어진 픽셀이나 percentage 나타냄.
  • 오른쪽에서 왼쪽으로 쓰는 언어(RTL) 에서는 슈퍼뷰의 오른쪽에서 얼마나 떨어졌는지 나타냄.
  • start(0), start(0) 같음, start(: UIEdgeInsets) ****은 UIEdgeInsets.left 사용(LTR)
  • 이하 동일
• end(_ offset: CGFloat) / end(_ offset: Percent) / end() / end(_ margin: UIEdgeInsets)

여러개의 edges Methods

• all(_ margin: CGFloat) / all() / all(_ margin: UIEdgeInsets)
  • 상하좌우 픽셀만큼 거리두고 배치하기
  • view.top(value).bottom(value).left(value).right(value) 와 같음
  • all() all(0) 같음
  • all(:UIEdgeInsets) safeArea, readable and lyout margins에서 유용함
  • 이하동일
• horizontally(_ margin: CGFloat) / horizontally(_ margin: Percent) / horizontally() / horizontally(_ margin: UIEdgeInsets)
  • 왼쪽 오른쪽 픽셀 거리두기 또는 슈퍼뷰의 너비의 percentage
• vertically(_ margin: CGFloat) / vertically(_ margin: Percent) / vertically() / vertically(_ margin: UIEdgeInsets)

예시

view.pin.top(20).bottom(20)   // The view has a top margin and a bottom margin of 20 pixels 
view.pin.top().left()         // The view is pinned directly on its parent top and left edge
view.pin.all()                // The view fill completely its parent (horizontally and vertically)
view.pin.all(pin.safeArea)    // The view fill completely its parent safeArea 
view.pin.top(25%).hCenter()   // The view is centered horizontally with a top margin of 25%
view.pin.left(12).vCenter()   // The view is centered vertically
view.pin.start(20).end(20)    // Support right-to-left languages.
view.pin.horizontally(20)     // The view is filling its parent width with a left and right margin.
view.pin.top().horizontally() // The view is pinned at the top edge of its parent and fill it horizontally.

슈퍼뷰와의 멀티관계

2가지 방향 동시에 설정 가능

예)

오른쪽위에 100 사이즈로 만들기

viewA.pin.topRight().size(100)

이하 동일

viewA.pin.top().right().size(100)

Methods

• topLeft(_ offset: CGFloat) / topLeft()
• topCenter(_ topOffset: CGFloat) / topCenter()
• topRight(_ offset: CGFloat) / topRight()
• centerLeft(_ leftOffset: CGFloat) / centerLeft()
• center(_ offset: CGFloat) / center()
• centerRight(_ rightOffset: CGFloat) / centerRight()
• bottomLeft(_ offset: CGFloat) / bottomLeft()
• bottomCenter(_ bottomOffset: CGFloat) / bottomCenter()
• bottomRight(_ offset: CGFloat) / bottomRight()

LTR, RTL Methods

• topStart(_ offset: CGFloat) / topStart()
• topEnd(_ offset: CGFloat) / topEnd()
• bottomStart(_ offset: CGFloat) / bottomStart()
• bottomEnd(_ offset: CGFloat) / bottomEnd()
• centerStart(_ offset: CGFloat) / centerStart()
• centerEnd(_ offset: CGFloat) / centerEnd()

예시

// 위쪽 왼쪽에 10픽셀 마진
view.pin.topLeft(10)

// 4방향 모두 10픽셀 마진
view.pin.topLeft(10).bottomRight(10)

Relative Edges layout

상대적인 위치 이용하기

다른 뷰와의 상대적인 위치 이용

하나 이상의 뷰와 상대적인 위치 사용

• above(of: UIView) / above(of: [UIView])
  • UIVIew(s)의 bottom 엣지에 두기
• below(of: UIView) / below(of: [UIView])
  • UIVIew(s)의 top 엣지에 두기
• before(of: UIView) / before(of: [UIView
  • LTR기준 UIVIew(s)의 왼쪽에 두기
• after(of: UIView) / after(of: [UIView])
  • LTR기준 UIVIew(s)의 오른쪽에 두기
• left(of: UIView) / left(of: [UIView])
  • before(of:) 와 유사, UIVIew(s)의 오른쪽 엣지에 두기
• right(of: UIView) / right(of: [UIView])
  • after(of:) 와 유사, UIVIew(s)의 왼쪽 엣지에 두기

예시

view.pin.after(of: view4).before(of: view1).below(of: view3)
view.pin.after(of: view2)
view.pin.below(of: [view2, view3, view4])

예)

A와 B 사이에 10픽셀 거리두기

viewC.pin.top().after(of: viewA).before(of: viewB).margin(10)

이하 동일(edges 사용)

viewC.pin.top().left(to: viewA.edge.right).right(to: viewB.edge.left). margin(10)

이하 동일(horizontallyBetween() 사용)

viewC.pin.horizontallyBetween(viewA, and: viewB, aligned: .top).marginHorizontal(10)

다른 뷰 사이에서 layout

2개의 뷰 사이에 수평 수직으로 배치하기

• horizontallyBetween(:UIView, and: UIView)
  • 참조하는 뷰들의 order는 관련없음.
  • 특정 뷰 사이에 공간이 있을 때만 적용됨
• verticallyBetween(:UIView, and: UIView)

사용 예시)

view.pin.horizontallyBetween(viewA, and: viewB)
view.pin.verticallyBetween(viewC, and: viewD)

예)

왼쪽 오른쪽 마진 5씩 두고 사이에 배치하기, top은 10

view.pin.horizontallyBetween(viewA, and: viewB).top(10).marginHorizontal(5)

이하 동일

view.pin.horizontallyBetween(viewA, and: viewB, aligned: .top).marginHorizontal(5)

view.pin.after(of: viewA).before(of: viewB).top(10).marginHorizontal(5)

다른 뷰와 정렬하기

Methods:

• horizontallyBetween(:UIView, and: UIView, aligned: VerticalAlign)
  • 두 뷰 사이에 두고 수직 정렬 사용하기
  • 첫 번째 뷰에 수직정렬하기
  • 두 뷰 사이에 공간 있을 때만 가능
  • 이하 동일
• verticallyBetween(:UIView, and: UIView, aligned: HorizontalAlign)

HorizontalAlignment values:

• .left: 첫 번째 뷰의 왼쪽에
• .center: 첫 번째 뷰의 중간에
• .right: 첫 번째 뷰의 오른쪽에
• .start LTR에서 .left. RTL에서 .right.
• .end LTR에서 .right. RTL에서 .left.

VerticalAlignment values:

• .top: 첫 번째 뷰의 위쪽에
• .center: 첫 번째 뷰의 중간에
• .bottom: 첫 번째 뷰의 바닥에

사용 예시)

view.pin.horizontallyBetween(viewA, and: viewB, aligned: .top)
view.pin.verticallyBetween(viewC, and: viewD, aligned: .center)

예)

두 뷰 사이에 수직으로 두고 첫 번째 뷰에 센터 맞추고 10씩 위 아래로 마진 주기

view.pin.verticallyBetween(viewA, and: viewB, aligned: .center).marginVertical(10)