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

Answer 1

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 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

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 4

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 5

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

Answer 6

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