[iOS] PinLayout

PinLayout

---

• Layout Framework(SnapKit 같은)
• 오토 레이아웃에 의존하지 않음
• 간편하고 빠름(Auto Layout보다 8~12배 빠름)

GitHub - layoutBox/PinLayout: Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

 

Edge Layout

---

top / bottom / left / right

• top(_ offset: CGFloat) / top(_ offset: Percent) / top() / top(_ margin: UIEdgeInsets)
• 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)

top(_ offset: CGFloat) // px단위

top(_ offset: Percent) // superView Height의 비율

top() // top(0)와 같은 표현

top(:UIEdgeInsets), UIEdgeInsets.top // UIEdgeInsets.top 속성을 사용

 

vertical / horizontal

• vCenter(_ offset: CGFloat) / vCenter(_ offset: Percent) / vCenter()
• hCenter(_ offset: CGFloat) / hCenter(_ offset: Percent) / hCenter()

// vertical Center Y
// superView의 center와 관련된 View의 Center의 vertical을 px단위(또는 superView의 높이 비율)로 지정
// 양수 offset은 view를 아래로 이동, 음수 값은 superView 중심을 기준으로 위로 이동
vCenter() // vCenter(0)과 같은 표현

 

여러 모서리 고정

• all(_ margin: CGFloat) / all() / all(_ margin: UIEdgeInsets)

// top, left, bottom, right edge를 배치
// margin은 superView의 해당 edges로부터 top, bottom, left, right거리를 px단위로 지정

view.top(value).bottom(value).left(value).right(value) // all과 비슷한 표현

all() // all(0)과 같은 표현

all(:UIEdgeInsets) // safeArea와 readable, layout margin에 유용

• horizontally(_ margin: CGFloat) / horizontally(_ margin: Percent) / 
  horizontally() / horizontally(_ margin: UIEdgeInsets)
• vertically(_ margin: CGFloat) / vertically(_ margin: Percent) / 
  vertically() / vertically(_ margin: UIEdgeInsets)

// horizontally(vertically)
// 왼쪽(상단) 및 오른쪽(하단) edge를 배치, 
// margin은 superView의 edge로부터 왼쪽(상단) 및 오른쪽(하단) 거리를 px단위(superView의 가로(세로) 비율)로 지정

horizontally() // horizontally(0)과 같은 표현
horizontally(:UIEdgeInsets) // UIEdgeInset의 left, right 사용

 

SuperView를 기준으로 여러 가장자리 고정

 

 

viewA.pin.topRight().size(100) // viewA.pin.top().right().size(100)도 같은 표현

 

Relative Edges Layout

---

above /below / before / after / left / right

• above(of: UIView) / above(of: [UIView]) : View 위에 배치
• below(of: UIView) / below(of: [UIView]) : View 아래에 배치
• before(of: UIView) / before(of: [UIView]) : View 왼쪽에 배치
• after(of: UIView) / after(of: [UIView])  : View 오른쪽에 배치
• left(of: UIView) / left(of: [UIView]) : before과 유사, View 왼쪽에 배치하고 View의 오른쪽 edge에 위치
• right(of: UIView) / right(of: [UIView]) : after과 유사, View 오른쪽에 배치하고 View의 왼쪽 edge에 위치

// relative position
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)

 

---

Example

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let padding: CGFloat = 10
        let safeArea = self.view.safeAreaInsets
        
        imageView.pin.top(safeArea).left(safeArea).width(100).aspectRatio().margin(10)
        
        segmentControl.pin.after(of: imageView, aligned: .top).right(safeArea).marginHorizontal(padding)
        
        descriptionLabel.pin.below(of: segmentControl, aligned: .left).width(of: segmentControl).pinEdges().marginTop(padding).sizeToFit(.width)
        
        seperatorView.pin.below(of: [imageView, descriptionLabel], aligned: .left).right(to: segmentControl.edge.right).marginTop(10).height(1)
 }

 

 

참고

---

PinLayout 사용해보기