영감

자신의 위대한 마음에서든 드리블과 같은 사이트에서든 영감을 찾을 때. 위의 예와 같이 재사용할 수 있는 여러 버튼과 레이블을 볼 수 있습니다.

동일한 방법으로 프로그래밍 방식으로 저장 속성을 만드는 것은 지루하고 불필요합니다. DRY 개념을 따르지 않으면 리팩토링하십시오.

D: 하지마

R: 반복

Y: 너 자신

코드를 작성할 때 우리는 이 두 개의 저장 속성이 공통 관심사를 공유한다는 것을 알게 되었습니다.

let articleTitle: UILabel = {
 let articleTitle = UILabel()
 articleTitle.translateAutoresizeMaskIntoConstraints = false
 articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
 articleTitle.textColor = .white
 articleTitle.numberOfLines = 0
 return articleTitle
}()

• translatesAutoresizingMaskIntoConstraints = false
• font = UIFont.systemFont()
• textColor = .white

이것은 6줄의 원치 않는 코드입니다. 이 문제를 해결하는 데 도움이 되는 스타일 파일을 구현해 봅시다!

class TestUIStyle: UILabel {
 enum Style {
  /*
   I usually determine my cases based on the needs of the project. Let's try to get some of the details in order.
  */
  // HomeView
  case title, header
 }
}

새 Swift 파일을 만들고 이름을 TestUIStyle로 지정했습니다. 내가 흉내내고 싶은 스타일은 레이블을 위한 것입니다. UILabel로 서브클래싱하고 "Style"이라는 열거형으로 시작합니다. 보시다시피 저는 드리블 이미지를 통해 이를 따를 레이블이 엄청나게 많다는 것을 확인했습니다.

let style: Style
init(style: Style, text: String) {
 self.style = style
 super.init(frame: .zero)
 self.text = text
 setupStyling()
}

required init?(coder: NSCoder) {
 fatalError("init(coder:) has not been implemented")
}

private func setupStyling() {

}

이제 상수를 만들고 열거형으로 설정하고 초기화합니다. 이를 통해 ViewControllers에서 생성할 때 원하는 스타일과 원하는 텍스트를 선택할 수 있습니다. "텍스트: 문자열"은 선택 사항이며 원하지 않는 경우 요구 사항이 아닙니다.

private func setupStyling() {
 translatesAutoresizingMaskIntoConstraints = false
 numberOfLines = 0

 switch style {
  case .header:
   font = .systemFont(ofSize: 20, weight: .bold)
   textColor = .label
  case .title:
   font = .systemFont(ofSize: 14, weight: .light)
   textColor = .white
  default:
   font = .systemFont(ofSize: 12, weight: .regular)
   textcolor = .yellow
 }
}

전환되는 각 스타일에서 볼 수 있듯이 자체 설정 속성이 있지만 모두 필요한 두 가지 사항을 모두 준수합니다.

• translatesAutoResizingMaskIntoConstraints = false
• numberOfLines = 0

이 스타일 파일이 이전에 가지고 있던 것에서 현재로 어떻게 변하는지 봅시다!

// New code from the style
let articleTitle = TestUIStyle(style: .title, text: "Medium"
let articleHeader = TestUIStyle(style: .header, text: "Name of Source"

// Old code from the style
let articleTitle: UILabel = {
 let articleTitle = UILabel()
 articleTitle.translatesAutoresizingMaskIntoConstraints = false
 articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
 articleTitle.textColor = .white
 articleTitle.numberOfLines = 0
 return articleTitle
}

원치 않는 코드를 정리하면 프로그래밍 방식의 UI로 작업할 때 시간을 크게 절약할 수 있습니다. 우리는 모든 것을 두 줄로 줄일 수 있습니다.



보기 위한 전체 샘플 코드는 다음과 같습니다! 당신이 나처럼 DRY를 선호하기를 바랍니다!

import Foundation
import UIKit

class TestUIStyle: UILabel {
    enum Style {
        // HomeView
        case header, description, title, dates, author
        // ArticleDetailView
        case detailTitle, detailDate, detailAuthor, detailPaper, detailContent
        // CollectionView
        case collectionTitle, collectionAuthor
    }

    let style: Style
    init(style: Style, text: String) {
        self.style = style
        super.init(frame: .zero)
        self.text = text
        setupStyling()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupStyling() {
        translatesAutoresizingMaskIntoConstraints = false
        numberOfLines = 0

        switch style {
        case .header:
            font = .systemFont(ofSize: 20, weight: .bold)
            textColor = .label
        case .title:
            font = .systemFont(ofSize: 14, weight: .light)
            textColor = .white
        default:
            font = .systemFont(ofSize: 12, weight: .regular)
            textColor = .yellow
        }
    }
}