[TIL] Padding

Eden·2025년 8월 27일

UIKit에서는 직접적으로 padding이라는 속성이 존재하지 않습니다. 대신
뷰 내부 여백을 표현하는 여러 속성을 통해 Padding 효과를 구현합니다.\
대표적으로 contentEdgeInsets, layoutMargins, textContainerInset
등이 사용됩니다.

2. 주요 Padding 관련 속성

2.1 UIButton - contentEdgeInsets

UIButton 내부의 텍스트나 이미지와 버튼 테두리 사이의 여백을 조절합니다.

let button = UIButton(type: .system)
button.setTitle("확인", for: .normal)
button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)

2.2 UILabel / UITextView - textInsets

UILabel에는 기본 제공되지 않지만, 커스텀 서브클래스를 만들어 padding을
적용할 수 있습니다.\
UITextView의 경우 textContainerInset 속성을 활용할 수 있습니다.

let textView = UITextView()
textView.text = "메시지"
textView.textContainerInset = UIEdgeInsets(top: 10, left: 12, bottom: 10, right: 12)

2.3 UIView - layoutMargins

UIView에서는 layoutMargins를 통해 서브뷰와의 간격을 설정할 수
있습니다.

let containerView = UIView()
containerView.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

Auto Layout 제약조건을 설정할 때 layoutMarginsGuide를 활용하면 마진
안쪽에 서브뷰를 배치할 수 있습니다.

let label = UILabel()
containerView.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.leadingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.leadingAnchor),
    label.trailingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.trailingAnchor)
])

3. Padding과 관련된 클래스별 요약

클래스 관련 속성 설명

UIButton contentEdgeInsets 버튼 콘텐츠와
테두리 사이 여백

UITextView textContainerInset 텍스트와 뷰 경계
사이 여백

UILabel (직접 제공 X, 커스텀 필요) drawText(in:)
오버라이드로 구현

UIView layoutMargins 서브뷰와의 간격
설정

4. UILabel에서 Padding 구현 예시

UILabel에는 padding 속성이 없기 때문에 서브클래스를 만들어 적용합니다.

class PaddingLabel: UILabel {
    var textInsets = UIEdgeInsets(top: 8, left: 12, bottom: 8, right: 12)
    
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: textInsets))
    }

    override var intrinsicContentSize: CGSize {
        let size = super.intrinsicContentSize
        return CGSize(width: size.width + textInsets.left + textInsets.right,
                      height: size.height + textInsets.top + textInsets.bottom)
    }
}