7

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!

The Lone Coder
  • 3,062
  • 4
  • 20
  • 35

3 Answers3

4

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.

Community
  • 1
  • 1
Peter DeWeese
  • 18,141
  • 8
  • 79
  • 101
  • OK, so I installed FontAwesome and managed to add a second label with the angle-down character to the right of the "Lbl Selected Blog". I set the constraints so that the right sides of both labels align with the arrow having a negative offset. What happens now is that the arrow stays at the extreme right of the title bar while the text is centered. I would like the arrow stick to the right hand side of the title text though. I cannot fix this with absolute values as the title text changes dynamically. Any ideas? Thanks! – The Lone Coder Feb 27 '16 at 08:18
  • Hmm.. Did you try my suggestion of using one label? You can set it to attributed text and have two fonts in the same label. – Peter DeWeese Feb 29 '16 at 12:58
  • 1
    Thanks, that did the trick. I would like to add this helpful article about creating NSAttributedStrings in Swift as a reference: http://stackoverflow.com/questions/24666515/how-do-i-make-an-attributed-string-using-swift – The Lone Coder Mar 02 '16 at 10:51
4

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)
shim
  • 9,289
  • 12
  • 69
  • 108
Juanpablo Macias
  • 61
  • 3
0

One another way to user button and set text which you want to set and and the text you set button image to down arrow. if need to set position of button image and button title than use EdgesInset of image and title.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Ilesh P
  • 3,940
  • 1
  • 24
  • 49