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...

do you need only a text i.e. "You have a 100 character limit" to be display in `inputAccessoryView` — Maddy, May 16 '17 at 19:32
@Maddy 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... — mfaani, May 16 '17 at 19:35
A frame is not needed with AutoLayout. You also missed to activate your constraints. See me updated answer. — Mihai Fratu, May 17 '17 at 08:22
@Honey check my answer as per your requirements. Two labels added one on left side and other on right side using autolayout. — Maddy, May 17 '17 at 09:28

Mihai Fratu · Accepted Answer · 2017-05-17T08:15:17.927

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

edited May 17 '17 at 08:15

answered May 16 '17 at 18:25

Mihai Fratu

7,579
2
37
63

the result is the same...no improvement. Anything else you can think of? I'll update my question to reflect your answer though... – mfaani May 16 '17 at 18:30
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? – mfaani May 16 '17 at 18:33
Why do I need to set the `isActive` to true? I've almost never had to set it before anywhere... – mfaani May 17 '17 at 13:28
2

@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. – Maddy May 17 '17 at 16:03
@Maddy I know what my mistake was. See [here](https://stackoverflow.com/questions/44074872/programatic-constraints-not-obeyed/44078258#44078258) – mfaani May 19 '17 at 20:07

Maddy · Answer 2 · 2017-05-17T09:59:43.377

0

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

edited May 17 '17 at 09:59

answered May 16 '17 at 19:25

Maddy

1,660
11
24

While this is not wrong this is not using AutoLayout as OP wanted. See my updated answer. – Mihai Fratu May 17 '17 at 08:21
@MihaiFratu this is the complete answer that OP want – Maddy May 17 '17 at 09:39
True :) But that's not what I've commented on ;) http://stackoverflow.com/revisions/44009957/1 – Mihai Fratu May 17 '17 at 10:18
Yeah u r rite i have updated that after checking OP [comment](http://stackoverflow.com/questions/44008908/label-showing-top-of-screen-instead-of-being-on-the-inputaccessoryview/44009957?noredirect=1#comment75048376_44008908) :) – Maddy May 17 '17 at 10:28
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 – mfaani May 17 '17 at 13:26
agreed @Honey the accepted answer was not detailed but to the point :) – Maddy May 17 '17 at 16:12

label showing top of screen instead of being on the inputAccessoryView

2 Answers2

Linked