swift / UIView / 같은 스타일의 요소가 반복될 때 (2) #FactoryPattern

임혜정·2024년 8월 23일
0
post-thumbnail
post-custom-banner

한 프로젝트에서 타이틀이나 본문같이 Label이나 Button이 반복될 일이 많은 경우, 스타일 양식을 정해두고 UIComponent로 정의해두고 여러 곳에서 인스턴스로 생성하게 할 수 있다.
(위 사진 같은 경우에는 컬렉션뷰를 사용할 것 같지만..)

장점 : 뷰 코드가 간단해지고 프로젝트 내에서 뷰 작업자가 여러명일 때에 ui요소의 크기나 굵기등이 들쭉날쭉해서 통일감없는 디자인 기강을 잡아줄 수 있음

위와 같은 가상상황에 필요한 것은
1. 타이틀로 사용될 레이블 생성기
2. 서브타이틀 혹은 본문으로 사용될 레이블 생성기

화면과 같은 레이아웃이 필요하다면 uilabel코드가 계속 반복될 것임을 예상을 할 수 있다. 최소 3번이상?


실제 코드 짜보기

import UIKit

// MARK: - 전체 앱의 뷰 통일감을 위해 ui컴포넌트를 제작

protocol LabelFactory {
    func createLabel(with text: String, color: UIColor) -> UILabel
}

class BaseLabelFactory: LabelFactory {
    func createLabel(with text: String, color: UIColor) -> UILabel {
        let label = UILabel()
        label.textAlignment = .left
        label.text = text
        label.textColor = color
        return label
    }
}

class TitleLabelFactory: BaseLabelFactory {
    override func createLabel(with text: String, color: UIColor) -> UILabel {
        let label = super.createLabel(with: text, color: color)// 매개변수는 레이블 각각이 다 다를 부분
        label.font = UIFont.boldSystemFont(ofSize: 24) // 레이블의 성격따라 다를 부분
        return label
    }
}

class ContentLabelFactory: BaseLabelFactory {
    override func createLabel(with text: String, color: UIColor) -> UILabel {
        let label = super.createLabel(with: text, color: color)
        label.font = .systemFont(ofSize: 16)
        return label
    }
}


1.프로토콜로 레이블공장 메서드를 정의한다.

이 때, 레이블마다 다른 속성을 가지게 될 부분은 파라미터를 받게 한다. 레이블의 text는 다 달라질 것이고 color값을 하나 더 받아서 다양한 본문과 간단한 설명이 필요한 곳에 쓰이게 할 것임.

2. BaseLabelFactory는 레이블공장 프로토콜을 채택하여 프로젝트내의 모든 레이블의 공통 프로퍼티를 정의한다.

3. TitleLabelFacotory: 섹션 타이틀로 사용될 레이블 생성기

4. ContentLabelFactory: 서브 타이틀이나 본문 설명 등으로 사용될 레이블 생성기


실제 view파일에서의 사용

class MainView: UIView {
    
    private let skinTitleLabel = TitleLabelFactory().createLabel(with: "기초케어", color: .black)
    private let hairTitleLabel = TitleLabelFactory().createLabel(with: "헤어케어", color: .black)
    private let sailTitleLabel = TitleLabelFactory().createLabel(with: "세일", color: .black)
    
    private let contentLabel = ContentLabelFactory().createLabel(with: "스킨,로션,에센스", color: .systemGray)
    
profile
오늘 배운걸 까먹었을 미래의 나에게..⭐️
post-custom-banner

0개의 댓글