I've got a UIButton, it's a simple segue to another page.
I've set Title to attributed and then selected word wrap. This works fine, the second word wraps down to the next line.
However, it is all left justified. When I select "Align Centre" (using the buttons just under the "Title", the word wrap no longer works and simply runs .... so you can't see it all. (e.g. "next pa" instead of "next page")
Am I missing something here? It seems like such a trivial thing to do! There's an old answer here can't get word wrap to work on UIButton but it's both old and uses code - surely you don't need code to centre the button text if you want to word wrap it to 2 lines!?
I've set Title to attributed and then selected word wrap. This works fine, the second word wraps down to the next line. However, it is all left justified.
Once you've decided to use an attributed string, you must do everything with the attributed string. So give your attributed string a paragraph style that centers the text.
let para = NSMutableParagraphStyle()
para.alignment = .center
para.lineBreakMode = .byWordWrapping
let s = NSAttributedString(
string: "Hello World", attributes: [.paragraphStyle : para])
self.button.setAttributedTitle(s, for: .normal)
You will also need to set the button's title label to allow multiple lines.
self.button.titleLabel?.numberOfLines = 0
Result:
surely you don't need code to centre the button text if you want to word wrap it to 2 lines!?
Not to center it, no; you can set the centering in the storyboard. So you could eliminate the first batch of code and configure it in the storyboard. But you must use code to turn the title label into a multiline label:
self.button.titleLabel?.numberOfLines = 0
There is no way to do that in the storyboard, because you have no access to the title label there.
I've just been playing round with this and I've found it works if you set it to 'character wrap' rather than 'word wrap' once you've selected centre alignment.
If anyone has a better solution please add it, as I guess this might have issues if you slightly change the width etc when using auto layout for different screen sizes etc if you want it to adapt its width so this might not be the best solution but it does work
Related
What I want to implement
I am looking for a way to display a title label and a detail text label in a NSMenuItem.
Preferably it would look something like this:
The Title Label is left aligned with all the other NSMenuItem's
titles
The Detail Text Label is right-aligned
The Detail Text Label has a different text color than the title
Selection/Submenus etc. work as expected
What have I tried already
By reading the documentation I found the following possible implementations:
Create a custom NSView and set NSMenuItem.view
Use a default NSMenuItem and use a NSAttributedString
First I tried to use a custom NSView. However I could not get the NSMenuItem to size correctly in order to display all the available text. I guess some autoresizing masks do not work correctly but I am not sure. Also this way I would need to re-implement selection/arrow for the submenu, ...
Then I started to experiment with NSAttributedString. I calculate the title with the most characters and then pad the string with title += string.padding(toLength: maxTitleLength, withPad: " ", startingAt: 0). The NSAttributedString colors the title and the detail label differently. However this does not seem to work since the detail labels are not correctly aligned although the title is padded to the same length. I guess this makes sense since characters have different widths?
TL;DR - Question
So is there any other way to implement the desired design which I did not find? Do you have any advice for me on how to implement this?
Nevermind I found the answer myself. Actually it works for me now by using the view property of the NSMenuItem to set a custom view. This answer lead me to the right direction: Highlighting a NSMenuItem with a custom view?.
I'm trying to create an expandable label that looks like the one in the picture:
I have two problems:
How do I make the label truncate the tail such that it leaves enough place for the More button/clickable text?
How do I place the More text?
Maybe, I am going about it the wrong way? Instead of playing with the number of lines, should I maybe try to calculate how much text goes into one and a half line and present it only, and then when clicking More I present the whole text?
Would appreciate any advice, thanks!
You can use this library to achieve your expected output.
https://github.com/apploft/ExpandableLabel
Specify the number of lines you want to display default.
expandableLabel.numberOfLines = 2
Set true if the label should be collapsed or false for expanded.
expandableLabel.collapsed = true
collapsedAttributedLink
Set the link name that is shown when collapsed.
expandableLabel.collapsedAttributedLink = NSAttributedString(string: "More")
expandedAttributedLink
Set the link name that is shown when expanded. It is optional and can be nil.
expandableLabel.expandedAttributedLink = NSAttributedString(string: "Less")
I'm trying to accomplish an autocomplete of my own for matching array items while typing. So, I already have the logic done for matching what's being typed with what's in the array, but my question is related to displaying the proposed correction in the UITextView like this screenshot
I was trying by splitting the text in the textview and replacing the last word into attributed strings, but that makes the proposed correction part of the actual contents. Any ideas of how this is accomplished in this app?
What you currently do is good , when you set the text of the textView to attributed string make bool flag say it's name is textEdited = true with a string part that the user types say it's name userStr , when textView change method is triggered check that bool and according to it make the search if it's true proceed search with userStr if it's not proceed search with whole textView text , don't forget to make textEdited= false after every zero suggested result
Edit: regarding the cursor put a label under the textfield with the same font as the textView and make it's background darkGray , also make background of the textview transparent and every attributed string assign it to the label so plus part of the label will be shown and cursor will be as it is in the textView
I have a username variable and a message string such as "liked your post" and in order to be able to cast it as one string, I combined them in an NSMutableAttributedString. As it'll be easy, I am
let username = notification["username"].string
let notificationBody = notification["body"].string
let notificationString = NSMutableAttributedString(string: "\(username!) \(notificationBody!)")
notificationString.addAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], range: NSMakeRange(0, (username?.characters.count)!))
cell.notificationLabel.attributedText = notificationString
Colouring the text is working as expected, however, I want to be able to click on the username and at the same time achieve a colour-effect of click (like click on button). Here is what I mean:
Without click:
on click :
and segue to another VC.
I actually achieved what I want to achieve with a primitive hack that I absolutely do not like. What I did was, first I added an extra button over username and set background-color: clear color. And it visually seems nice if the width of the username coincidentally matches the width of the button in Storyboard - cell. Otherwise, it seems buggy.
Extra Button layer over 'username' text:
What is the practical way of achieving what I want to achieve? Should I just change the width of the transparent button for each cell, according to the username character count? So if for 4-6 words, x width; if 8-10 words, y width?
Are there any better ways than this?
I would change the layout to have a button that contains the user name and a label that contains the body instead of just one label. That way the button will always be the same size as the username.
A perfect example of what I am trying to do is the Instagram comments.
Suppose we have a user and a list of text (the comment). I want my UIView to have the username in some font style and clickable along with text next to it and wrapping around to the next line (which is not clickable).
It might be easier to understand if you just look at this:
Notice how the username is clickable and separated from the text, but the text wraps around to the next line. How can I do this?