[swift] QuickLayout을 사용하여 일기 기록 앱의 레이아웃 설정하기

17 Nov 2023

swift

이번 블로그 포스트에서는 Swift의 QuickLayout 라이브러리를 사용하여 일기 기록 앱의 레이아웃을 설정하는 방법에 대해 알아보겠습니다.

QuickLayout이란?

QuickLayout은 Swift에서 사용할 수 있는 레이아웃 라이브러리로, Auto Layout을 쉽게 구현할 수 있도록 도와줍니다. QuickLayout을 사용하면 기기의 크기 또는 방향에 상관없이 일관된 디자인을 유지할 수 있습니다.

설치 방법

먼저, QuickLayout을 프로젝트에 추가해야 합니다. 다음과 같이 Cocoapods를 사용하여 QuickLayout을 설치할 수 있습니다.

pod 'QuickLayout'

설치가 완료되면, 프로젝트의 import 구문에 QuickLayout을 추가합니다.

import QuickLayout

레이아웃 설정하기

이제 QuickLayout을 사용하여 일기 기록 앱의 레이아웃을 설정해보겠습니다. 화면에는 제목, 날짜, 내용을 입력하는 TextField와 저장 버튼이 있습니다.

import UIKit
import QuickLayout

class DiaryViewController: UIViewController {
    
    private let titleLabel = UITextField()
    private let dateLabel = UITextField()
    private let contentTextView = UITextView()
    private let saveButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 레이아웃 설정
        view.addSubview(titleLabel)
        view.addSubview(dateLabel)
        view.addSubview(contentTextView)
        view.addSubview(saveButton)
        
        titleLabel.anchor(top: view.safeAreaLayoutGuide.topAnchor,
                          leading: view.leadingAnchor,
                          trailing: view.trailingAnchor,
                          paddingTop: 20,
                          paddingLeading: 20,
                          paddingTrailing: 20,
                          height: 30)
        
        dateLabel.anchor(top: titleLabel.bottomAnchor,
                         leading: titleLabel.leadingAnchor,
                         trailing: titleLabel.trailingAnchor,
                         paddingTop: 10,
                         height: 20)
        
        contentTextView.anchor(top: dateLabel.bottomAnchor,
                               leading: titleLabel.leadingAnchor,
                               trailing: titleLabel.trailingAnchor,
                               paddingTop: 10,
                               height: 150)
        
        saveButton.anchor(top: contentTextView.bottomAnchor,
                          leading: titleLabel.leadingAnchor,
                          trailing: titleLabel.trailingAnchor,
                          paddingTop: 20,
                          height: 50)
    }
}

위의 코드에서는 QuickLayout의 anchor 메서드를 사용하여 제목, 날짜, 내용, 저장 버튼의 위치와 크기를 설정했습니다. anchor 메서드는 각각의 뷰가 다른 뷰에 상대적으로 어느 위치에 배치될지를 지정할 수 있게 해줍니다. paddding 및 height와 같은 추가적인 구성 요소를 사용하여 간단하게 레이아웃을 설정할 수 있습니다.

마치며

이번 포스트에서는 QuickLayout을 사용하여 일기 기록 앱의 레이아웃을 설정하는 방법을 알아보았습니다. QuickLayout은 Auto Layout을 간편하게 구현할 수 있게 해주는 라이브러리이므로, 다른 프로젝트에서도 유용하게 사용할 수 있습니다. 보다 자세한 사용 방법은 공식 문서를 참조하시기 바랍니다.

QuickLayout 라이브러리: https://github.com/huri000/QuickLayout