Multi-line editable piece of text: editable UILabel? - ios

I am trying to create a large plot of editable text but there seems to be 1 option: using a small UITextField.
I know UILabels can be big and wide but I do not know how to make an editable UILabel.
I experimented with UILabel properties and the .layer method but nothing seems to be really working. Anybody have a recommendation as to what I should do?
To summarize, I am looking for a multi-line editable piece of text.

UITextView for the win!!
UITextViews allow for multiple line manipulation of texts and if you use the UITextViewDelegate, it can provide for methods that allow specific things when the textView is clicked on, etc...!
With a UITextView you can provide a specific amount of lines (if you only want 3, you can specify it) and also provide hyperlinks, if need be.
Here is an example I have (changed a little) to show an example for ya...
let textBox:UITextView = UITextView(frame: CGRect(x: firstBox.frame.width*0, y: firstBox.frame.height*0.375, width: firstBox.frame.width*1, height: firstBox.frame.height*0.5))
textBox.backgroundColor = UIColor.clearColor()
let websiteName = "http://stackoverflow.com/posts/38035564"
textBox.text = "SO is an awesome coding site! Please visit\n\(websiteName)"
//No need to set number of lines, it will auto set to as many as needed!
textBox.editable = false
textBox.selectable = true
//Register the hyperlink
textBox.dataDetectorTypes = UIDataDetectorTypes.All
textBox.textColor = UIColor.grayColor()
//Change only the hyperlink part
let textRange = NSMakeRange(textBox.text.characters.count-websiteName.characters.count, websiteName.characters.count)
let style = NSMutableParagraphStyle()
style.alignment = NSTextAlignment.Center
let attributedText = NSMutableAttributedString(string: textBox.text, attributes: [NSFontAttributeName:UIFont(
name: (textBox.font?.fontName)!,
size:13/15*fontSize)!,
NSParagraphStyleAttributeName: style])
attributedText.addAttribute(NSUnderlineStyleAttributeName , value:NSUnderlineStyle.StyleSingle.rawValue, range: textRange)
textBox.attributedText = attributedText
firstBox.addSubview(textBox)

Related

UIlabel NSMutableAttributedString second line not visible upon line break

I am trying to create a UILabel which contains two texts of different fonts where one NSMutableAttributedString sits vertically on top of the other. Upon attempting to insert a line break via swift's \n I found that the appended string disappears. I have tried a variety of lineBreakModes with no result (with and without \n) along with ensuring the frame isnt constricting the texts visibility by setting a large maximumLineHeight.
I should also mention that according to Apple's documentation when setting UILabel.attributedText to any NSAttributedText instance
When the label has an attributed string value, the system ignores the textColor, font, textAlignment, lineBreakMode, and lineBreakStrategy properties. Set the foregroundColor, font, alignment, lineBreakMode, and lineBreakStrategy properties in the attributed string instead.
Here is some of the code simplified for the sake of the question (I have also tried calling .sizeTofit() after setting the labels attributedText as well as setting different .lineBreakStrategys)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
paragraphStyle.lineBreakMode = .byWordWrapping
let totalVisitsString = NSMutableAttributedString(string: "\(visitLogs.count)\n", attributes: [.font : UIFont.systemFont(ofSize: 25), .paragraphStyle : paragraphStyle])
totalVisitsString.append(NSMutableAttributedString(string: "Total visits", attributes: [.font : UIFont.systemFont(ofSize: 14)]))
totalVisitsLabel.attributedText = totalVisitsString
the label itself:
var totalVisitsLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
By default your label's numberOfLines is 1. You never change it so that is what you get.
Labels when created are defaulted to 1 line. You'll need to set the number of lines to 0 (unlimited) or whatever number you want to max it at.
var totalVisitsLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()

How to add indents to Multiple lines of UILabel?

While I found how to add indentations to first line (FirstLineHeadIndent) and to the rest of lines (HeadIndent), I cannot find how to add indents to only first two/three lines in order to achieve something like this:
PS: This is not a duplicate, because I'm not asking how to indent only first line, as one user suggested.
Using TextKit Framework in ios
CGRect checkBoxFrame = [self.textView convertRect:self.checkView.bounds fromView:self.checkView];
checkBoxFrame.origin.x -= self.textView.textContainerInset.left;
checkBoxFrame.origin.y -= self.textView.textContainerInset.top;
UIBezierPath *checkBoxPath = [UIBezierPath bezierPathWithOvalInRect:checkBoxFrame];
self.textView.textContainer.exclusionPaths = #[checkBoxPath];
It will exclude the image path inside content of TextView
You need to set your UILabel text as Attributed string in storyboard.
Then you can edit the indentation of each line, and you can also paste any text you've created with text editor and it will keep its indentation as well as other attributes.
You can of course manipulate these attributes programmatically, here is an example:
#IBOutlet weak var label: UILabel!
let text = "\tfirst line\n \tsecond line\nthird line\nforth line"
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.tabStops = [NSTextTab(textAlignment: NSTextAlignment.left, location: 15, options: [:])]
paragraphStyle.headIndent = 10
label.attributedText = NSAttributedString(string: text, attributes: [NSParagraphStyleAttributeName: paragraphStyle])
Here is an example of how to configure it:
Here is how to configure indentation:
Here is the example on the simulator:
You would need to use the stringattribute property of the UILabel.AttributedText.
its actually of type NSMutableAttributedString so I first casted
label.AttributedText to the mutable type then I could manipulate it.‡
To do this you would use the following:
var mutable = Control.AttributedText as NSMutableAttributedString;
UIStringAttributes uiString=new UIStringAttributes();
Then you need to set an indent on the first line (Do this the way you already know how to), and then you would set the headIndent of its paragraph style like below.
this is converted from objective-c so might not be perfect: ‡
NSMutableParagraphStyle paragraphStyle = new NSMutableParagraphStyle();
paragraphStyle.headIndent = 14;
NSDictionary attributes (){
StyleAttributeName = paragraphStyle;
};
mutable.AddAttribute(attributes);
Control.attributedText = mutable;
I believe something like this in combination with your 'FirstLineHeadIndent' code should do the trick.
‡ How to manipulate NSAttributedString
‡ Objective-C second line with indent

iOS - image attachment for the text view changes attributes

I've a UITextView described as follows with the given attributes:
lazy var inputTextView: UITextView = {
let tv = UITextView()
tv.backgroundColor = .white
tv.textContainerInset = UIEdgeInsetsMake(12, 12, 12, 12) // Posicionamento do texto
let spacing = NSMutableParagraphStyle()
spacing.lineSpacing = 4
let attr = [NSParagraphStyleAttributeName : spacing, NSFontAttributeName: UIFont.systemFont(ofSize: 16), NSForegroundColorAttributeName: UIColor.blue]
tv.typingAttributes = attr
return tv
}()
Everything works as expected until I attach an image to the UITextView.
The image gets inserted in the desired position but after its inserted it overrides my textView attributes.
The text becomes small and in a different color than the attributes I've implemented in its declaration.
I'm attaching the image as follows:
let att = NSTextAttachment()
att.image = image
let attrString = NSAttributedString(attachment: att)
self.inputTextView.textStorage.insert(attrString, at: self.currentCursorLocation)
What's causing this issue?
I've even tried to reenforce its attributes whenever I insert an UIImage to its content.
I've tried the following when adding the image:
let att = NSTextAttachment()
att.image = image
let attrString = NSAttributedString(attachment: att)
self.inputTextView.textStorage.insert(attrString, at: self.currentCursorLocation)
let spacing = NSMutableParagraphStyle()
spacing.lineSpacing = 4
let attr = [NSParagraphStyleAttributeName : spacing, NSFontAttributeName: UIFont.systemFont(ofSize: 16), NSForegroundColorAttributeName: UIColor.blue]
self.inputTextView.typingAttributes = attr
And it still doesn't change its attributes.
Whats causing this issue? Any tip?
Thanks
Edit
As suggested here's how I'm setting the cursor position
func textViewDidChange(_ textView: UITextView) {
currentCursorLocation = textView.selectedRange.location
}
I do this to insert the image at the current location of the text blinking cursor
[Edit: Unfortunately this does not solve Ivan's problem - I leave the answer because it is interesting detail for those who do not understand Unicode character encoding].
String range specification is non-intuitive due to the subtleties of Unicode. I expect your issue is that the cursor position at which you are inserting your image is not where you think it is relative to the text and you are inserting the image at a Unicode scalar position that is not between Unicode code points, such that you are corrupting a unicode code. To understand why this can happen, see this Apple article.
Strings in Swift 2
I would suggest using the following notation when specifying string ranges (taken from this Stack Overflow answer: NSAttributedString and emojis: issue with positions and lengths).
// Convert to NSRange by computing the integer distances:
let nsRange = NSRange(location: text.utf16.distance(from: text.utf16.startIndex, to: from16),
length: text.utf16.distance(from: from16, to: to16))
However without seeing how you set your cursor position, it is not possible for me to be sure this is the source of your problem. [Update: thanks for updating the question to show the cursor position - we got there in the end but for others, note, after setting the cursor position this way (which would have been fine), he was incrementing it by 1, which meant the issue I have referred to about Unicode scalars versus code points was in fact the issue].

UITextView attributed Alignment and size

First assume math is correct.
let textViewText = NSMutableAttributedString(string: "34\n+ 10\n+ 32344\n= 23424")
Im using a Textview to display input from the user. To make it easier to read I'm trying to get the text format like this
34
+ 10
+ 32344
= 23424
The other issue I'm having is with wrapping. Is there a way to resize each line to fit on its line?
34
= 23424
4356356
Is your text dynamic or static? If static, then all you need to do is to put the correct amount of spacing between your numbers and plus signs and then right justify the text.
self.textView.attributedText = NSMutableAttributedString(string: "34\n+ 10\n+ 32344\n= 23424")
self.textView.textAlignment = NSTextAlignment.Right
Result:
You can accomplish this by using a right-aligned tab stop in your paragraph style, and separating your operators and values with a tab.
let string = "\t34\n+\t10\n+\t32344\n=\t23424"
let paragraph = NSMutableParagraphStyle()
paragraph.tabStops = [NSTextTab(textAlignment: .Right, location: 200, options: [:])]
let attributedString = NSAttributedString(string: string, attributes:[NSParagraphStyleAttributeName: paragraph])

NSAttributedString with tabs

How do you create a UILabel with this kind of text format? Would you use NSAttributedString?
NSAttributedString can create text columns with tab stops. This is similar to how it is done in a word processor with the same limitations.
let text = "Name\t: Johny\nGender\t: Male\nAge\t: 25\nFavourites\t: Reading, writing"
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.tabStops = [NSTextTab(textAlignment: NSTextAlignment.Left, location: 150, options: [:])]
paragraphStyle.headIndent = 150
label.attributedText = NSAttributedString(string: text, attributes: [NSParagraphStyleAttributeName: paragraphStyle])
tabStops provides point positions for where to continue text after each tab. Here we did one tab at a reasonable point after the first column.
headIndent tells the label that wrapped text needs to be indented by a fixed amount, so it wraps to the next line.
The limitations with this approach are:
The tab stop location is a fixed point value so you need to know what you want. If the value you pick is less than the width of the first column for some lines, those lines will indent to a different location.
Wrapping only really works if your last column is the one that wraps. Since your second column was prefaced by ":" You may want to either just increase your headIndent or also split out the ":" to be \t:\t and set up a second tab stop. If you're not letting text wrap, this is not an issue.
If these limitations are too restrictive, you can restructure your label to be a collection of multiple labels with auto layout constraints.
In Swift 4.2 or above
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.tabStops = [NSTextTab.init(textAlignment: .left, location: 150, options: [:])]
paragraphStyle.headIndent = 150
let attributedTitle = NSAttributedString(string: "Some Title", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 14.0), NSAttributedString.Key.paragraphStyle: paragraphStyle])

Resources