How to implement a down arrow / caret (like in the iOS 9 Music app) in an iOS Swift project?

Question

I am looking for the best way to create a down arrow (caret?) at the right hand side of a UILabel in a view that is centered in a UINavigationItem.

The whole thing should look like the down arow in the iOS 9 Music app. The text of the label will change during runtime and the title/text of the label including the arrow should be centered like in this screenshot:

Currently I append a \u{25BE} character at the end of the text like this:

self.lblSelectedAlbum.text = self.lblSelectedAlbum.text! + " \u{25BE}"

But this has several negative effects:

1. It looks a cluncky
2. If the label text is too long, the down arrow will disappear

Any ideas on how to implement this best? Thanks!

Solution 1

I suggest using an external font in attributed text. One example: Font Awesome's angle-down and chevron-down.

If you switch to a text view, you can set insets like

myTextView.edgeInsets:UIEdgeInsetsMake(0, 10, 0, 0)]; //Replace 10 with the actual width that will center it.

You can also subclass UILabel to modify how it draws as in this example.

Solution 2

Here is the unicode: \u{2304}

In context it looks like this. Avoid the hassle of downloading a new font.

let workout = NSMutableAttributedString(string: "Workout", attributes: [NSFontAttributeName: UIFont(name: "Verdana", size: 14)!])
let arrow = NSMutableAttributedString(string: "\u{2304}", attributes: [NSFontAttributeName: UIFont(name: "Verdana", size: 37)!])

let combination = NSMutableAttributedString()
combination.append(workout)
combination.append(arrow)

sender.setAttributedTitle(combination, for: .normal)