본문 바로가기
UIKit

코드베이스로 UILabel 구현하기

by 리버🐦‍🔥 2023. 10. 4.
<UILabel>
  • 텍스트 레이블을 표시하는 데 사용
[Method & Property]
  • text: 라벨에 표시할 문자열을 설정합니다.
  • font: 텍스트의 폰트를 설정합니다.
  • textColor: 텍스트의 색상을 설정합니다.
  • textAlignment: 텍스트의 정렬 방식을 설정합니다 (left, center, right 등).
  • lineBreakMode: 텍스트가 라벨의 크기를 초과할 때 줄 바꿈 방식을 설정합니다.
  • numberOfLines: 텍스트의 표시되는 줄 수를 설정합니다. 0으로 설정하면 자동으로 줄 바꿈됩니다.
  • lineSpacing: 텍스트 라인 간의 간격을 설정합니다 (NSAttributedString을 사용할 때).
  • sizeToFit(): 텍스트의 길이에 따라 라벨의 너비와 높이가 자동으로 조절됩니다.
등… 프로퍼티 및 메서드 추가로 공부해보기!

 

//
//  UILabelTest.swift
//  UIKit-Study
//
//  Created by Kyungsoo Lee on 2023/09/30.
//

import UIKit

class UILabelTest: UIViewController {
    // MARK: - UILable
    private lazy var uiLable: UILabel = {
        let label = UILabel()
        label.text = "UILabel"
        label.textAlignment = .center
        label.font = UIFont.boldSystemFont(ofSize: 50)
        label.textColor = .white
        label.backgroundColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        
        return label
    }()

    // MARK: - viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.view.backgroundColor = .systemGray
        
        // 뷰 추가(아직 layout 설정 안된 상태)
        self.view.addSubview(uiLable)
        
        setLayout()
    }

    // MARK: - UILabel 제약조건
    private func setUILableLayout() {
        let uiLabelConstraint = [
            uiLable.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            uiLable.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ]
        
        // 제약 조건을 활성화 시켜 오토 레이아웃 설정한다.
        NSLayoutConstraint.activate(uiLabelConstraint)
        /*
         위 방식과 동일한 코드(서로 방식만 다름)
         uiLable.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
         uiLable.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
         */
    }

    // MARK: - 전체 제약조건 설정
    // 컴포넌트들의 레이아웃을 설정한다
    private func setLayout() {
        // 프레임 기반의 레이아웃을 비활성화 하여 오토 레이아웃을 기반으로 설정할 수 있도록 한다.
        
        // UILabel 제약조건 설정
        setUILableLayout()
    }
}

import SwiftUI

@available(iOS 13.0.0, *)
struct UILabelTestPreview: PreviewProvider {
    static var previews: some View {
        UILabelTest().toPreview()
    }
}