Search code examples
iosxcodeswiftuikitinterface-builder

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

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.

enter image description here

enter image description here

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:

Screenshot of Music app on IOS 9.2

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

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

    enter image description here

    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.