The recent years, Apple introduced several new screen sizes for its mobile devices, and this trend will probably go on for some time. With the multiplication of screen sizes and resolutions, the safest and easiest way to support as many devices as possible is to adopt Auto Layout, follow along with UIKit enhancements and try to implement adaptive user interfaces.
This article shows how to use Auto Layout to create text input box that automatically grows and shrinks depending on the content size. When it reaches the screen bounds, the font size adjusts so the text fits in the visible area before overflowing into the hidden area when the font becomes too small.
Here’s what we’re going to build:
Place the text input with Auto Layout
The Xcode project is available for download here.
Most of the work is done in Interface Builder.
The Auto Layout constraints are created by Ctrl + dragging from the UITextInput to its parent view either in the view controller on the storyboard or in the view hierarchy visible in the document outline on the left.
Two types of constraints were applied to the text field:
- sizing constraints: the text field starts with a minimum width of 48 points and a minimum height of 36 points. By setting the minimum values on both dimensions, the text field becomes resizable.
- positioning constraints: the text field is pinned to the left margin of the screen. Another horizontal constraint is defined between the right border of the text field and the right margin of the screen; because the text field width is resizable, we set this constraint to a minimum of zero to prevent the text field to overflow outside the visible area of the screen.
Adaptive size depending on the font
The Auto Layout constraints set previously are enough for the text field to automatically grow in size when the content requires it.
If we start typing, when the text doesn’t fit in the minimum width, the field grows automatically on the horizontal axis. When the field reaches the right margin of the screen, the font size adjusts automatically to preserve the visibility of the content as long as possible. This adjustment is automatically performed by the system thanks to the UITextInput Adjust to fit and Min font size settings in the Attributes inspector:
The same behavior could be achieved by setting in code he adjustsFontSizeToFitWidth and minimumFontSize properties on the UITextInput.
The font size can be manually changed using the slider at the bottom of the screen. As the font size is modified, the content size changes on both vertical and horizontal axis, and the text field automatically adjusts to the content size.
The code that updates the font size according to the slider position is pretty simple:
// Memorize the cursor position
UITextRange *selectedTextRange = self.textInput.selectedTextRange;
// Apply the font change to the existing text
[self.textInput setSelectedTextRange:[self.textInput textRangeFromPosition:self.textInput.beginningOfDocument toPosition:self.textInput.endOfDocument]];
NSUInteger newFontSize = (NSUInteger)self.fontSizeSlider.value;
NSString *currentFontFamily = self.textInput.font.familyName;
self.textInput.font = [UIFont fontWithName:currentFontFamily size:newFontSize];
// Replace the cursor to its original position
// Trigger layout pass to prevent content jumping
Even if the example used in this blog post is mainly academic, it demonstrates how easy is to achieve UITextInput dynamic resizing by configuring a few Auto Layout constraints and setting some properties on the text field instance. Almost all this configuration was done directly in the storyboard, minimizing the code written.