UITextView that expands to text using auto layout

Question

I have a view that is laid out completely using auto layout programmatically  I have a UITextView in the middle of the view with items above and below it  Everything works fine  but I want to be able to expand UITextView as text is added  This should push everything below it down as it expands   I know how to do this the  springs and struts  way  but is there an auto layout way of doing this  The only way I can think of is by removing and re-adding the constraint every time it needs to grow

User · Answer

I see multiple answers suggest simply turning off scrollEnabled. This is the best solution. I’m writing this answer to explain why it works.

UITextView implements the intrinsicContentSize property if scrollEnabled == NO. The disassembly of the getter method looks like this:

- (CGSize)intrinsicContentSize {
  if (self.scrollEnabled) {
    return CGSizeMake(UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric);
  } else {
    // Calculate and return intrinsic content size based on current width.
  }
}

That means you just need to make sure the width of the text view is constrained enough and then you can use the intrinsic content height (either via Auto Layout content hugging/compression resistance priorities or directly using the value during manual layout).

Unfortunately, this behavior is not documented. Apple could have easily saved us all some headaches… no need for an extra height constraint, subclassing, etc.

User · Answer

The view containing UITextView will be assigned its size with setBounds by AutoLayout  So  this is what I did  The superview is initially set up all the other constraints as they should be  and in the end I put one special constraint for UITextView s height  and I saved it in an instance variable    descriptionHeightConstraint    NSLayoutConstraint constraintWithItem  descriptionTextView                                  attribute NSLayoutAttributeHeight                                   relatedBy NSLayoutRelationEqual                                      toItem nil                                   attribute NSLayoutAttributeNotAnAttribute                                  multiplier 0 f                                   constant 100     self addConstraint  descriptionHeightConstraint     In the setBounds method  I then changed the value of the constant   - void  setBounds  CGRect bounds        super setBounds bounds         descriptionTextView frame   bounds      CGSize descriptionSize    descriptionTextView contentSize         descriptionHeightConstraint setConstant descriptionSize height         self layoutIfNeeded

User · Answer

Summary  Disable scrolling of your text view  and don t constraint its height   To do this programmatically  put the following code in viewDidLoad   let textView   UITextView frame   zero  textContainer  nil  textView backgroundColor    yellow    visual debugging textView isScrollEnabled   false      causes expanding height view addSubview textView      Auto Layout textView translatesAutoresizingMaskIntoConstraints   false let safeArea   view safeAreaLayoutGuide NSLayoutConstraint activate       textView topAnchor constraint equalTo  safeArea topAnchor       textView leadingAnchor constraint equalTo  safeArea leadingAnchor       textView trailingAnchor constraint equalTo  safeArea trailingAnchor       To do this in Interface Builder  select the text view  uncheck Scrolling Enabled in the Attributes Inspector  and add the constraints manually   Note  If you have other view s above below your text view  consider using a UIStackView to arrange them all

User · Answer

Here s a quick solution   This problem may occur if you have set clipsToBounds property to false of your textview  If you simply delete it  the problem goes away   myTextView clipsToBounds   false   delete this line

User · Answer

BTW  I built an expanding UITextView using a subclass and overriding intrinsic content size  I discovered a bug in UITextView that you might want to investigate in your own implementation  Here is the problem   The expanding text view would grow down to accommodate the growing text if you type single letters at a time  But if you paste a bunch of text into it  it would not grow down but the text would scroll up and the text at the top was out of view   The solution  Override setBounds  in your subclass  For some unknown reason  the pasting caused the bounds origin y value to be non-zee  33 in every case that I saw   So I overrode setBounds  to always set the bounds origin y to zero  Fixed the problem

User · Answer

I needed a text view that would automatically grow up until a certain maximum height  then become scrollable  Michael Link s answer worked great but I wanted to see if I could come up with something a bit simpler  Here s what I came up with  Swift 5 3  Xcode 12 class AutoExpandingTextView  UITextView        private var heightConstraint  NSLayoutConstraint       var maxHeight  CGFloat   100           didSet               heightConstraint  constant   maxHeight                      private var observer  NSObjectProtocol       override init frame  CGRect  textContainer  NSTextContainer             super init frame  frame  textContainer  textContainer          commonInit              required init  coder  NSCoder            super init coder  coder          commonInit              private func commonInit             heightConstraint   heightAnchor constraint equalToConstant  maxHeight           observer   NotificationCenter default addObserver forName  UITextView textDidChangeNotification  object  nil  queue   main     weak self    in             guard let self   self else   return               self heightConstraint isActive   self contentSize height  gt  self maxHeight             self isScrollEnabled   self contentSize height  gt  self maxHeight             self invalidateIntrinsicContentSize

User · Answer

You can also do it without subclassing UITextView  Have a look at my answer to How do I size a UITextView to its content on iOS 7   Use the value of this expression    textView sizeThatFits CGSizeMake textView frame size width  CGFLOAT MAX   height   to update the constant of the textView s height UILayoutConstraint

User · Answer

vitaminwater s answer is working for me    If your textview s text is bouncing up and down during edit  after setting  textView setScrollEnabled NO    set Size Inspector  gt  Scroll View  gt  Content Insets  gt  Never   Hope it helps

User · Answer

Here s a solution for people who prefer to do it all by auto layout   In Size Inspector    Set content compression resistance priority vertical to 1000  Lower the priority of constraint height by click  Edit  in Constraints  Just make it less than 1000      In Attributes Inspector    Uncheck  Scrolling Enabled

User · Answer

You can do it through storyboard  just disable  Scrolling Enabled

User · Answer

This more of a very important comment   Key to understanding why vitaminwater s answer works are three things    Know that UITextView is a subclass of UIScrollView class Understand how ScrollView works and how its contentSize is calculated  For more see this  here answer and its various solutions and comments   Understand what contentSize is and how its calculated  See here and here  It might also help that setting contentOffset is likely nothing but       func setContentOffset offset  CGPoint        CGRect bounds   self bounds     bounds origin   offset     self bounds   bounds     For more see objc scrollview and understanding scrollview    Combining the three together you d easily understand that you need allow the the textView s intrinsic contentSize to work along AutoLayout constraints of the textView to drive the logic  It s almost as if you re textView is functioning like a UILabel   To make that happen you need to disable scrolling which basically means the scrollView s size  the contentSize s size and in case of adding a containerView  then the containerView s size would all be the same  When they re the same you have NO scrolling  And you d have 0 contentOffset  Having 0 contentOffSet means you ve not scrolled down  Not even a 1 point down  As a result the textView will be all stretched out    It s also worth nothing that 0 contentOffset  means that the scrollView s bounds and frame are identical   If you scroll down  5 points then your contentOffset would be 5  while your scrollView bounds origin y - scrollView frame origin y would be equal to 5

User · Answer

Place hidden UILabel underneath your textview  Label lines   0  Set constraints of UITextView to be equal to the UILabel  centerX  centerY  width  height   Works even if you leave scroll behaviour of textView

User · Answer

I ve found it s not entirely uncommon in situations where you may still need isScrollEnabled set to true to allow a reasonable UI interaction  A simple case for this is when you want to allow an auto expanding text view but still limit it s maximum height to something reasonable in a UITableView   Here s a subclass of UITextView I ve come up with that allows auto expansion with auto layout but that you could still constrain to a maximum height and which will manage whether the view is scrollable depending on the height  By default the view will expand indefinitely if you have your constraints setup that way   import UIKit  class FlexibleTextView  UITextView          limit the height of expansion per intrinsicContentSize     var maxHeight  CGFloat   0 0     private let placeholderTextView  UITextView             let tv   UITextView            tv translatesAutoresizingMaskIntoConstraints   false         tv backgroundColor    clear         tv isScrollEnabled   false         tv textColor    disabledTextColor         tv isUserInteractionEnabled   false         return tv             var placeholder  String            get               return placeholderTextView text                   set               placeholderTextView text   newValue                      override init frame  CGRect  textContainer  NSTextContainer             super init frame  frame  textContainer  textContainer          isScrollEnabled   false         autoresizingMask     flexibleWidth   flexibleHeight          NotificationCenter default addObserver self  selector   selector UITextInputDelegate textDidChange       name  Notification Name UITextViewTextDidChange  object  self          placeholderTextView font   font         addSubview placeholderTextView           NSLayoutConstraint activate               placeholderTextView leadingAnchor constraint equalTo  leadingAnchor               placeholderTextView trailingAnchor constraint equalTo  trailingAnchor               placeholderTextView topAnchor constraint equalTo  topAnchor               placeholderTextView bottomAnchor constraint equalTo  bottomAnchor                         required init  coder aDecoder  NSCoder            fatalError  init coder   has not been implemented              override var text  String            didSet               invalidateIntrinsicContentSize               placeholderTextView isHidden    text isEmpty                      override var font  UIFont            didSet               placeholderTextView font   font             invalidateIntrinsicContentSize                        override var contentInset  UIEdgeInsets           didSet               placeholderTextView contentInset   contentInset                      override var intrinsicContentSize  CGSize           var size   super intrinsicContentSize          if size height    UIViewNoIntrinsicMetric                  force layout             layoutManager glyphRange for  textContainer              size height   layoutManager usedRect for  textContainer  height   textContainerInset top   textContainerInset bottom                    if maxHeight  gt  0 0  amp  amp  size height  gt  maxHeight               size height   maxHeight              if  isScrollEnabled                   isScrollEnabled   true                         else if isScrollEnabled               isScrollEnabled   false                    return size             objc private func textDidChange   note  Notification               needed incase isScrollEnabled is set to true which stops automatically calling invalidateIntrinsicContentSize           invalidateIntrinsicContentSize           placeholderTextView isHidden    text isEmpty           As a bonus there s support for including placeholder text similar to UILabel

User · Answer

Plug and Play Solution - Xcode 9 Autolayout just like UILabel  with the link detection  text selection  editing and scrolling of UITextView  Automatically handles  Safe area Content insets Line fragment padding Text container insets Constraints Stack views Attributed strings Whatever   A lot of these answers got me 90  there  but none were fool-proof  Drop in this UITextView subclass and you re good    pragma mark - Init  -  instancetype initWithFrame  CGRect frame textContainer  nullable NSTextContainer   textContainer       self    super initWithFrame frame textContainer textContainer       if  self             self commonInit             return self     -  instancetype initWithCoder  NSCoder   aDecoder       self    super initWithCoder aDecoder       if  self             self commonInit             return self     -  void commonInit          Try to use max width  like UILabel      self setContentCompressionResistancePriority UILayoutPriorityRequired forAxis UILayoutConstraintAxisHorizontal               Optional -- Enable   disable scroll  amp  edit ability     self editable   YES      self scrollEnabled   YES              Optional -- match padding of UILabel     self textContainer lineFragmentPadding   0 0      self textContainerInset   UIEdgeInsetsZero              Optional -- for selecting text and links     self selectable   YES      self dataDetectorTypes   UIDataDetectorTypeLink   UIDataDetectorTypePhoneNumber   UIDataDetectorTypeAddress      pragma mark - Layout  -  CGFloat widthPadding       CGFloat extraWidth   self textContainer lineFragmentPadding   2 0      extraWidth     self textContainerInset left   self textContainerInset right      if   available iOS 11 0                extraWidth    self adjustedContentInset left   self adjustedContentInset right        else           extraWidth    self contentInset left   self contentInset right            return extraWidth     -  CGFloat heightPadding       CGFloat extraHeight   self textContainerInset top   self textContainerInset bottom      if   available iOS 11 0                extraHeight    self adjustedContentInset top   self adjustedContentInset bottom        else           extraHeight    self contentInset top   self contentInset bottom            return extraHeight     -  void layoutSubviews        super layoutSubviews               Prevents flashing of frame change     if  CGSizeEqualToSize self bounds size  self intrinsicContentSize     NO             self invalidateIntrinsicContentSize                     Fix offset error from insets  amp  safe area          CGFloat textWidth   self bounds size width -  self widthPadding       CGFloat textHeight   self bounds size height -  self heightPadding       if  self contentSize width  lt   textWidth  amp  amp  self contentSize height  lt   textHeight                     CGPoint offset   CGPointMake -self contentInset left  -self contentInset top           if   available iOS 11 0                    offset   CGPointMake -self adjustedContentInset left  -self adjustedContentInset top                     if  CGPointEqualToPoint self contentOffset  offset     NO                self contentOffset   offset                     -  CGSize intrinsicContentSize       if  self attributedText length    0            return CGSizeMake UIViewNoIntrinsicMetric  UIViewNoIntrinsicMetric                  CGRect rect    self attributedText boundingRectWithSize CGSizeMake self bounds size width -  self widthPadding   CGFLOAT MAX                                                      options NSStringDrawingUsesLineFragmentOrigin                                                     context nil            return CGSizeMake ceil rect size width    self widthPadding                          ceil rect size height    self heightPadding

User · Answer

Obj C    import  lt UIKit UIKit h gt    interface ViewController   UIViewController   property  nonatomic  UITextView  textView   end     import  ViewController h    interface ViewController      end   implementation ViewController   synthesize textView   -  void viewDidLoad       super viewDidLoad        self view setBackgroundColor  UIColor grayColor        self textView     UITextView alloc  initWithFrame CGRectMake 30 10 250 20        self textView delegate   self       self view addSubview self textView      -  void didReceiveMemoryWarning       super didReceiveMemoryWarning      -  void textViewDidChange  UITextView   txtView      float height   txtView contentSize height       UITextView beginAnimations nil context nil        UITextView setAnimationDuration 0 5        CGRect frame   txtView frame      frame size height   height   10 0    Give it some padding     txtView frame   frame       UITextView commitAnimations       end

User · Answer

UITextView doesn t provide an intrinsicContentSize  so you need to subclass it and provide one   To make it grow automatically  invalidate the intrinsicContentSize in layoutSubviews   If you use anything other than the default contentInset  which I do not recommend   you may need to adjust the intrinsicContentSize calculation    interface AutoTextView   UITextView   end      import  AutoTextView h    implementation AutoTextView  -  void  layoutSubviews        super layoutSubviews        if   CGSizeEqualToSize self bounds size   self intrinsicContentSize               self invalidateIntrinsicContentSize            -  CGSize intrinsicContentSize       CGSize intrinsicContentSize   self contentSize          iOS 7 0      if     UIDevice currentDevice  systemVersion  floatValue   gt   7 0f            intrinsicContentSize width     self textContainerInset left   self textContainerInset right     2 0f          intrinsicContentSize height     self textContainerInset top   self textContainerInset bottom    2 0f             return intrinsicContentSize      end

User · Answer

An important thing to note    Since UITextView is a subclass of UIScrollView  it is subject to the automaticallyAdjustsScrollViewInsets property of UIViewController     If you are setting up the layout and the TextView is the the first subview in a UIViewControllers hierarchy  it will have its contentInsets modified if automaticallyAdjustsScrollViewInsets is true sometimes causing unexpected behaviour in auto layout   So if you re having problems with auto layout and text views  try setting automaticallyAdjustsScrollViewInsets   false on the view controller or moving the textView forward in the hierarchy

[ios] UITextView that expands to text using auto layout

Examples related to ios

Examples related to uitextview

Examples related to autolayout

Examples related to nslayoutconstraint