Padding이 적용되는 Custom UILabel 만들기

개발을 하다보면 Label 영역에 Padding을 주어야 하는 경우가 자주 발생합니다.

그럴때는 UIView를 만들고 SubView로 UILabel을 추가하면서 Leading, Trailing, Top, Bottom space를 Padding할 사이즈만큼 주면 되지만 그렇게 할 경우, Layout이 쓸데 없이 복잡해지니 이럴때는 간단하게 UILabel을 커스텀해서 패딩을 추가할 수 있습니다.

 

Step 1.

커스텀 클래스 추가

우선 UILabel을 상속받은 MyPaddingLabel.swift 파일을 아래와 같이 추가해줍니다.

import UIKit

class MyPaddingLabel: UILabel {
    var padding: UIEdgeInsets
    
    @IBInspectable
    var left: CGFloat {
        get {
            self.padding.left
        }
        set {
            self.padding.left = newValue
        }
    }
    
    @IBInspectable
    var right: CGFloat {
        get {
            self.padding.right
        }
        set {
            self.padding.right = newValue
        }
    }
    
    @IBInspectable
    var top: CGFloat {
        get {
            self.padding.top
        }
        set {
            self.padding.top = newValue
        }
    }
    
    @IBInspectable
    var bottom: CGFloat {
        get {
            self.padding.bottom
        }
        set {
            self.padding.bottom = newValue
        }
    }

    override init(frame: CGRect) {
        self.padding = .zero
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        self.padding = .zero
        super.init(coder: coder)
    }
    
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: padding))
    }
    
    convenience init(inset: UIEdgeInsets) {
        self.init(frame: .zero)
        self.padding = inset
    }
    
    override var intrinsicContentSize: CGSize {
        var size = super.intrinsicContentSize
        size.width += padding.left + padding.right
        size.height += padding.top + padding.bottom
        return size
    }
}

 

Step 2.

스토리 보드에 UILabel 추가

스토리보드의 ViewController에 UILabel을 추가합니다.

 

추가 후, ViewController의 중앙에 위치하도록 속성값을 입력합니다. 

 

위와 같이 보여지도록 Text를 "MyPaddingLabel"로 입력하고 TextColor를 흰색으로 선택 후,

Padding이 잘 표시되도록 UILabel의 백그라운드 색상을 Light Gray로 선택해 줍니다.

 

 

Step 3.

UILabel을 커스텀 클래스로 변경

class를 UILabel에서 MyPaddingLabel로 명시적으로 선택해 줍니다.

 

그러면 Attributes Inspector에 아래와 같이 My Padding Label에 4개의 속성이 추가된 것을 확인할 수 있는데

이는 MyPaddingLabel의 @IBInspectable 속성 덕분입니다.

이제 스토리보드에서 편하게 padding 값을 입력하면 됩니다.

* 저는 모든 값에 10을 넣었습니다.

 

마무리

이렇게 한 후 실행하면 아래와 같이 padding이 10씩 적용된 값을 확인할 수 있습니다.

 

 

추가

코드로 추가하기

설명은 코드에서...

class MyAutolayType1Controller: UIViewController {
    
    @IBOutlet var vContents: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 커스텀 클래스 추가
        let myPaddingLabel = MyPaddingLabel()

        // 기본 정보 입력
        myPaddingLabel.text = "MyCustomPaddingLabel"
        myPaddingLabel.textColor = .white
        myPaddingLabel.backgroundColor = .darkGray

        // 패딩값 입력
        myPaddingLabel.padding = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

        // Controller의 메인뷰의 서브뷰로 추가
        self.vContents.addSubview(myPaddingLabel)

        // 화면의 중앙을 기준으로 정렬되지만 기존 스토리보드에서 추가된 패딩라벨의 하단에 위치하도록 값 입력
        myPaddingLabel.translatesAutoresizingMaskIntoConstraints = false
        myPaddingLabel.centerXAnchor.constraint(equalTo: self.vContents.centerXAnchor).isActive = true
        myPaddingLabel.centerYAnchor.constraint(equalTo: self.vContents.centerYAnchor, constant: 50.0).isActive = true
    }    
}

 

다시 앱을 실행하면 아래 그림과 같이 "MyCustomPaddingLabel" 문구가 padding되어 보여지는 것을 확인 할 수 있습니다.