[Swift] 'Test UIKit' 프로젝트(1)

Erick·2023년 2월 3일

'Test UIKit' 프로젝트

목록 보기

1/2

'Test UIKit' 프로젝트(1)

새로운 프로젝트

'지구 온도계' 프로젝트가 끝난지도 어느새 3주가 지났네요.
지난 3주 동안은 개인적으로 해보고 싶었던 간단한 프로젝트를 진행했습니다.
MVC패턴을 사용하여 스토리보드 없이 코드로만 UI를 구현해 보고 싶은 욕심이 있어서 그에 맞는 프로젝트를 진행하였습니다.

'Test UIKit'란?

말 그대로 UIKit을 실험해 볼 수 있는 앱입니다.

UIKit의 뷰와 컨트롤러들을 코드로 설정하고 설정한 것을 바로 볼 수 있도록 구현하였습니다.

앱의 구현

MVC 패턴

디자인패턴을 사용하지 않았던 팀 프로젝트를 할 때 항상 느끼던 문제점이 있었습니다. 팀원 간 파트를 분배하는 것이 쉽지 않았고 코드를 짜이는 대로 프로그래밍 했기 때문에 서로의 코드를 볼 때 어려움이 많았습니다. 그래서 다음 개인 프로젝트는 꼭 디자인패턴을 사용해 보고 싶어서 가장 기초가 되는 MVC패턴을 사용하여 프로그래밍하였습니다.

다음과 같이 Model, View, Controller를 나누어 프로그래밍 하였습니다.

Model

Model에는 UIKit들의 이름과 Function, type 등을 담을 수 있도록 구조체를 생성하였습니다.

//UIKits.swift
struct UIKits {
    var UIKitImage: UIImage?
    var UIKitName: String
}

struct UIKitsCodeFunction {
    var UIKitName: String
    var UIKitFunction: [String]
    var UIKitFunctionType: [String]
}

struct UIKitsButtonFunction {
    var UIKitName: String
    var UIKitFunction: [String]
    var UIKitFunctionType: [String]
}

그리고 DataManager를 통해 실제 데이터들을 담고 Controller에서 데이터를 받을 수 있도록 getData()라는 메서드를 생성하였습니다.

//DataManager.swift
class DataManager {
    
    private var uikitList: [UIKits] = []
    private var codeFunctionList: [UIKitsCodeFunction] = []
    private var buttonFunctionList: [UIKitsButtonFunction] = []
    
    func makeUIKitData() {
        uikitList = [
            UIKits(UIKitImage: UIImage(named: "Label"), UIKitName: "Label"),
            UIKits(UIKitImage: UIImage(named: "Button"), UIKitName: "Button"),
            //...
        ]
    }
    func makeUIKitCodeFunctionData() {
        codeFunctionList = [
            UIKitsCodeFunction(UIKitName: "Label", UIKitFunction: ["label.text", "label.numberOfLines"], UIKitFunctionType: ["String?", "Int" ]),
            UIKitsCodeFunction(UIKitName: "Button", UIKitFunction: ["button.setTitle"], UIKitFunctionType: ["String?"]),
            //...
        ]
    }
    func makeUIKitButtonFunctionData() {
        buttonFunctionList = [
            UIKitsButtonFunction(UIKitName: "Label", UIKitFunction: ["label.font", "label.textColor", "label.textAlignment", "label.backgroundColor"], UIKitFunctionType: ["UIFont!", "UIColor!", "NSTextAlignment", "UIColor?"]),
            UIKitsButtonFunction(UIKitName: "Label", UIKitFunction: [ "button.setTitleColor", "button.setImage", "button.backgroundColor"], UIKitFunctionType: ["UIColor?", "UIImage?", "UIColor?"]),
            //...
        ]
    }
    func getUIKitData() -> [UIKits] {
        return uikitList
    }
    func getUIKitCodeData() -> [UIKitsCodeFunction] {
        return codeFunctionList
    }
    func getUIKitButtonData() -> [UIKitsButtonFunction] {
        return buttonFunctionList
    }
}

View

View에는 TableViewCell이나 UIKit들을 보여주는 DetailView들을 만들었습니다.

View를 구현할 때는 스토리보드를 사용하지 않고 코드로만 구현을 하였습니다.
Auto Layout을 설정할 때 사용한 SnapKit도 함께 설명하겠습니다.

SnapKit

스토리보드만 사용하여 UI를 구성하다가 처음으로 코드로만 Auto Layout을 설정하고 UI를 짜는 것은 쉽지 않았습니다. 이때 도움을 받은 것이 SnapKit이라는 라이브러리였습니다.

SnapKit은 iOS의 Auto Layout 기능을 코드로 쉽게 적용할 수 있도록 돕는 라이브러리입니다.

TableViewCell의 Constraints 부분을 보며 설명하겠습니다.
아래 TableViewCell은 하나의 ImageView와 Label로 이루어져 있습니다.

func setConstraints() {
	//ImageView의 Auto Layout 설정
    mainImageView.snp.makeConstraints { make in
        make.leading.equalToSuperview().offset(20)
        make.centerY.equalToSuperview()
        make.width.equalTo(120)
        make.height.equalTo(90)
    }  
    //Label의 Auto Layout 설정
    tittleLabel.snp.makeConstraints { make in
        make.leading.equalTo(mainImageView.snp.trailing).offset(20)
        make.centerY.equalToSuperview()        
    }
}

SnapKit의 .snp.makeConstaints를 통해 Auto Layout을 설정할 수 있습니다.
ImageView의 leading은 SuperView와 20만큼 떨어지도록 CenterY를 통해 세로 중앙이 SuperView와 동일하도록 그리고 가로 120, 높이 90으로 4:3 비율로 설정하였습니다.
Label은 leading을 ImageView의 trailing과 20만큼 떨어지게 설정하였고 CenterY는 SuperView와 맞추었습니다.