UILabel text truncating with wrong alignment when I add an imageView

Question

I have a subclassed UILabel that I am going to be using for about 10 different labels of varying length (all on 1 line!) in IB. The text within each of these labels are static.

This subclassed UILabel should display an imageView to the left of the text. This imageView will hold a small icon.

It's close to working, except I'm getting odd truncating & alignment as seen from the screenshot below.

Simulator:

Storyboard setup:

Here's my code:

class ImageMarkLabel: UILabel {

    var labelHeight:CGFloat = 0.0
    let smileView = UIView()
    let smileImageView = UIImageView()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.commonInit()

    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        uiStuff()
    }

    func uiStuff() {
        labelHeight = self.frame.height
        smileView.frame = CGRect(x: 0, y: 0, width: labelHeight, height: labelHeight)
        smileImageView.image = UIImage(named: "smile")
        smileImageView.frame = CGRect(x: 0, y: 0, width: smileView.frame.width, height: smileView.frame.height)
    }

    func commonInit(){
        smileView.addSubview(smileImageView)
        self.addSubview(smileView)
    }

    override func drawText(in rect: CGRect) {
        var insets = UIEdgeInsets()
        if UIDevice.current.userInterfaceIdiom == .pad {
            insets = UIEdgeInsets(top: 0, left: labelHeight + 10.0, bottom: 0, right: labelHeight + 10.0)
        }
        else {
            insets = UIEdgeInsets(top: 0, left: labelHeight + 5.0, bottom: 0, right: labelHeight + 5.0)
        }
        super.drawText(in: rect.inset(by: insets))
    }

}

Regarding Auto Layout - all of the labels are within a vertical stack view.

How can I get the text & imageView to be centered without causing any text truncating?

change background color(different) of each label and show us result. — dahiya_boy, Apr 18 '19 at 03:42

score 0 · Answer 1 · answered Apr 18 '19 at 05:16

Change you frame in UIStuff method ,

class ImageMarkLabel: UILabel {

    var labelHeight:CGFloat = 0.0
    let smileView = UIView()
    let smileImageView = UIImageView()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.commonInit()

    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        uiStuff()
    }

    func uiStuff() {
        labelHeight = self.frame.height
        smileView.frame = CGRect(x: 0, y: 0, width: labelHeight, height: labelHeight)
        smileImageView.image = UIImage(named: "smile")
        smileImageView.frame = CGRect(x: 0, y: 0, width: smileView.frame.width, height: smileView.frame.height)

        var insets = UIEdgeInsets()
        if UIDevice.current.userInterfaceIdiom == .pad {
            insets = UIEdgeInsets(top: 0, left: (labelHeight + 10.0), bottom: 0, right: (labelHeight + 10.0))
        }
        else {
            insets = UIEdgeInsets(top: 0, left: (labelHeight + 5.0), bottom: 0, right: (labelHeight + 5.0))
        }
        let newRect = CGRect(origin: self.frame.origin, size: CGSize(width: self.frame.width + 2*insets.left, height: self.frame.height))
        self.frame = newRect
    }

    func commonInit(){
        smileView.addSubview(smileImageView)
        self.addSubview(smileView)

    }

    override func drawText(in rect: CGRect) {
        super.drawText(in: rect)
    }

}

Output:

The image view should only be about 10 points to the left of the beginning of the text, not the beginning of the label. — Joe, Apr 18 '19 at 05:33

UILabel text truncating with wrong alignment when I add an imageView

1 Answers1