[iOS] 언제까지 SnapKit? SwiftLayout은 어때?

1. SwiftLayout이란?

SwiftLayout은 Auto Layout의 복잡성을 줄이고, 선언형(Declarative) 방식으로 뷰를 구성할 수 있도록 도와줍니다. SwiftUI의 레이아웃 작성 방식과 유사하게 UIKit에서 사용할 수 있도록 설계된 것이 특징입니다.

이 글에서는 SwiftLayout을 활용하여 어떻게 간결하고 효율적인 UI 레이아웃을 구성할 수 있는지 예제 코드와 함께 살펴보겠습니다.

2. SwiftLayout의 특징

1. 선언형(Declarative) 문법: SwiftUI처럼 직관적으로 UI를 구성할 수 있습니다.
2. 간결한 코드: 기존 Auto Layout 코드보다 훨씬 짧고 가독성이 좋습니다.
3. 동적 레이아웃 변경 용이: 특정 조건에 따라 레이아웃을 쉽게 변경할 수 있습니다.
4. UIKit과의 완벽한 호환: 기존 UIKit 기반 프로젝트에서도 사용할 수 있습니다.

3. SwiftLayout 설치 방법

SwiftLayout은 **Swift Package Manager(SPM)**를 통해 설치할 수 있습니다.

1. Xcode에서 프로젝트를 연다.
2. File > Add Packages... 선택.
3. 다음 URL을 입력:
4. https://github.com/ioskrew/SwiftLayout
5. 원하는 버전을 선택하고 Add Package를 클릭.

설치가 완료되면, import SwiftLayout을 추가하여 사용할 수 있습니다.

4. SwiftLayout 기본 사용법

SwiftLayout의 기본 개념은 Layout을 사용하여 뷰의 배치를 선언하는 것입니다.

4.1 기본 레이아웃 코드

import UIKit
import SwiftLayout

class ViewController: UIViewController {
    let label = UILabel()
    let button = UIButton(type: .system)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label.text = "Hello, SwiftLayout!"
        label.textAlignment = .center
        
        button.setTitle("Click Me", for: .normal)
        
        view.addSubview(label)
        view.addSubview(button)
        
        // SwiftLayout 적용
        layout(
            label.anchors { 
                Anchors.centerX == view.centerXAnchor
                Anchors.top == view.safeAreaLayoutGuide.topAnchor + 20
            },
            button.anchors {
                Anchors.centerX == view.centerXAnchor
                Anchors.top == label.bottomAnchor + 10
            }
        )
    }
}

설명

• layout() 함수를 사용하여 뷰의 배치를 선언합니다.
• Anchors를 활용하여 뷰의 위치를 지정합니다.
• + 20, + 10과 같은 구문을 사용하여 간단히 여백을 조정할 수 있습니다.

5. @LayoutBuilder 사용법

5.1 함수형 @LayoutBuilder 사용

@LayoutBuilder를 사용하면 보다 유연하게 레이아웃을 구성할 수 있습니다.

import UIKit
import SwiftLayout

class BuilderViewController: UIViewController {
    let label = UILabel()
    let button = UIButton(type: .system)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label.text = "@LayoutBuilder 예제"
        label.textAlignment = .center
        
        button.setTitle("클릭", for: .normal)
        
        view.addSubview(label)
        view.addSubview(button)
        
        layout(buildLayout())
    }
    
    @LayoutBuilder
    func buildLayout() -> Layout {
        label.anchors {
            Anchors.centerX == view.centerXAnchor
            Anchors.top == view.safeAreaLayoutGuide.topAnchor + 20
        }
        button.anchors {
            Anchors.centerX == view.centerXAnchor
            Anchors.top == label.bottomAnchor + 10
        }
    }
}

5.2 속성 기반 @LayoutBuilder 사용

SwiftLayout은 @LayoutBuilder 속성을 활용하여 보다 직관적인 UI 구성을 지원합니다.

import UIKit
import SwiftLayout

class LayoutBuilderViewController: UIViewController, Layoutable {
    let titleLabel = UILabel()
    let button = UIButton(type: .system)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        titleLabel.text = "SwiftLayout 속성 기반 예제"
        titleLabel.textAlignment = .center
        
        button.setTitle("확인", for: .normal)
        
        view.addSubview(titleLabel)
        view.addSubview(button)
        
        activateLayout()
    }
    
    @LayoutBuilder var layout: some Layout {
        self.sl.sublayout {
            titleLabel.anchors {
                Anchors.centerX == view.centerXAnchor
                Anchors.top == view.safeAreaLayoutGuide.topAnchor + 20
            }
            button.anchors {
                Anchors.centerX == view.centerXAnchor
                Anchors.top == titleLabel.bottomAnchor + 10
            }
        }
    }
}

설명

• @LayoutBuilder var layout: some Layout을 사용하여 뷰의 배치를 선언합니다.
• self.sl.sublayout을 활용하여 레이아웃을 구성할 수 있습니다.
• activateLayout()을 호출하면 해당 레이아웃이 적용됩니다.

6. 동적 레이아웃 변경

SwiftLayout을 사용하면 특정 조건에 따라 동적으로 레이아웃을 변경할 수도 있습니다.

import UIKit
import SwiftLayout

class DynamicLayoutViewController: UIViewController {
    let label = UILabel()
    let toggleButton = UIButton(type: .system)
    var isExpanded = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label.text = "작은 텍스트"
        label.textAlignment = .center
        
        toggleButton.setTitle("확장하기", for: .normal)
        toggleButton.addTarget(self, action: #selector(toggleText), for: .touchUpInside)
        
        view.addSubview(label)
        view.addSubview(toggleButton)
        
        updateLayout()
    }
    
    @objc func toggleText() {
        isExpanded.toggle()
        label.text = isExpanded ? "긴 텍스트 예제입니다!" : "작은 텍스트"
        updateLayout()
    }
    
    func updateLayout() {
        layout(
            label.anchors {
                Anchors.centerX == view.centerXAnchor
                Anchors.top == view.safeAreaLayoutGuide.topAnchor + 20
            },
            toggleButton.anchors {
                Anchors.centerX == view.centerXAnchor
                Anchors.top == label.bottomAnchor + 10
            }
        )
    }
}

설명

• 버튼을 클릭하면 toggleText()가 실행되어 isExpanded 값을 변경합니다.
• updateLayout()을 호출하여 새로운 레이아웃을 적용합니다.

7. 결론

SwiftLayout은 UIKit에서 SwiftUI 스타일의 선언형 레이아웃을 사용할 수 있도록 도와주는 강력한 라이브러리입니다.

기존 Auto Layout보다 훨씬 간결한 문법으로 복잡한 레이아웃을 쉽게 구성할 수 있습니다.

프로젝트에서 Auto Layout을 사용하면서 코드의 복잡성을 줄이고 싶다면, SwiftLayout을 적극적으로 활용해보세요.