I have a UITextField that shrinks and expands when user input text. If the textfield's width reach the screen width, I want it to be right-aligned so user can see the last input characters. In other circumstance, I want it to be left-aligned.
Because the textfield's maximum width is not exactly the same with screen, I need to find a way to check if it has characters out of visible area.
Is there anyway to achieve this?
You could try checking the width of the string that is in the field and comparing it to the width of the field itself. It would look something like this -
CGSize textSize = [self.field.text sizeWithAttributes:#{NSFontAttributeName:self.field.font}];
// If the text is larger than the field
if (textSize.width > self.field.bounds.size.width) {
// There is text that is not visible in the field.
}
This is fairly rough, but should get you close.
Related
In a very simple single screen app, I have a single-line UILabel going from left edge to right edge of the screen.
The text of the label is dynamically updated at runtime. The length of the text varies, as it contains a number in the range 0...100, and I am neither using a monospaced font nor leading zeroes.
Here is an illustration:
|<--------- Screen width --------------->|
|<----- UILabel "Some value = 0" ------->|
|<----- UILabel "Some value = 50" ------>|
|<----- UILabel "Some value = 100" ----->|
I would like the label to always use the maximum width for any device (i.e. screen size). This can be achieved by using auto-layout, suitable leading and trailing constraints, a large font size and the "auto-shrink" property for the label.
The problem is, that this approach will make the font size also vary depending on the value displayed, which is not what I want. It should only vary with the width of the screen, but not with the length of the label text.
In the example above, a large font size would be used for the value 0, a medium one for 50 and a small one for 100. I want it to adjust to the worst-case (100) and use the resulting size for any text afterwards.
Is it possible to achieve this using Interface-Builder properties and auto-layout constraints only?
I can think of ways how to calculate sizes in code, but I think there must be an easier way.
You cannot express font size as a proportion of view width in interface builder but you can do it very easily in code:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let textSize = Constant.baseFontSize * bounds.size.width / Constant.baseViewWidth
label.font = .systemFont(ofSize: textSize)
}
I have a UITextField that will display floating point values between 0 and 1.0 with 3 digits after the decimal point. So the widest text it will show is something like "0.000". I'd like to set the auto layout width constraint so that the text field always has just enough room to display this value.
The code below is close, but does not work.
let biggestString = "0.000"
let textAttrs = [NSAttributedStringKey.font: myField.font]
let size = (biggestString as NSString).size(withAttributes: textAttrs)
myField.widthAnchor.constraint(equalToConstant: size.width).isActive = true
It ends up displaying "1.0..." I'm guessing this is because a UITextField has some kind of padding around the text, so so I need to set the width to be the string width + the padding. But, I don't see a property from which I can read this padding amount. Is there a way to get it?
Try searching for the 'intrinsicContentSize'. According to the documentation this is what has to be set to indicate to the auto-layout how big the content is.
There was also a more elaborate discussion on how this can actually if the layout settings do not allow the resizing to work, see other question here:
How to increase width of textfield according to typed text?
I have a UITextField and UILabel sitting together in a UIView as so:
and here it is in Xcode:
The label is hidden until the user enters some text into the text field, so it serves to provide a persistent "suffix" to the numeric entry. The problem is that when the user types a number into the text field, it doesn't shrink down to the size of the text, it remains at the size of the original placeholder, even though it isn't visible, as so:
Is there any way I can constrain the text field's width to be the minimum size to accommodate the user's text, and not pay attention to the invisible placeholder text's width?
Thank you
I managed to solve it myself:
Whenever the text is edited, the text field is checked to see if there is any text inside. If there is no text, the 'mg' suffix is hidden, and the placeholder is added. If there is text, the 'mg' suffix is shown and the placeholder is removed. Like so: (Swift)
func textFieldTextChanged(_ textField: UITextField) {
milligramTextField.invalidateIntrinsicContentSize()
view.layoutIfNeeded()
if textField.text == "" {
milligramSuffixLabel.text = ""
milligramTextField.placeholder = "0 mg"
} else {
milligramSuffixLabel.text = " mg"
milligramTextField.placeholder = ""
}
}
This answer was of great help.
I have a UILabel carefully laid out in Interface Builder with proper height and width constraints. The number of lines is set to 4. The wrapping is set to word wrap. The text is "CHECKED". The font size is very large and thus it only fits "CHECKE" and the "D" is on the second line. Writing "Checked" instead of "CHECKED" lets the font shrink (as intended) so that the whole word fits. But (the text is user given and it can be expected that the user writes fully uppercase words) having uppercase words the label does not break it/shrink the font as expected.
Do you have a suggestion as to what I might have missed? Capitalising the words (thusly only having the first letter uppercase) does work, but is not what the client wants.
Updated question
The problem seems to be unrelated to having uppercase or lowercase text. My problem could be solved by an answer to the following question:
How to make (ideally with the help of only Interface Builder) the UILabel text shrink trying to fit full words within all available lines without wrapping the text mid-word?
If the text "CHECKED" is too wide for a label (with more than 1 line available) it should shrink the font size instead of breaking the "D" and wrapping the single letter to the next line.
If the text is "one CHECKED two" and the single word "CHECKED" is already too wide for a label (with more than 1 line available) it should break between all words and shrinking the font size so that "CHECKED" still fits the middle line.
Avoiding:
one
CHECKE
D two
Thank you very much!
Here is a UILabel subclass that will find the largest word in the labels text, use the boundingRect function of NSString to see how large that one word will be with the current font, and drop the font size until it fits the width.
class AutosizingMultilineLabel: UILabel {
override func layoutSubviews() {
super.layoutSubviews()
self.adjustFontToFitWidth()
}
func adjustFontToFitWidth() {
guard let currentFont = self.font else { return }
let minimumFontSize: CGFloat = floor(self.minimumScaleFactor * currentFont.pointSize)
var newFontSize = currentFont.pointSize
var theNewFont = currentFont
if let text = self.text, let longestWord = text.components(separatedBy: " ").max(by: {$1.count > $0.count})?.replacingOccurrences(of: "\n", with: "") {
let nsString = longestWord as NSString
while newFontSize > minimumFontSize {
theNewFont = currentFont.withSize(newFontSize)
let boundingRect = nsString.boundingRect(with: CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude),
options: NSStringDrawingOptions.usesLineFragmentOrigin,
attributes: [.font: theNewFont],
context: nil)
if ceil(boundingRect.size.width) <= self.bounds.size.width {
break
}
newFontSize -= 1
}
self.font = theNewFont
}
}
}
When the word is bigger than the line, word wrap doesn't work. If it doesn't fit on this line, it won't fit on the next line. (same word, same size, same line size). To make it fit, the label will start putting letters on the next line.
If you allow multiple lines on your label, the OS will try to fill the lines before adjusting the font size.
I think you're just running into a limitation on Autoshrink.
In Interface Builder:
add a new UILabel with Width: 230 and Height: 280
set the Font to System 44.0
set Line Break: Truncate Tail
set Autoshrink: Minimum Font Scale at 0.15
set the text of the label to test CHECKED lines
Now, drag the handle on the right edge of the label left and right... when it gets too narrow, the word CHECKED will break onto the next line.
Change CHECKED to checked and do the same thing. You should see the same behavior.
Now, try dragging the Bottom edge up and down. With either CHECKED or checked, you should see the Font Size auto shrink.
So... to do what you're trying to do, you might have to skip Autoshrink and instead do some code calculations.
Edit: further visual of what goes on...
Start with above values, but set the Height of the label to 170 - gives it just a little vertical padding.
Now, drag the left edge to make it narrower.
When you reach the end of the word CHECKED, and keep going, you will see the font shrink until it gets small enough that there is space for it to wrap to a 4th line.
I think you're going to need some code to get exactly what you need.
I have a UITextView that has a fixed width and height. I pre-populate the entire textfield with blanks.
I would like to insert a character with the push of a button that will erase the last blank character, insert my string character and then place the cursor at the beginning of the newly inserted string. I am trying to achieve inserting special fonts right to left and bottom to top.
It is working with the first button push and on the second button push the new value is inserted in the correct position to the left, however, the cursor will not move to the left after the second button push, it remains to the right after the second string insert.
Here is my code...
-(IBAction)chartP:(id)sender {
NSRange currentRange = myChart.selectedRange;
if (currentRange.length == 0) {
currentRange.location--;
currentRange.length++;
}
myChart.text = [myChart.text stringByReplacingCharactersInRange:currentRange
withString:[NSString string]];
currentRange.length = 0;
myChart.selectedRange = currentRange;
myChart.text = [myChart.text stringByAppendingString:#"p"];
myChart.selectedRange = NSMakeRange(myChart.selectedRange.location -1, 0);
}
Can someone assist me with what I am missing here to continually increment to the left with my string inserts?
How about flipping the text area:
myChart.transform = CGAffineTransformMakeScale(-1,-1);
It sounds like you are trying to implement right-to-left text direction by faking it. Why not do the real thing?
Here's a question that covers the topic:
Change the UITextView Text Direction
If you need bottom-to-top entry, and you have the ability to use a custom font, perhaps you can apply a transformation to the UITextView and y-flip it. Look at the transform property of UIView. (Things like the text selection loupe may break, but it's worth a try.)