weird positioning of the cursor in the UITextView

Question

I am writing from scratch growing UITextView in my swift app. I put a textView on the view like this:

it is right above the keyboard.

The textView has constraints attached to the view: leading, bottom, top and trailing, all equals = 4.

The view has the following constraints:

trailing, leading, bottom, top and height

Height is an outlet in my code. I'm checking how many lines are in the textView and based on that I'm modifying height:

func textViewDidChange(textView: UITextView) { //Handle the text changes here
    switch(textView.numberOfLines()) {
    case 1:
        heightConstraint.constant = 38
        break
    case 2:
        heightConstraint.constant = 50
        break
    case 3:
        heightConstraint.constant = 70
        break
    case 4:
        heightConstraint.constant = 90
        break
    default:
        heightConstraint.constant = 90
        break
    }
}

The number of lines above is calculated by this extension:

extension UITextView{

  func numberOfLines() -> Int{
      if let fontUnwrapped = self.font{
          return Int(self.contentSize.height / fontUnwrapped.lineHeight)
      }
      return 0
  }
}

The initial height of the textView is 38. The initial font size in the textView is 15.

Now, it works nice, when user starts typing new line, but the textView is not set within full bounds of the view. I mean by that the fact, that it looks like this:

and it should look like this:

Why there is this extra white space being added and how can I get rid of it?

Currently when new line appears there's this white space, but when user scrolls the textView to center the text and get rid of the white space - it is gone forever, user is not able to scroll it up again so the white line is there. So for me it looks like some problem with refreshing content, but maybe you know better - can you give me some hints?

Answer 1

Here is a bit different approach I use in the comment section of one of the apps I'm developing. This works very similar to Facebook Messenger iOS app's input field. Changed outlet names to match with the ones in your question.

//Height constraint outlet of view which contains textView.
@IBOutlet weak var heightConstraint: NSLayoutConstraint!
@IBOutlet weak var textView: UITextView!

//Maximum number of lines to grow textView before enabling scrolling.
let maxTextViewLines = 5
//Minimum height for textViewContainer (when there is no text etc.)
let minTextViewContainerHeight = 40

func textViewDidChange(textView: UITextView) {
    let textViewVerticalInset = textView.textContainerInset.bottom + textView.textContainerInset.top
    let maxHeight = ((textView.font?.lineHeight)! * maxTextViewLines) + textViewVerticalInset
    let sizeThatFits = textView.sizeThatFits(CGSizeMake(textView.frame.size.width, CGFloat.max))

    if sizeThatFits.height < minTextViewContainerHeight {
        heightConstraint.constant = minTextViewContainerHeight
        textView.scrollEnabled = false
    } else if sizeThatFits.height < maxHeight {
        heightConstraint.constant = sizeThatFits.height
        textView.scrollEnabled = false
    } else {
        heightConstraint.constant = maxHeight
        textView.scrollEnabled = true
    }
}

func textViewDidEndEditing(textView: UITextView) {
    textView.text = ""
    heightConstraint.constant = minTextViewContainerHeight
    textView.scrollEnabled = false
}

Answer 2

I'm using ASTextInputAccessoryView. It handles everything for you and is very easy to set up:

import ASTextInputAccessoryView

class ViewController: UIViewController {

    var iaView: ASResizeableInputAccessoryView!    
    var messageView = ASTextComponentView()

    override func viewDidLoad() {
        super.viewDidLoad()

        let photoComponent = UINib
            .init(nibName: "PhotosComponentView", bundle: nil)
            .instantiateWithOwner(self, options: nil)
            .first as! PhotosComponentView

        messageView = ASTextComponentView(frame: CGRect(x: 0, y: 0, width: screenSize.width , height: 44))
        messageView.backgroundColor = UIColor.uIColorFromHex(0x191919)
        messageView.defaultSendButton.addTarget(self, action: #selector(buttonAction), forControlEvents: .TouchUpInside)

        iaView = ASResizeableInputAccessoryView(components: [messageView, photoComponent])
        iaView.delegate = self        
    }
}

//MARK: Input Accessory View
extension ViewController {
    override var inputAccessoryView: UIView? {
        return iaView
    }

    // IMPORTANT Allows input view to stay visible
    override func canBecomeFirstResponder() -> Bool {
        return true
    }

    // Handle Rotation
    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)

        coordinator.animateAlongsideTransition({ (context) in
            self.messageView.textView.layoutIfNeeded()
        }) { (context) in
            self.iaView.reloadHeight()
        }
    }
}

// MARK: ASResizeableInputAccessoryViewDelegate
extension ViewController: ASResizeableInputAccessoryViewDelegate {

    func updateInsets(bottom: CGFloat) {
        var contentInset = tableView.contentInset
        contentInset.bottom = bottom
        tableView.contentInset = contentInset
        tableView.scrollIndicatorInsets = contentInset
    }

    func inputAccessoryViewWillAnimateToHeight(view: ASResizeableInputAccessoryView, height: CGFloat, keyboardHeight: CGFloat) -> (() -> Void)? {

        return { [weak self] in
            self?.updateInsets(keyboardHeight)
            self?.tableView.scrollToBottomContent(false)
        }
    }

    func inputAccessoryViewKeyboardWillPresent(view: ASResizeableInputAccessoryView, height: CGFloat) -> (() -> Void)? {
        return { [weak self] in
            self?.updateInsets(height)
            self?.tableView.scrollToBottomContent(false)
        }
    }

    func inputAccessoryViewKeyboardWillDismiss(view: ASResizeableInputAccessoryView, notification: NSNotification) -> (() -> Void)? {
        return { [weak self] in
            self?.updateInsets(view.frame.size.height)
        }
    }

    func inputAccessoryViewKeyboardDidChangeHeight(view: ASResizeableInputAccessoryView, height: CGFloat) {
        let shouldScroll = tableView.isScrolledToBottom
        updateInsets(height)
        if shouldScroll {
            self.tableView.scrollToBottomContent(false)
        }
    }
}

Now you just need to set up the actions for the buttons of the AccessoryView.

// MARK: Actions
extension ViewController {

    func buttonAction(sender: UIButton!) {

        // do whatever you like with the "send" button. for example post stuff to firebase or whatever
        // messageView.textView.text <- this is the String inside the textField

        messageView.textView.text = ""
    }

    @IBAction func dismissKeyboard(sender: AnyObject) {
        self.messageView.textView.resignFirstResponder()
    }

    func addCameraButton() {

        let cameraButton = UIButton(type: .Custom)
        let image = UIImage(named: "camera")?.imageWithRenderingMode(.AlwaysTemplate)
        cameraButton.setImage(image, forState: .Normal)
        cameraButton.tintColor = UIColor.grayColor()

        messageView.leftButton = cameraButton

        let width = NSLayoutConstraint(
            item: cameraButton,
            attribute: .Width,
            relatedBy: .Equal,
            toItem: nil,
            attribute: .NotAnAttribute,
            multiplier: 1,
            constant: 40
        )
        cameraButton.superview?.addConstraint(width)

        cameraButton.addTarget(self, action: #selector(self.showPictures), forControlEvents: .TouchUpInside)
    }

    func showPictures() {

        PHPhotoLibrary.requestAuthorization { (status) in
            NSOperationQueue.mainQueue().addOperationWithBlock({
                if let photoComponent = self.iaView.components[1] as? PhotosComponentView {
                    self.iaView.selectedComponent = photoComponent
                    photoComponent.getPhotoLibrary()
                }
            })
        }
    }
}