[iOS] UILabel: 아니 padding이 왜 없어요..? UILabel에 패딩 적용하기

않이 패딩이 왜 없어..?

웹 개발을 했다면 익숙한, CSS는 이것을 위해 존재한다고 해도 과언이 아닐 정도로 자주 사용하는 padding이라는 속성이 있습니다. 값으로 상하좌우 중 골라서, 상하/좌우를 묶어서, 심지어는 값 하나로 상하좌우에 모두 적용하게 할 수도 있습니다.

하지만 iOS에서 레이블에 텍스트를 넣고 실행해보면,

이렇게 글자 크기에 맞춰서 사이즈가 결정되어 패딩을 넣을 수가 없습니다. 스토리보드에는 아무리 찾아봐도 없더라구요.. 그래서 구글링을 통해 방법을 찾아 소개해드리려고 합니다!

https://stackoverflow.com/questions/27459746/adding-space-padding-to-a-uilabel

Adding space/padding to a UILabel

이 답변을 보고 포스트를 쓰게 되었습니다!

커스텀 UILabel 만들기

UILabel을 상속하는 클래스를 만들어서 패딩을 적용시켜주어야 합니다.

class PaddingLabel: UILabel { 

}

이렇게 새 클래스를 먼저 하나 만들겠습니다.

 

그리고 이 클래스를 사용하도록 스토리보드에서 생성했던 레이블에 연결해줍니다.

 

 

iOS에서는 padding이라는 용어를 사용하지 않고 edge inset 이라는 용어를 사용하는데요, 이를 설정할 수 있는 객체가 UIEdgeInset으로 제공됩니다.

 

class PaddingLabel: UILabel { 
    @IBInspectable var topInset: CGFloat = 4.0 
    @IBInspectable var bottomInset: CGFloat = 4.0 
    @IBInspectable var leftInset: CGFloat = 8.0 
    @IBInspectable var rightInset: CGFloat = 8.0 
}

네 방향에 대한 inset 값을 지정해주고, 스토리보드에서도 값을 변경할 수 있도록 @IBInspectable을 붙여주었습니다! 설정한 inset들을 적용하는 시점은 언제일까요?? 직관적으로 생각해보면, UILabel 배경이 그려지고, 그다음에 텍스트가 그려질 텐데 딱 그 점에 패딩을 적용해서 텍스트를 그려주면 되지 않을까요..! 그래서 우리는 UILabel의 drawText 메서드를 오버라이드 해서 재정의해줍니다.

 

class PaddingLabel: UILabel { 
	@IBInspectable var topInset: CGFloat = 4.0 
	@IBInspectable var bottomInset: CGFloat = 4.0 
	@IBInspectable var leftInset: CGFloat = 8.0 
	@IBInspectable var rightInset: CGFloat = 8.0 

	override func drawText(in rect: CGRect) { 
		let insets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset) 
		super.drawText(in: rect.inset(by: insets)) 
	} 
}

자 이렇게 CGRect에 UIEdgeInsets 을 적용해서 패딩이 적용된 뷰에 텍스트를 그려줍니다.

그런데 이렇게만 하고 실행해보면,

텍스트가 잘려버립니다. 이유는 단순합니다. UILabel은 intrinsicContentSize를 사용해서 텍스트의 높이와 길이에 따라 가로 너비를 결정합니다. 이 때문에 우리는 따로 UILabel의 크기를 정해주지 않아도 iOS가 자동으로 너비를 설정해주었습니다. 그런데 지금은 텍스트와 텍스트를 담고 있는 뷰의 길이가 패딩으로 인해 달라져버렸습니다.

그래서 UILabel의 intrinsicContentSize를 패딩까지 포함하는 크기로 결정해주어야 정상적으로 레이블이 보여지게 할 수 있습니다. 이 작업은 UILabel의 intrinsicContentSize 연산 프로퍼티를 오버라이드 해서 반환 값을 바꿔줍니다!

class PaddingLabel: UILabel { 
    @IBInspectable var topInset: CGFloat = 4.0 
    @IBInspectable var bottomInset: CGFloat = 4.0 
    @IBInspectable var leftInset: CGFloat = 8.0 
    @IBInspectable var rightInset: CGFloat = 8.0 
    
    override func drawText(in rect: CGRect) { 
    	let insets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset) 
        super.drawText(in: rect.inset(by: insets)) 
    } 
 	override var intrinsicContentSize: CGSize { 
        let size = super.intrinsicContentSize 
    	return CGSize(width: size.width + leftInset + rightInset, height: size.height + topInset + bottomInset) 
    } 
}

설정했던 좌우, 상하 패딩을 기존 intrinsicContentSize의 가로와 세로 값에 더해서 반환해주도록 오버라이드했습니다.

그리고 마지막으로 패딩이 포함된 bounds도 설정해주기 위해서

 

class PaddingLabel: UILabel { 
	@IBInspectable var topInset: CGFloat = 8.0 
	@IBInspectable var bottomInset: CGFloat = 8.0 
	@IBInspectable var leftInset: CGFloat = 16.0 
	@IBInspectable var rightInset: CGFloat = 16.0 

	override func drawText(in rect: CGRect) { 
		let insets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset) 
		super.drawText(in: rect.inset(by: insets)) 
	} 
	override var intrinsicContentSize: CGSize { 
		let size = super.intrinsicContentSize 
		return CGSize(width: size.width + leftInset + rightInset, height: size.height + topInset + bottomInset) 
	} 
	override var bounds: CGRect { 
		didSet { preferredMaxLayoutWidth = bounds.width - (leftInset + rightInset) } 
	} 
}

이렇게 bounds 프로퍼티도 오버라이드를 해주고 bounds 값이 바뀔 때마다 가로 너비를 패딩을 포함하도록 정의했습니다!

그럼 실행해볼까요?

패딩이 잘 적용되었습니다~!!

그리고 IBInspectable을 지정해두었기 때문에 이렇게 스토리보드 상에서도 값을 정할 수 있습니다.

미리 정의해두고 필요할 때마다 사용하면 유용하겠죠? 저도 자주 이용하게 될 것 같습니다!

 

전체 코드