Colin's Blog
[swift] QuickLayout을 사용하여 드로잉 앱의 레이아웃 설정하기

드로잉 앱을 만들 때, UI 요소들의 레이아웃을 설정하는 것은 매우 중요한 작업입니다. 사용자가 편리하게 도구들을 사용할 수 있도록 UI를 잘 구성하는 것이 필요합니다.

이번에는 QuickLayout라는 유용한 라이브러리를 사용하여 Swift로 드로잉 앱의 레이아웃을 설정하는 방법에 대해 알아보겠습니다.

QuickLayout 설치하기

QuickLayout은 Cocoapods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가한 후, pod install 명령을 실행하면 됩니다.

pod 'QuickLayout'

QuickLayout 사용하기

1. UIView 확장하기

QuickLayout을 사용하기 위해 UIView를 확장해야 합니다. 예를 들어, 다음과 같이 layout 메서드를 추가할 수 있습니다.

extension UIView {
    @discardableResult
    func layout(using closure: (_ view: UIView, _ superview: UIView) -> Void) -> UIView {
        translatesAutoresizingMaskIntoConstraints = false
        closure(self, superview!)
        return self
    }
}

2. 뷰 생성하고 레이아웃 설정하기

새로운 뷰를 생성하고, 해당 뷰의 레이아웃을 설정할 수 있습니다. QuickLayout의 메서드를 사용하여 쉽게 뷰의 위치와 크기를 조정할 수 있습니다.

let containerView = UIView().layout { view, superview in
    view.backgroundColor = .white
    superview.addSubview(view)
    view.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
    view.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true
    view.widthAnchor.constraint(equalToConstant: 300).isActive = true
    view.heightAnchor.constraint(equalToConstant: 400).isActive = true
}

위의 예제에서는 containerView라는 이름의 뷰를 생성하고, 백그라운드 색상을 흰색으로 설정한 후, 슈퍼뷰에 추가하고, 가로 중앙 정렬 및 세로 중앙 정렬을 설정합니다. 그리고 너비와 높이를 각각 300과 400으로 설정합니다.

3. 다른 뷰와의 관계 설정하기

QuickLayout을 사용하여 다른 뷰와의 관계도 쉽게 설정할 수 있습니다. 예를 들어, containerView의 오른쪽에 drawingView라는 뷰를 추가하고 여백도 설정할 수 있습니다.

let drawingView = UIView().layout { view, superview in
    view.backgroundColor = .lightGray
    superview.addSubview(view)
    view.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
    view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    view.leadingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: 16).isActive = true
    view.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -16).isActive = true
}

위의 예제에서는 drawingView라는 이름의 뷰를 생성하고, 백그라운드 색상을 연한 회색으로 설정한 후, 슈퍼뷰에 추가합니다. 그리고 containerView의 오른쪽에 위치하도록 설정하고, 여백을 16으로 설정합니다.

마무리

QuickLayout을 사용하면 드로잉 앱의 UI 레이아웃 설정이 훨씬 간편해집니다. UIView를 확장하여 QuickLayout의 메서드를 쉽게 사용할 수 있도록 구현하고, 다른 뷰와의 관계도 손쉽게 설정할 수 있습니다.

더 자세한 정보와 사용 방법은 QuickLayout GitHub 저장소를 참조하시기 바랍니다.

© 2018 Colin. All rights reserved.