UIKitPlus - Constraints

안녕하세요. 그린입니다🟢

이번 포스팅에서는 이전에 간략히 포스팅해본 UIKitPlus에서 제약을 주는 방법에 대해 알아보겠습니다🧑🏻‍💻

단독제약

1. aspectRatio (비율)

UView().aspectRatio()
/// 1:1 low priority
UView().aspectRatio(priority: .defaultLow)
/// 2:1
UView().aspectRatio(2 / 1)
/// 4:3 low priority
UView().aspectRatio(priority: .defaultLow)

2. width / height (넓이 / 높이)

/// 100pt
UView().width(100)
/// Stateable width
@UState var width: CGFloat = 100
View().width($width)

오픈소스 라이브러리 리드미에는 height 부분이 width로 나타나와 있더라구요?? 그래서 우선 수정에 관해 PR을 보내봐놨습니다..🙌

오픈소스에 첫 기여하게 될 수도..?!

아, 위에서 width는 height로도 사용될 수 있습니다.

 

3. size (크기)

/// width 100pt, height 100pt
UView().size(100)
/// width 100pt, height 200pt
UView().size(100, 200)
/// Stateable
@UState var width: CGFloat = 100
@UState var height: CGFloat = 100
UView().size($width, 200)
UView().size(100, $height)
UView().size($width, $height)

4. View Aniamtion

let v = UView()
v.width = 100
v.height = 100
UIViewPropertyAnimator(duration: 0.5, curve: .easeInOut) {
    v.width = 200
    v.height = 300
}.startAnimation()

상위제약

1. edges

/// all edges to superview 0pt
UView().edgesToSuperview()
/// all edges to superview 16pt
UView().edgesToSuperview(16)
/// horizontal edges: 16pt, vertical edges: 24pt
UView().edgesToSuperview(16, 24)
/// horizontal edges: 16pt
UView().edgesToSuperview(h: 16)
/// vertical edges: 24pt
UView().edgesToSuperview(v: 24)
/// each edge to different value to superview
UView().edgesToSuperview(top: 24, leading: 16, trailing: -16, bottom: -8)

2. top / leading / trailing / bottom

// 16pt to top of superview
UView().topToSuperview(16)
/// 16pt to safeArea top of superview
UView().topToSuperview(16, safeArea: true)
/// Stateable
@UState var top: CGFloat = 16
UView().topToSuperview($top)

위의 코드에서도 top이 리딩, 트레일링, 바텀등으로 다 대체될 수 있습니다. (형식은 같음)

 

3. centerX / centerY / center / width / height

UView().centerXToSuperview(16)
UView().centerYToSuperview(16)
UView().centerInSuperview(x: 16, y: 8)
/// equal width with superview with low priority
UView().widthToSuperview(priority: .defaultLow)
/// half width of superview
UView().widthToSuperview(multipliedBy: 0.5)
/// half width of superview with low priority
UView().widthToSuperview(multipliedBy: 0.5, priority: .defaultLow)

 

관계

1. top / leading / trailing / bottom / left / right / centerX / centerY / center / width / height / equal

UView().top(to: otherView, $topStateValue)
UView().top(to: .top, of: otherView)
UView().top(to: .top, of: otherView, $topStateValue)
UView().equalSize(to: otherView)

해당 모든 조건들을 아래처럼 태그로 연관지어 사용할 수 있습니다.

UView {
    UView().size(200).background(.red).centerInSuperview().tag(7)
    UView().size(100).background(.cyan).centerXInSuperview().top(to: 7)
    UView().size(100).background(.purple).centerXInSuperview().bottom(to: 7)
    UView().size(100).background(.yellow).centerYInSuperview().right(to: 7)
    UView().size(100).background(.green).centerYInSuperview().left(to: 7)
}

순서도 상관없습니다.

 

이렇게 UIKitPlus에서 제약을 주는 방법들에 대해서 알아봤습니다.

앞으로 해당 오픈소스 라이브러리에서 Usage를 참고하여 한 챕터씩 격파해보자구요!👍🏻

 

[참고자료]

https://github.com/MihaelIsaev/UIKitPlus