iOS 7 Back Button Symbol?

Question

I really like the shape of the back button arrow in iOS 7, and would like to use it on one of my UIButtons, but like > instead of <. Would there be a way with text, or should I just use images?

Answer 1

You have to use an image. These assets are in the original size from Apple. Here you go, simply right-click and save each one.
1x:

2x:

3x:

Source: https://developer.apple.com/design/resources/

Answer 2

You can extract all iOS7 artwork using Cédric Luthi's iOS-Artwork-Extractor available on GitHub: compile this app in the simulator and look for UINavigationBarBackDefault.png.

The picture is .

An alternative is to get the Teehan + Lax iOS7 GUI PSD (iPhone) file. It contains most of iOS7 artwork. There's also a Sketch App version: Teehan + Lax iOS7 GUI for Sketch.

Answer 3

My solution is to use a Unicode character as back button icon:

‹

SINGLE LEFT-POINTING ANGLE QUOTATION MARK Unicode: U+2039, UTF-8: E2 80 B9

HTML Entity: ‹

Drawback:

• Does not exactly look like the real back button icon, but close enough for me

Advantages:

• Simple and quick to implement
• No image file needed
• Thus, the color of the back button icon is not fixed but may get adjusted by color design changes / new versions of iOS

Instructions:

• Show the OS X Character Viewer (next to the clock, maybe you have to activate it in Preferences -> Keyboard)
• In the left list, click on "Parentheses"
• In Xcode, place your text cursor inside the string you define as back button text
• In the Character Viewer, click on the first entry in the third row (I had to click a few times until it was inserted in Xcode)

Maybe there are even better characters which look like the back button icon...

Answer 4

Official Apple back button symbol artwork can be downloaded at https://developer.apple.com/ios/human-interface-guidelines/resources/

Answer 5

Copy and paste.

Make the view 32 x 32.

For the position, iOS usual position is 24 from the left safe area.

@IBDesignable class BackArrow32Button: UIButton {
  override func draw(_ rect: CGRect) {
    //
    // this is just carefully MATCHED to the Apple one (2019)
    // make the box > 32x32 < and have it > 24 on the left from safe area <
    //
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 17, y: 6))
        bezierPath.addLine(to: CGPoint(x: 7, y: 16))
        bezierPath.addLine(to: CGPoint(x: 17, y: 26))
        UIColor.black.setStroke()
        bezierPath.lineWidth = 3
        bezierPath.stroke()
  }
}

A detail ...

I didn't add intrinsic content size, since,

(A) it's probably easier for newer programmers like this

(B) generally speaking intrinsic size is just broken on interface builder, so for an easy life you're better to just put in the height and width with a constraint :/

Answer 6

As of iOS 14, this is now a system image called chevron.backward. You can select this from the image drop-down in Interface Builder, or programmatically using UIImage(named: "chevron.backward")

For some reason this seems to have been renamed from chevron.left in iOS 13, so if you need to be backwardly compatible, use that one instead.

Annoyingly, if you want backward compatibility further than that, you still need to provide a fallback image in your asset catalogue with the same name. Other answers here have already covered this possibility, although note that the back chevron has changed a few times so you may want to be sure that the image proffered is still current before using it.

Answer 7

i meant to answer this question:

Creating a left-arrow button (like UINavigationBar's "back" style) on a UIToolbar

(inspired by machoota's answer there), but it's locked, and, being new, i don't have the rep ... anyway, swiftui version:

struct BackArrow: View
{
    @Environment(\.horizontalSizeClass) var hsc: UserInterfaceSizeClass?
    @Environment(\.verticalSizeClass) var vsc: UserInterfaceSizeClass?

    var color: Color

    var body: some View {

        Path { path in

            let height = self.arrowHeight(h: self.hsc, v: self.vsc)
            let width = height * 0.6

            path.move(to: CGPoint(x: width * 5.0 / 6.0, y: height * 0.0 / 10.0))
            path.addLine(to: CGPoint(x: width * 0.0 / 6.0, y: height * 5.0 / 10.0))
            path.addLine(to: CGPoint(x: width * 5.0 / 6.0, y: height * 10.0 / 10.0))

            path.addQuadCurve(  to:         CGPoint(    x: width * ((6.0 / 6.0) + self.fudgeFactor(h: self.hsc, v: self.vsc)),
                                                        y: height * ((9.0 / 10.0) - (self.fudgeFactor(h: self.hsc, v: self.vsc) * 1.666666))),
                                control:    CGPoint(    x: width * ((6.0 / 6.0) + self.fudgeFactor(h: self.hsc, v: self.vsc)),
                                                        y: height * 10.0 / 10.0))

            path.addLine(to: CGPoint(   x: width * ((2.0 / 6.0) + (3 * self.fudgeFactor(h: self.hsc, v: self.vsc))),
                                        y: height * 5.0 / 10.0))

            path.addLine(to: CGPoint(   x: width * ((6.0 / 6.0) + self.fudgeFactor(h: self.hsc, v: self.vsc)),
                                        y: height * ((1.0 / 10.0) + (self.fudgeFactor(h: self.hsc, v: self.vsc) * 1.666666))))

            path.addQuadCurve(  to:         CGPoint(    x: width * 5.0 / 6.0,
                                                        y: height * 0.0 / 10.0),
                                control:    CGPoint(    x: width * ((6.0 / 6.0) + self.fudgeFactor(h: self.hsc, v: self.vsc)),
                                                        y: height * 0.0 / 10.0))

        }
            .fill(color)
            .offset(x: -8.0, y: -5.0) // there's probaby some better way to figure this out, but i've wasted too much time already ...
    }

    private func fudgeFactor(h: UserInterfaceSizeClass?, v: UserInterfaceSizeClass?) -> CGFloat
    {   return h == .compact ? ( v == .compact  ? 0.01      // (c, c): normal phone, landscape
                                                : 0.003 )   // (c, r): any phone, portrait
                            : ( v == .compact   ? 0.01      // (r, c): large phone, landscape
                                                : 0.003 )   // (r, r): ipad, full-screen, any
    }

    private func arrowHeight(h: UserInterfaceSizeClass?, v: UserInterfaceSizeClass?) -> CGFloat
    {   return h == .compact ? ( v == .compact  ? 18.0      // (c, c): normal phone, landscape
                                                : 21.0  )   // (c, r): any phone, portrait
                            : ( v == .compact   ? 18.0      // (r, c): large phone, landscape
                                                : 21.0 )    // (r, r): ipad, full-screen, any
    }
}

it's a filthy hack, but then again, trying to do anything remotely custom in swiftui feels pretty hacky right now anyway ...

Answer 8

This would best be achieved through the usage of images. There is no way to do this with text, sorry.

I was able to find this image, it's a .png