iOS 7返回按钮符号是什么?

14

我非常喜欢 iOS 7 中返回按钮箭头的形状,并希望将其用于我的一个 UIButton 上,但要使用 > 而不是 <。是否有一种文本方式可以实现,或者我应该使用图片呢?


http://www.teehanlax.com/tools/ios7/ - borrrden
只需完美地绘制它就容易多了——函数非常简单,我已经将其放在答案中。完美匹配。 - Fattie
8个回答

23

这些物品的不同分辨率的图片在页面的哪里?有很多链接需要查找。 - David Rector
只保存我上面发布的那些。我直接从苹果获取它们,这是他们提供的唯一分辨率。自从我抓取这些以来,他们可能已经更新了他们的网站。我相信它们仍然在那里,因为他们还没有在iOS上更改它。 - jungledev
不再是这样了。他们在几年前把末端变圆了。 - Ash
1
截至2021年12月8日,我从这里获取了该符号。图像名称为chevron.backward - Dhruv Saraswat

19

17

1
请注意,许可证禁止直接在您的应用程序中使用这些图像。根据许可协议:“您不得将Apple UI设计资源嵌入任何软件程序或其他产品中。” - humblehacker

17

我的解决方案是使用Unicode字符作为后退按钮图标:

单个左指向角引号 Unicode:U+2039,UTF-8:E2 80 B9

HTML实体:&lsaquo;

缺点:

  • 看起来不完全像真正的后退按钮图标,但对我来说足够接近了

优点:

  • 实现简单快速
  • 无需图像文件
  • 因此,后退按钮图标的颜色不固定,可能会随着颜色设计变更/新版本的iOS而调整

说明:

  • 显示OS X字符查看器(靠近时钟,也许您需要在“首选项->键盘”中激活它)
  • 在左侧列表中,单击“括号”
  • 在Xcode中,将文本光标放置在所定义的后退按钮文本内部
  • 在字符查看器中,单击第三行的第一个条目(我不得不单击几次,直到它插入到Xcode中)

也许还有更好的看起来像后退按钮图标的字符...


1
这个字符在我的文本和应用程序中看起来很小。 - Chris
我喜欢这种方法。您可以使用self.button.titleLabel.font来调整字体大小。通过按CTRL CMD SPACE键,可以获取OSX字符查看器。 - Reefwing
在Helvetica Neue字体中,我发现角度太钝了。我使用Timothy Perez在https://dev59.com/_mw15IYBdhLWcg3w3fjN中描述的拉伸技巧进行了修复,但是使用了3,1的拉伸比例。您可以根据自己的字体调整文本大小、粗细和拉伸程度,但必须在手机上测试,而不是在Safari开发人员模拟器中测试。 - David

3

复制并粘贴。

将视图设置为 32 x 32

iOS通常将位置设置为距离左侧安全区域24个单位。

@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) 对于像这样的新手程序员来说,这可能更容易。

(B) 一般来说,在界面构建器上固有大小都是不起作用的,所以为了方便起见,最好使用约束条件设置高度和宽度 :/


2

iOS 14 中,返回按钮的系统图片现在被称为 chevron.backward。您可以在 Interface Builder 中的图像下拉菜单中选择它,或者使用 UIImage(named: "chevron.backward") 进行编程。

由于某些原因,在 iOS 13 中将此图像从 chevron.left 更名,因此如果需要向后兼容,请改用该图像。

令人讨厌的是,如果您希望实现更长时间的向后兼容性,则仍需在资产目录中提供具有相同名称的备用图像。其他答案已经涵盖了这种可能性,但请注意,返回按钮已经多次更改,因此在使用图像之前,您可能需要确保图像是最新的。


0

我本来是想回答这个问题的:

在UIToolbar上创建一个左箭头按钮(类似于UINavigationBar的“返回”样式)

(受machoota的答案启发),但它已经被锁定了,而且作为新手,我没有足够的声誉...无论如何,这是SwiftUI版本:

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

这是一个肮脏的黑客方式,但是在SwiftUI中尝试做任何自定义操作都感觉非常不专业...


-1

最好通过使用图像来实现这一点。很抱歉,无法使用文本完成此操作。

我能找到this image,它是一个.png格式的图片。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接