UITextField shrinks text before necessary - ios

I have a UITextField for which I've set autoAdjustFontSizeToFitWidth to true and minimumFontSize to 0. The problem is the setting shrinks the text noticeably sooner than it really should. For example, here is an image of a UITextField with the above settings:
The green is the background color of the UITextField. In this example, the text has not shrunk yet, but no matter what I type as the next character the text field always begins shrinking; despite clearly being enough room on the left side for a few more characters. Here is another image with additional characters entered:
As you can see, there is a relatively large area on the left side that the text field won't place text in when auto adjusting. This is for a right aligned text field. The same can be said of center aligned text fields as well, where there is space on the left and right that seems as if an auto adjusting text field won't place text inside.
How do I get it so that auto adjusting text fields use the entire available space?

Update:
You can do the text calculations and font resizing manually. By doing so you will avoid hacks and future compatibility issues.
A simple implementation looks like this:
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var textField: UITextField!
var originalFont: UIFont!
override func viewDidLoad() {
super.viewDidLoad()
self.textField.font = self.textField.font?.withSize(44)
self.textField.adjustsFontSizeToFitWidth = false
self.originalFont = textField.font
self.textField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
}
#objc
func textFieldDidChange(sender: UITextField) {
let textRect = sender.textRect(forBounds: sender.bounds)
let textWidth = textRect.width
var currentFont = self.originalFont!
var i = 0
while (i < 10) {
let unrestrictedTextWidth = sender.text!.boundingRect(with: CGSize(width: .greatestFiniteMagnitude,
height: textRect.height),
attributes: [.font : currentFont],
context: nil).width
if unrestrictedTextWidth <= textWidth {
break
}
let factor = textWidth / max(textWidth, unrestrictedTextWidth)
let originalSize = currentFont.pointSize
currentFont = self.originalFont!.withSize(originalSize * factor)
i += 1
}
sender.font = currentFont
}
}
Interestingly the actual relationship between text rect and font size is non-linear and non-trivial. So I added multiple iteration steps to approximate the correct size. I chose a maximum of 10 iterations to avoid infinite loops on very small sizes and rounding errors.
Original Answer:
There has always been some magic around UITextField and adjustsFontSizeToFitWidth. See for example this post from 2015 about how the initial font size affects the minimum font size:
https://stackoverflow.com/a/30881385/921573
A UITextField with:
Font size 17, minimum size 15 will go down to 15 if need be
Font size 17, minimum size 10 will only go down to 14
Font size 13, minimum size 4 will stay at 13
In my tests, setting the minimum font size in IB to 0 just gets ignored – in order so see the shrinking effect it has to be a small value like 1.
Setting it in code to 0 works fine.
So I think it is safe to say that UITextField might be considered historically buggy when it comes to adjustsFontSizeToFitWidth.
That being said, I found a workaround for you:
class FixedTextField: UITextField {
override func textRect(forBounds bounds: CGRect) -> CGRect {
let magicNumber = -15.0
if self.adjustsFontSizeToFitWidth {
return CGRect(
x: bounds.origin.x + magicNumber,
y: bounds.origin.y,
width: bounds.size.width - magicNumber,
height: bounds.size.height
)
} else {
return super.textRect(forBounds: bounds)
}
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return self.textRect(forBounds: bounds)
}
}
This custom text field uses countermagic to mitigate the issue.
You may have to play with the magicNumber according to your font or dimensions or device. For me 15 works ok:

This works for me and the textField.textAlignment is set to .right (it will depend on how many characters you put in the textField though) :
class TextFieldOne: UITextField {
override func alignmentRect(forFrame frame: CGRect) -> CGRect {
// let newWidth = frame.width + 10 // if you want to reduce the right side too.
let x = frame.origin.x - 15 // suit yourself here
let newFrame = CGRect(x: x, y: frame.origin.y, width: frame.width, height: frame.height)
return newFrame
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return self.alignmentRect(forFrame: self.bounds)
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return self.alignmentRect(forFrame: self.bounds)
}
}

Related

Auto-size view with dynamic font in enclosed textview

So here's one I just can't seem to find a matching case for in searching on here.
I have a small UIView that contains a UITextView, and the UIView needs to auto-size around the TextView for presentation over another view. Basically the TextView needs to fully fill the UIView, and the UIView should only be big enough to contain the TextView.
The TextView just contains a couple sentences that are meant to stay on the screen until an external thing happens, and certain values change.
Everything is great when I used a fixed-size font.
But hey... I'm an old guy, and I have the text size jacked up a bit on my phone. Testing it on my device shows where I must be missing something.
When using the dynamic font style "Title 2" in the textview properties, and turning on "Automatically adjust font" in the TextView properties, and having the text larger than the default, it seems as if I'm not properly capturing the size of the TextView's growth (with the bigger text) when creating the new bounding rect to toss at the frame. It's returning values that look a lot like the smaller, default-size text values rather than the increased text size.
Code is below, the view's class code as well as the calling code (made super explicit for posting here). I figure I'm either missing something silly like capturing the size after something happens to the fonts, but even moving this code to a new function and explicitly calling it after the controls fully draw doesn't seem to do it.
I hope this make sense.
Thanks, all.
Calling code:
let noWView:NoWitnessesYetView = (Bundle.main.loadNibNamed("NoWitnessesYetView", owner: nil, options: nil)!.first as! NoWitnessesYetView)
//if nil != noWView {
let leftGutter:CGFloat = 20.0
let bottomGutter:CGFloat = 24.0
let newWidth = self.view.frame.width - ( leftGutter + leftGutter )
let newTop = (eventMap.frame.minY + eventMap.frame.height) - ( noWView.frame.height + bottomGutter ) // I suspect here is the issue
// I suspect that loading without drawing is maybe not allowing
// the fonts to properly draw and the
// TextView to figure out the size...?
noWView.frame = CGRect(x: 20, y: newTop, width: newWidth, height: noWView.frame.height)
self.view.addSubview(noWView)
//}
Class code:
import UIKit
class NoWitnessesYetView: UIView {
#IBOutlet weak var textView: EyeneedRoundedTextView!
override func draw(_ rect: CGRect) {
let newWidth = self.frame.width
// form up a dummy size just to get the proper height for the popup
let workingSize:CGSize = self.textView.sizeThatFits(CGSize(width: newWidth, height: CGFloat(MAXFLOAT)))
// then build the real newSize value
let newSize = CGSize(width: newWidth, height: workingSize.height)
textView.frame.size = newSize
self.textView.isHidden = false
}
override func awakeFromNib() {
super.awakeFromNib()
self.backgroundColor = UIColor.clear // .blue
self.layer.cornerRadius = 10
}
}
This perfect way to do it the content comes from : https://www.youtube.com/watch?v=0Jb29c22xu8 .
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// let's create our text view
let textView = UITextView()
textView.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
textView.backgroundColor = .lightGray
textView.text = "Here is some default text that we want to show and it might be a couple of lines that are word wrapped"
view.addSubview(textView)
// use auto layout to set my textview frame...kinda
textView.translatesAutoresizingMaskIntoConstraints = false
[
textView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
textView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
textView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
textView.heightAnchor.constraint(equalToConstant: 50)
].forEach{ $0.isActive = true }
textView.font = UIFont.preferredFont(forTextStyle: .headline)
textView.delegate = self
textView.isScrollEnabled = false
textViewDidChange(textView)
}
}
extension ViewController: UITextViewDelegate {
func textViewDidChange(_ textView: UITextView) {
print(textView.text)
let size = CGSize(width: view.frame.width, height: .infinity)
let estimatedSize = textView.sizeThatFits(size)
textView.constraints.forEach { (constraint) in
if constraint.firstAttribute == .height {
constraint.constant = estimatedSize.height
}
}
}
}

How to change the size of blinking bar/line for specific UITextField?

i'm working on a project(Swift4,Xcode 9.2) which has a feature to get text input and the blinking bar/line should be of big size (it should be Square instead of bar/line), so i placed a UITextField for Text but i don't understand how to change the size of that blinking line/bar.
So, is it possible to change the size of line/bar? and if Yes then how to do it?
i know how to change the color of that line/bar but this is something different.
You can change the size by overriding the frame method for cursor as follows,
class CustomTextField: UITextField {
override func caretRect(for position: UITextPosition) -> CGRect {
var rect = super.caretRect(for: position)
let size = CGSize(width: 10, height: 50)
// Calculating center y
let y = rect.origin.y - (size.height - rect.size.height)/2
rect = CGRect(origin: CGPoint(x: rect.origin.x, y: y), size: size)
return rect
}
}
Set CustomTextField class in xib/storyboard identity inspector for that textField.
We can't change the cursor height, but we can do some trick, select your textfield and change your textfield border style as UITextBorderStyleNone
Check the below link which is already given answer
there after increase the font size of your textfield whatever you want, then you get the output as
There are some unnecessary lines of codes, so this is the revised:
class CustomTextField: UITextField {
override func caretRect(for position: UITextPosition) -> CGRect {
var rect = super.caretRect(for: position)
rect = CGRect(x: rect.origin.x, y: .zero, width: 15, height: 30)
return rect
}
}

Adjusting height of UITextView to its text does not work properly

I wrote following code to fit UITextView's height to its text.
The size changes but top margin relative to first line of text differ every other time when I tap enter key on keyboard to add new line.
Setting
xCode 7.3
Deployment target: iOS 9
import UIKit
class ViewController: UIViewController, UITextViewDelegate {
lazy var textView: UITextView = {
let tv = UITextView(frame: CGRectMake(20, 200, (self.view.frame.width - 40), 0) )
tv.backgroundColor = UIColor.lightGrayColor()
return tv
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview( textView )
textView.delegate = self
let height = self.height(textView)
let frame = CGRectMake(textView.frame.origin.x, textView.frame.origin.y, textView.frame.width, height)
textView.frame = frame
}
func textViewDidChange(textView: UITextView) {
let frame = CGRect(x: textView.frame.origin.x, y: textView.frame.origin.y, width: textView.frame.width, height: height(textView) )
textView.frame = frame
}
func height(textView: UITextView) -> CGFloat {
let size = CGSizeMake(textView.frame.size.width, CGFloat.max)
let height = textView.sizeThatFits(size).height
return height
}
}
I tried few other ways to fit UITextView height but they just acted the same say.
To fix this, subclass UITextView and override setContentOffset to allow scrolling only if the content height is larger than the intrinsic content height. Something like:
override func setContentOffset(_ contentOffset: CGPoint, animated: Bool) {
let allowScrolling = (contentSize.height > intrinsicContentSize.height)
if allowScrolling {
super.setContentOffset(contentOffset, animated: animated)
}
}
For auto-growing dynamic height text view, the caret moves on starting a new line. At this moment, the size of the text view hasn't grown to the new size yet. The text view tries to make the caret visible by scrolling the text content which is unnecessary.
You may also need to override intrinsicContentSize too.

Changing UISwitch width and height

I am trying to change the default height and width of a UISwitch element in iOS, but unsuccessfully.
Can you change the default height and width of a UISwitch element?
Should the element be created programmatically?
I tested the theory and it appears that you can use a scale transform to increase the size of the UISwitch
UISwitch *aSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(120, 120, 51, 31)];
aSwitch.transform = CGAffineTransformMakeScale(2.0, 2.0);
[self.view addSubview:aSwitch];
Swift 4
#IBOutlet weak var switchDemo: UISwitch!
override func viewDidLoad() {
super.viewDidLoad()
switchDemo.transform = CGAffineTransform(scaleX: 0.75, y: 0.75)
}
Swift 5:
import UIKit
extension UISwitch {
func set(width: CGFloat, height: CGFloat) {
let standardHeight: CGFloat = 31
let standardWidth: CGFloat = 51
let heightRatio = height / standardHeight
let widthRatio = width / standardWidth
transform = CGAffineTransform(scaleX: widthRatio, y: heightRatio)
}
}
Not possible. A UISwitch has a locked intrinsic height of 51 x 31 .
You can force constraints on the switch at design time in the xib...
but come runtime it will snap back to its intrinsic size.
You can supply another image via the .onImage / .offImage properties but again from the docs.
The size of this image must be less than or equal to 77 points wide
and 27 points tall. If you specify larger images, the edges may be
clipped.
You are going to have to bake your own custom one if you want another size.
here is a nice UISwitch subclass that i wrote for this purpose, its also IBDesignable so you can control it from your Storyboard / xib
#IBDesignable class BigSwitch: UISwitch {
#IBInspectable var scale : CGFloat = 1{
didSet{
setup()
}
}
//from storyboard
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
//from code
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
private func setup(){
self.transform = CGAffineTransform(scaleX: scale, y: scale)
}
override func prepareForInterfaceBuilder() {
setup()
super.prepareForInterfaceBuilder()
}
}
import UIKit
extension UISwitch {
static let standardHeight: CGFloat = 31
static let standardWidth: CGFloat = 51
#IBInspectable var width: CGFloat {
set {
set(width: newValue, height: height)
}
get {
frame.width
}
}
#IBInspectable var height: CGFloat {
set {
set(width: width, height: newValue)
}
get {
frame.height
}
}
func set(width: CGFloat, height: CGFloat) {
let heightRatio = height / UISwitch.standardHeight
let widthRatio = width / UISwitch.standardWidth
transform = CGAffineTransform(scaleX: widthRatio, y: heightRatio)
}
}
Even if it’s possible to make a UISwitch smaller, this would negatively effect the user experience. Apple's Human Interface Guidelines recommend a minimum size of 44 points for touch targets.
Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls
By scaling this to smaller than the standard size, it will become more difficult for users to tap, and also introduce accessibility concerns. Please consider users with less than perfect vision or motor control before making UI elements small.
Finally, here’s an excerpt from a great article about touch target sizes illustrating what can happen when controls are too small.
Interviewer — “I noticed, you had some trouble submitting your email address on this screen, can you tell me how that felt?”
User — “Oh yeah, I’m not very good at technology.”
Interviewer — “What do you think was causing you to struggle at that point?”
User — “The buttons were hard to tap, and I just kept stuffing it up.”

How do I vertically center UITextField Text?

I am simply instantiating a UITextField and noticing that the text doesn't center vertically. Instead, it is flush with the top of my button, which I find kind of odd since I would expect the default to center it vertically. How can I center it vertically, or is there some default setting that I am missing?
textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
In swift use:
textField.contentVerticalAlignment = UIControlContentVerticalAlignment.center
This has potentially got several complicating factors, some alluded to in previous answers:
What you're trying to align (just numbers, just letters, just uppercase letters or a mix)
Placeholders
Clear button
What you're trying to align is important because of which point in the font should be vertically centered due to line height, ascenders, descenders etc.
(source: ilovetypography.com)
(Image thanks to http://ilovetypography.com/2009/01/14/inconspicuous-vertical-metrics/ )
When you're dealing with just numbers for example, the standard center alignment won't look quite right. Compare the difference in the two below, which use the same alignment (in the code below), one of which looks correct and the other which looks slightly off:
Not quite right with a mix of letters:
but looks right if it's just numbers
So, unfortunately, it may need a bit of trial and error and manual adjustment to get it looking visually correct.
I placed the below code in a subclass of UITextField. It calls superclass methods as this takes into account the clear button being present.
override func awakeFromNib() {
contentVerticalAlignment = UIControlContentVerticalAlignment.Center
}
override func textRectForBounds(bounds: CGRect) -> CGRect {
let boundsWithClear = super.textRectForBounds(bounds)
let delta = CGFloat(1)
return CGRect(x: boundsWithClear.minX, y: delta, width: boundsWithClear.width, height: boundsWithClear.height - delta/2)
}
override func editingRectForBounds(bounds: CGRect) -> CGRect {
let boundsWithClear = super.editingRectForBounds(bounds)
let delta = CGFloat(1)
return CGRect(x: boundsWithClear.minX, y: delta, width: boundsWithClear.width, height: boundsWithClear.height - delta/2)
}
override func placeholderRectForBounds(bounds: CGRect) -> CGRect {
let delta = CGFloat(1)
return CGRect(x: bounds.minX, y: delta, width: bounds.width, height: bounds.height - delta/2)
}
In the storyboard: Under control -> change the vertical as well as horizontal alignment, as to your needs.
This works fine for textField's text. But if you want to use placeholder text (a text that will appear while textfield is blank), on iOS 7 you will encounter problems.
I solved it by overriding TextField class and
- (void) drawPlaceholderInRect:(CGRect)rect
method.
Like this:
- (void) drawPlaceholderInRect:(CGRect)rect
{
[[UIColor blueColor] setFill];
CGRect placeholderRect = CGRectMake(rect.origin.x, (rect.size.height- self.font.pointSize)/2, rect.size.width, self.font.pointSize);
[[self placeholder] drawInRect:placeholderRect withFont:self.font lineBreakMode:NSLineBreakByWordWrapping alignment:self.textAlignment];
}
Works for both iOS7 and earlier versions.
You can also resolve the issue by adjusting the text baseline.
// positive: up, negative:down
// NSAttributedStringKey.baselineOffset:0
let attDic: [NSAttributedString.Key: Any] = [
.font: UIFont.systemFont(ofSize: 16),
.baselineOffset: 0
];
textfield.placeholder = NSAttributedString(string: "....", attributes: attDic);

Resources