label showing top of screen instead of being on the inputAccessoryView

Question

Here is my code:

 var messageView : UITextView = {
        var textView = UITextView()
        textView.text = "   Add your message here"
        textView.textColor = UIColor.lightGrayColor()
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.backgroundColor = UIColor.lightGrayColor()
        textView.layer.cornerRadius = 3
        textView.clipsToBounds = true
        textView.keyboardAppearance = .Dark
        textView.layer.borderWidth = 1.0
        textView.layer.borderColor = UIColor.lightGrayColor()
        textView.autocorrectionType = .no


        // MARK: Setup accesorryView

        let label = UILabel()
        label.text = "You have a 100 character limit"
        label.translatesAutoresizingMaskIntoConstraints = false

        let accessoryView = UIView(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, 44))
        accessoryView.backgroundColor = UIColor.redColor()

        accessoryView.addSubview(label)

        accessoryView.leadingAnchor.constraintEqualToAnchor(label.leadingAnchor, constant: 18)
        accessoryView.centerYAnchor.constraintEqualToAnchor(label.centerYAnchor)

        textView.inputAccessoryView = accessoryView

        return textView
    }()

I'm trying to add an inputAccessoryView to my TextView's keyboard. My inputAccessoryView must have a label saying "You have a 100 character limit"...

But my current result is as:

The text in the blue...is exactly the label I want to be in the inputAccessoryView, but it's on the top of my screen...

Organization

do you need only a text i.e. "You have a 100 character limit" to be display in inputAccessoryView – Photocopier

@Photocopier I also need to add another label to the right side of the inputAccessoryView to act as a counter ie show the number of characters left to type... – Organization

You are clearly missing frame for the label – Selfknowledge

A frame is not needed with AutoLayout. You also missed to activate your constraints. See me updated answer. – Auscultate

@Honey check my answer as per your requirements. Two labels added one on left side and other on right side using autolayout. – Photocopier

Answer 1

You need to set translatesAutoresizingMaskIntoConstraints on the label to false and isActive to true on the constraints. Basically your constrains code should look like this:

accessoryView.leadingAnchor.constraintEqualToAnchor(label.leadingAnchor, constant: 18).isActive = true
accessoryView.centerYAnchor.constraintEqualToAnchor(label.centerYAnchor).isActive = true

Auscultate

the result is the same...no improvement. Anything else you can think of? I'll update my question to reflect your answer though... – Organization

I made an edit... do I need to do that for the accessoryView itself as well or that's not necessary? (I did try that as well, but just want to know if it's necessary for that as well? – Organization

Why do I need to set the isActive to true? I've almost never had to set it before anywhere... – Organization

@Honey isActive is used to activate or deactivate a constraint. If you don't want to use this, you can also acheive the same result through. NSLayoutConstraint.activate([accessoryView.leadingAnchor.constraint(equalTo: label.leadingAnchor, constant: 0),accessoryView.centerYAnchor.constraint(equalTo: label.centerYAnchor)]). It activates each constraint in the specified array no need to do it everytime. – Photocopier

@Photocopier I know what my mistake was. See here – Organization

Answer 2

As per my understanding, try this:

Swift 3

let accessoryView = UIView()
let label         = UILabel()
let counterLabel  = UILabel()//This is the counter label

label.text        = "You have a 100 character limit"
counterLabel.text = "100"

accessoryView.frame = CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 44)

accessoryView.backgroundColor = UIColor.red

accessoryView.addSubview(label)
accessoryView.addSubview(counterLabel)

// to setup contraint set below property to false.
label.translatesAutoresizingMaskIntoConstraints = false
counterLabel.translatesAutoresizingMaskIntoConstraints = false

//label constrint with 0 padding from left side. To change padding from left and right side, change the constant value.
accessoryView.leadingAnchor.constraint(equalTo: label.leadingAnchor, constant: 0).isActive = true

accessoryView.centerYAnchor.constraint(equalTo: label.centerYAnchor).isActive = true

//counterl=Label constrint with 0 padding from right side
        accessoryView.trailingAnchor.constraint(equalTo:counterLabel.trailingAnchor, constant: 0).isActive = true

accessoryView.centerYAnchor.constraint(equalTo: counterLabel.centerYAnchor).isActive = true

textView.inputAccessoryView = accessoryView

Photocopier

While this is not wrong this is not using AutoLayout as OP wanted. See my updated answer. – Auscultate

@MihaiFratu this is the complete answer that OP want – Photocopier

True :) But that's not what I've commented on ;) stackoverflow.com/revisions/44009957/1 – Auscultate

Yeah u r rite i have updated that after checking OP comment :) – Photocopier

Your answer is more complete, but only that the accepted answer provided 2 important hints (setting isActive and translatesAutoresizingMaskIntoConstraints before yours :/ I only upvoted...Thank you – Organization

agreed @Honey the accepted answer was not detailed but to the point :) – Photocopier