Resizing text field in inputAccessoryView

Question

I have been trying to get a UITextView to resize all week. I don't see how this should be done, so I have decided to include practically all relevant code.

I have this conversation view:

This conversationview is a UIViewController with a UITableView inside (using constraints). I have a custom UIView subclass ConversationToolbar set as inputAccessoryView (the UIViewController containing it can become the first responder, so the view is visible at all times), that contains 2 subviews. One for the UITextView and left and right buttons, and one for the emoticons. The emoticons only show when the left button is tapped:

And when one is chosen, it shows in a floating label:

I now have trouble to resize this UITextView when multiple lines are used. I have tried calculating all frames myself, but then that seems to conflict with my constraints in some weird way. Almost always is the UITextView either too small or it resizes only after I press another key to update the view. Or the UITextView gets bigger over the keyboard, or it slides out of view when the keyboard is dismissed.

I have removed all resizing abilities from my code and I would like to know what I need to do to make this resize.

In my ConversationViewController:

var toolbar: ConversationToolbar!

override var inputAccessoryView: UIView! {
    get {
        if toolbar == nil {
            toolbar = NSBundle.mainBundle().loadNibNamed("ConversationToolbar", owner: nil, options: nil).last! as ConversationToolbar
            toolbar.frame.size = CGSize(width: UIScreen.mainScreen().bounds.size.width, height: 80)
            toolbar.delegate = self
            toolbar.setDraft(conversation.draft)
        }
        return toolbar
    }
}

With ConversationToolbar.xib being:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="14D87p" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB" customClass="ConversationToolbar" customModule="Heaven_Help" customModuleProvider="target">
            <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="s5O-PN-dtz">
                    <rect key="frame" x="0.0" y="554" width="600" height="46"/>
                    <subviews>
                        <button opaque="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="749" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="pbw-hg-sNn">
                            <rect key="frame" x="0.0" y="0.0" width="36" height="46"/>
                            <inset key="contentEdgeInsets" minX="8" minY="0.0" maxX="8" maxY="0.0"/>
                            <state key="normal" title="😶">
                                <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
                            </state>
                            <connections>
                                <action selector="emoPress:" destination="iN0-l3-epB" eventType="touchUpInside" id="hLw-rH-Hym"/>
                            </connections>
                        </button>
                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Vid-Ac-jz3">
                            <rect key="frame" x="548" y="0.0" width="52" height="46"/>
                            <inset key="contentEdgeInsets" minX="8" minY="0.0" maxX="8" maxY="0.0"/>
                            <state key="normal" title="Send">
                                <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
                            </state>
                            <connections>
                                <action selector="sendPress:" destination="iN0-l3-epB" eventType="touchUpInside" id="rzU-Vk-nJa"/>
                            </connections>
                        </button>
                        <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Czv-f6-jOP">
                            <rect key="frame" x="36" y="8" width="512" height="30"/>
                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
                            <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                        </textView>
                    </subviews>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                    <constraints>
                        <constraint firstAttribute="height" constant="46" id="D1D-QM-5n2"/>
                        <constraint firstAttribute="trailing" secondItem="Vid-Ac-jz3" secondAttribute="trailing" id="H9Y-xT-aqe"/>
                        <constraint firstAttribute="centerY" secondItem="pbw-hg-sNn" secondAttribute="centerY" id="IYf-5R-S97"/>
                        <constraint firstItem="Czv-f6-jOP" firstAttribute="leading" secondItem="pbw-hg-sNn" secondAttribute="trailing" id="LpH-ir-M9U"/>
                        <constraint firstAttribute="centerY" secondItem="Vid-Ac-jz3" secondAttribute="centerY" id="NQ1-m1-9rk"/>
                        <constraint firstAttribute="bottom" secondItem="Vid-Ac-jz3" secondAttribute="bottom" id="UUt-1r-emN"/>
                        <constraint firstItem="Czv-f6-jOP" firstAttribute="top" secondItem="s5O-PN-dtz" secondAttribute="top" constant="8" id="VWB-7N-LrK"/>
                        <constraint firstAttribute="bottom" secondItem="Czv-f6-jOP" secondAttribute="bottom" constant="8" id="WTi-8a-kaM"/>
                        <constraint firstItem="pbw-hg-sNn" firstAttribute="leading" secondItem="s5O-PN-dtz" secondAttribute="leading" id="a4Q-W4-ROh"/>
                        <constraint firstAttribute="bottom" secondItem="pbw-hg-sNn" secondAttribute="bottom" id="hGG-Xe-FZZ"/>
                        <constraint firstItem="Vid-Ac-jz3" firstAttribute="leading" secondItem="Czv-f6-jOP" secondAttribute="trailing" id="jc6-18-MYq"/>
                    </constraints>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rh6-cD-U1e">
                    <rect key="frame" x="0.0" y="508" width="600" height="46"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6zz-GF-eHs">
                    <rect key="frame" x="279" y="525" width="42" height="21"/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                    <nil key="highlightedColor"/>
                </label>
            </subviews>
            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
            <constraints>
                <constraint firstAttribute="centerX" secondItem="6zz-GF-eHs" secondAttribute="centerX" id="3at-fx-ZCR"/>
                <constraint firstAttribute="bottom" secondItem="s5O-PN-dtz" secondAttribute="bottom" id="3r5-GG-6Eo"/>
                <constraint firstItem="s5O-PN-dtz" firstAttribute="height" secondItem="rh6-cD-U1e" secondAttribute="height" id="MBP-k2-Qre"/>
                <constraint firstItem="s5O-PN-dtz" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="PLK-DE-38r"/>
                <constraint firstItem="s5O-PN-dtz" firstAttribute="top" secondItem="6zz-GF-eHs" secondAttribute="bottom" constant="8" symbolic="YES" id="PRr-qQ-oyf"/>
                <constraint firstAttribute="trailing" secondItem="s5O-PN-dtz" secondAttribute="trailing" id="PqA-VB-NxV"/>
                <constraint firstItem="s5O-PN-dtz" firstAttribute="top" secondItem="rh6-cD-U1e" secondAttribute="bottom" id="ZxJ-8p-Mjq"/>
                <constraint firstItem="rh6-cD-U1e" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="lsS-5I-Saq"/>
                <constraint firstAttribute="trailing" secondItem="rh6-cD-U1e" secondAttribute="trailing" id="yRP-hS-dpr"/>
            </constraints>
            <connections>
                <outlet property="emoButton" destination="pbw-hg-sNn" id="VJx-J0-hBJ"/>
                <outlet property="emoLabel" destination="6zz-GF-eHs" id="pUW-yD-pIq"/>
                <outlet property="emoView" destination="rh6-cD-U1e" id="0YV-Wx-clp"/>
                <outlet property="sendButton" destination="Vid-Ac-jz3" id="6FV-Q2-ufA"/>
                <outlet property="textSuperView" destination="s5O-PN-dtz" id="BIT-bH-p4M"/>
                <outlet property="textView" destination="Czv-f6-jOP" id="syf-v4-LLy"/>
            </connections>
        </view>
    </objects>
</document>

And finally my ConversationToolbar.swift:

import Foundation

class ConversationToolbar: UIView, UITextViewDelegate {

    @IBOutlet weak var textView: UITextView!
    @IBOutlet weak var emoView: UIView!
    @IBOutlet weak var sendButton: UIButton!
    @IBOutlet weak var textSuperView: UIView!
    @IBOutlet weak var emoButton: UIButton!
    @IBOutlet weak var emoLabel: UILabel!

    var delegate: ConversationToolbarDelegate!
    var emobuttons: [String: UIButton]!
    var emoSelected: String?
    var clickableSend: Bool {
        get {
            return ((delegate?.hasEnoughCredits() ?? false) && !(textView?.text?.isEmpty ?? true)) ?? false
        }
    }

    override func awakeFromNib() {
        textView.delegate = self
        sendButton.enabled = clickableSend
        self.autoresizingMask = .FlexibleHeight

        // Make textView pretty
        textView.backgroundColor = UIColor.whiteColor() // (white: 250/255, alpha: 1)
        textView.font = UIFont.systemFontOfSize(17)
        textView.layer.borderColor = UIColor(red: 200/255, green: 200/255, blue: 205/255, alpha:1).CGColor
        textView.layer.borderWidth = 0.5
        textView.layer.cornerRadius = 5
        textView.scrollsToTop = false
        textView.textContainerInset = UIEdgeInsetsMake(4, 3, 3, 3)
        textView.autoresizingMask = .FlexibleHeight

        // Add a nice border to the view
        textSuperView.layer.borderColor = UIColor(red: 200/255, green: 200/255, blue: 205/255, alpha:1).CGColor
        textSuperView.layer.borderWidth = 0.5
        textSuperView.backgroundColor = UIColor(white: 235/255, alpha: 1)
        textSuperView.autoresizingMask = .FlexibleHeight

        // Prettify emoView
        emoView.layer.borderColor = UIColor(red: 200/255, green: 200/255, blue: 205/255, alpha:1).CGColor
        emoView.layer.borderWidth = 0.5
        emoView.backgroundColor = UIColor(white: 235/255, alpha: 1)

        // Emobar setup
        emobuttons = StaticData.getEmoButtons()

        let unusedSpace = UIScreen.mainScreen().bounds.width - emobuttons.sum {
            button in
            return button.intrinsicContentSize().width
        }
        let spaceBetweenButtons = Int(unusedSpace) / (emobuttons.count + 1)

        var visualLayout = "H:|"
        for button in emobuttons {
            button.1.setTranslatesAutoresizingMaskIntoConstraints(false)
            visualLayout += "-(space)-[\(button.0)]"
            emoView.addSubview(button.1)
            button.1.addTarget(self, action: "emoChosen:", forControlEvents: .TouchUpInside)
        }

        emoView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("\(visualLayout)-(space)-|", options: .AlignAllCenterY, metrics: ["space":spaceBetweenButtons], views: emobuttons))
        emoView.addConstraint(NSLayoutConstraint(item: emoView, attribute: .CenterY, relatedBy: .Equal, toItem: emobuttons.values.array.first!, attribute: .CenterY, multiplier: 1, constant: 0))

        // Prettify toolbar itself
        self.backgroundColor = UIColor.clearColor()

        // start hidden
        emoView.hidden = true
        emoLabel.hidden = emoSelected == nil
    }

    @IBAction func emoPress(sender: UIButton) {
        emoView.hidden = !emoView.hidden
        updateEmoLabel()
        if !emoView.hidden {
            emoLabel.hidden = true
        }
    }

    @IBAction func sendPress(sender: UIButton) {
        delegate.sendMessage(textView.text, feeling: emoSelected)
        textView.text = ""
        emoSelected = nil
        sendButton.enabled = false
        textViewDidChange(textView)
        updateEmoLabel()
    }

    func emoChosen(sender: UIButton) {
        emoView.hidden = true
        emoSelected = sender.titleLabel?.text == "🚫" ? nil : sender.titleLabel?.text
        updateEmoLabel()
    }

    func setDraft(draft: String) {
        textView.text = draft
    }

    func updateEmoLabel() {
        emoLabel.text = emoSelected
        emoLabel.hidden = emoSelected == nil
    }

    /// MARK: UITextFieldDelegate

    func textViewDidChange(textView: UITextView) {
        sendButton.enabled = clickableSend
    }
}

protocol ConversationToolbarDelegate {
    func sendMessage(text: String, feeling: String?)
    func hasEnoughCredits() -> Bool
}

Answer 1

I have solved this problem with AutoLayout. I have added a new constraint defining the height of my UITextField and I am setting the constant of that constraint in textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool:

func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool {
    let oldHeight = textView.frame.height
    let newText = (textView.text as NSString).stringByReplacingCharactersInRange(range, withString: text)
    let newSize = (newText as NSString).boundingRectWithSize(CGSize(width: textView.frame.width - textView.textContainerInset.right - textView.textContainerInset.left - 10, height: CGFloat.max), options: .UsesLineFragmentOrigin, attributes: [NSFontAttributeName: textView.font], context: nil)
    let heightChange = newSize.height + textView.textContainerInset.top + textView.textContainerInset.bottom + 2.719 - oldHeight

    textFieldHeightLayoutConstraint.constant += heightChange
    return true
}

The problem I had was that I was setting AutoLayout and UIView.frame to different settings, which lead to them fighting.

I am an idiot.

Answer 2

I solved this issue with resizing inputAccessoryView long time ago, but did not fix the issues with proper UITextView resize for iOS8 until today. Here is my sample app - github

It uses frames for iOS7 resizing (UITextEffectsWindow does layout manually and creating constraints in inputAccessoryView's heirarchy means creating autolayout engine, which causes autolayout engine failure after strange transformations with inf/nan frames) and constraints for iOS8 resizing. Anyway, layout of views inside inputAccessoryView is never done correctly, so we have to perform frame calculations.