[swift] QuickLayout을 사용하여 메모장 앱의 레이아웃 설정하기

17 Nov 2023

swift

이번에는 Swift 언어를 사용하여 메모장 앱의 레이아웃을 설정하는 방법에 대해 알아보겠습니다. 레이아웃 설정을 쉽게 해주는 QuickLayout 라이브러리를 사용하여 진행할 것입니다.

QuickLayout이란?

QuickLayout은 iOS 개발을 더 편리하게 만들어주는 Auto Layout 라이브러리입니다. Auto Layout은 다양한 장치의 화면 크기에 대응할 수 있도록 뷰의 위치와 크기를 설정하는 것을 도와줍니다. QuickLayout은 Auto Layout을 더 쉽게 사용하기 위해 구현된 라이브러리입니다.

프로젝트 설정

첫 번째로, 프로젝트에 QuickLayout 라이브러리를 추가해야 합니다. CocoaPods를 사용한다면, Podfile에 다음과 같이 추가해주세요.

pod 'QuickLayout'

그리고 터미널에서 pod install 명령어를 실행하여 라이브러리를 설치합니다.

레이아웃 설정하기

메모장 앱의 레이아웃은 다음과 같이 설정하겠습니다.

메모 목록을 보여주는 테이블 뷰는 화면 전체를 차지하며, 상단에는 네비게이션 바가 있습니다.
메모 상세 화면은 화면 전체를 차지하며, 상단에는 툴바가 있습니다.

메모 목록 화면

import QuickLayout

class MemoListViewController: UIViewController {

    let tableView = UITableView()
    let navigationBar = UINavigationBar()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupLayout()
    }

    func setupLayout() {
        view.addSubview(navigationBar)
        view.addSubview(tableView)

        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "memoCell")
        
        // navigationBar
        navigationBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            navigationBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            navigationBar.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
        
        // tableView
        tableView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
}

메모 상세 화면

import QuickLayout

class MemoDetailViewController: UIViewController {

    let toolbar = UIToolbar()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupLayout()
    }

    func setupLayout() {
        view.addSubview(toolbar)

        // toolbar
        toolbar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            toolbar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
}

마무리

이렇게 Swift 언어를 사용하여 메모장 앱의 레이아웃을 설정하는 방법에 대해 알아보았습니다. QuickLayout 라이브러리를 활용하면 Auto Layout을 더 쉽게 설정할 수 있습니다. 앞으로도 QuickLayout과 같은 유용한 라이브러리를 활용하여 iOS 개발을 더욱 편리하게 진행해보세요.

참고 자료: