How do you add inset to UILabel (iOS Swift)? - ios

Question

I am an Android developer learning iOS. How do you add padding (inset) to UILabel in iOS Swift? I have not been successful at finding an easy tutorial on this. Thank you.
Also, how can I add margins to UI elements in Swift? When I try the below, nothing gets updated (upon hitting "add constraint").

Answer 1

This is the code you need to add in Swift 3:
class InsetLabel: UILabel {
let topInset = CGFloat(0)
let bottomInset = CGFloat(0)
let leftInset = CGFloat(20)
let rightInset = CGFloat(20)
override func drawText(in rect: CGRect) {
let insets: UIEdgeInsets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset)
super.drawText(in: UIEdgeInsetsInsetRect(rect, insets))
}
override public var intrinsicContentSize: CGSize {
var intrinsicSuperViewContentSize = super.intrinsicContentSize
intrinsicSuperViewContentSize.height += topInset + bottomInset
intrinsicSuperViewContentSize.width += leftInset + rightInset
return intrinsicSuperViewContentSize
}
}

Answer 2

Probably the best idea is to subclass UILabel and override drawTextInRect: like this:
class InsetLabel: UILabel {
override func drawTextInRect(rect: CGRect) {
super.drawTextInRect(UIEdgeInsetsInsetRect(rect, UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)))
}
}
SWIFT 4+:
class InsetLabel: UILabel {
override func drawText(in rect: CGRect) {
super.drawText(in: rect.inset(by: UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)))
}
}

Answer 3

need add this:
class InsetLabel: UILabel {
let topInset = CGFloat(12.0), bottomInset = CGFloat(12.0), leftInset = CGFloat(12.0), rightInset = CGFloat(12.0)
override func drawTextInRect(rect: CGRect) {
let insets: UIEdgeInsets = UIEdgeInsets(top: topInset, left: leftInset, bottom: bottomInset, right: rightInset)
super.drawTextInRect(UIEdgeInsetsInsetRect(rect, insets))
}
override func intrinsicContentSize() -> CGSize {
var intrinsicSuperViewContentSize = super.intrinsicContentSize()
intrinsicSuperViewContentSize.height += topInset + bottomInset
intrinsicSuperViewContentSize.width += leftInset + rightInset
return intrinsicSuperViewContentSize
}
}

Answer 4

There is a solution simply using the storyboard. In the storyboard, create a UIView object whose purpose will be to surround your label in order to give it padding. Then, also from the storyboard, put your UILabel inside of that view. Now select the UILabel object and bring up the Add New Constraints popup by clicking the "Pin" icon. If you want a padding of 5 all the way around the UILabel, click each of the 4 red I-beams in the Add New Constraints popup, and THEN type 5 in each of the 4 boxes adjacent to the I-beams. If you type 5 first and then click an I-Beam, XCode reverts to whatever value was in the box before you typed 5. Finally click the Add Constraints button.
In the Add Constraints popup, XCode ignores top, left, right, or bottom constraint values for which you have not clicked the corresponding red I-beam. This probably answers the second part of your question.
Remember also to setup the constraints of the UIView you added. If you don't define where it goes in the storyboard (e.g., pinned to the top and left of the main view of the view controller), it will not be assigned a default location, and it may not show up at all when you run your app.

Answer 5

I have tried with it on Swift 4.2, hopefully, it works for you!
#IBDesignable class PaddingLabel: UILabel {
#IBInspectable var topInset: CGFloat = 5.0
#IBInspectable var bottomInset: CGFloat = 5.0
#IBInspectable var leftInset: CGFloat = 7.0
#IBInspectable var rightInset: CGFloat = 7.0
override func drawText(in rect: CGRect) {
let insets = UIEdgeInsets.init(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)
}
}
Or
you can use CocoaPods here https://github.com/levantAJ/PaddingLabel
pod 'PaddingLabel', '1.1'

Answer 6

Another way would be to override textRect:forBounds:limitedToNumberOfLines:
Returns the drawing rectangle for the label’s text. Override this
method in subclasses that require changes in the label’s bounding
rectangle to occur before the system performs other text layout
calculations. Use the value in the numberOfLines parameter to limit
the height of the returned rectangle to the specified number of lines
of text. This method may be called by the system if there was a prior
call to the sizeToFit() or sizeThatFits(_:) method. Note that labels
in UITableViewCell objects are sized based on cell dimensions, and not
on a requested size.
public class JPSLabel : UILabel
{
open var textInsets: UIEdgeInsets = UIEdgeInsets.zero
override public func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect
{
var insetBounds = super.textRect(forBounds: bounds, limitedToNumberOfLines: numberOfLines)
insetBounds.size.width += self.textInsets.left + self.textInsets.right
insetBounds.size.height += self.textInsets.top + self.textInsets.bottom
return insetBounds
}
}

Answer 7

I have tested below codes to my app, Swift 5.0 +
class CustomLabel: UILabel {
var textInsets = UIEdgeInsets.zero {
didSet { invalidateIntrinsicContentSize() }
}
override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
let textRect = super.textRect(forBounds: bounds, limitedToNumberOfLines: numberOfLines)
let invertedInsets = UIEdgeInsets(top: -textInsets.top,
left: -textInsets.left,
bottom: -textInsets.bottom,
right: -textInsets.right)
return textRect.inset(by: invertedInsets)
}
override func drawText(in rect: CGRect) {
super.drawText(in: rect.inset(by: textInsets))
}
}