iOS 7后退按钮符号?

Posted

技术标签:

【中文标题】iOS 7后退按钮符号?【英文标题】:iOS 7 Back Button Symbol? 【发布时间】:2013-09-12 01:22:37 【问题描述】:

我真的很喜欢 ios 7 中后退按钮箭头的形状,并且想在我的一个 UIButtons 上使用它,但我喜欢 > 而不是

【问题讨论】:

teehanlax.com/tools/ios7 完美地绘制它要容易得多 - 这个函数非常简单,我把它放在一个答案中。完美搭配。 【参考方案1】:

您必须使用图像。这些资产采用 Apple 的原始大小。在这里,只需右键单击并保存每个。 1x:

2x:

3x:

来源:https://developer.apple.com/design/resources/

【讨论】:

页面上的什么地方是这些东西的不同分辨率的图像?有很多链接可以浏览。 只保存我上面发布的那些。我直接从 Apple 那里得到了他们提供的唯一解决方案。自从我拿到这些后,他们可能更新了他们的网站。我敢肯定他们还在某个地方,因为他们没有在 iOS 上更改它 现在不是了。他们在几年前完成了收尾工作。 截至 2021 年 12 月 8 日,我从 here 获得了该符号。图片名称为chevron.backward【参考方案2】:

您可以使用 Cédric Luthi 在 GitHub 上的 iOS-Artwork-Extractor 提取所有 iOS7 艺术作品:在模拟器中编译此应用并查找 UINavigationBarBackDefault.png。

图片是。

另一种方法是获取Teehan + Lax iOS7 GUI PSD (iPhone) 文件。它包含大部分 iOS7 艺术品。还有一个Sketch App 版本:Teehan + Lax iOS7 GUI for Sketch。

【讨论】:

【参考方案3】:

Apple 官方后退按钮符号图稿可在以下网址下载 https://developer.apple.com/ios/human-interface-guidelines/resources/

【讨论】:

请务必注意许可证禁止在您的应用中直接使用图像。来自许可协议:“您不得将 Apple UI 设计资源嵌入任何软件程序或其他产品中。”【参考方案4】:

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

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

html 实体:‹

缺点:

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

优点:

实施简单快捷 不需要图像文件 因此,后退按钮图标的颜色不固定,但可能会因颜色设计更改/iOS 新版本而调整

说明:

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

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

【讨论】:

这个字符在我的文本和应用程序中显得很小 我喜欢这种方法。您可以使用 self.button.titleLabel.font 调整字体大小。按 CTRL CMD SPACE 获取 OSX 字符查看器。 在 Helvetica Neue 我找到了 〈 的角度太钝了。我使用 ***.com/questions/6351013/css-can-i-stretch-text 中描述的 Timothy Perez 的拉伸技巧解决了这个问题,但使用了 3,1 拉伸。您可以调整文字大小、粗细和拉伸以适合您的字体,但您必须在手机上进行测试,而不是在 Safari 开发者模拟器中进行测试。【参考方案5】:

复制粘贴。

使视图 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) 一般来说,固有尺寸只是在界面构建器上被破坏了,所以为了简单的生活,你最好只输入带有约束的高度和宽度:/

【讨论】:

【参考方案6】:

从 iOS 14 开始,这是一个名为 chevron.backward 的系统映像。您可以从 Interface Builder 中的图像下拉菜单中选择它,或以编程方式使用 UIImage(named: "chevron.backward")

由于某种原因,这似乎已从 iOS 13 中的 chevron.left 重命名,因此如果您需要向后兼容,请改用那个。

令人讨厌的是,如果您希望进一步向后兼容,您仍然需要在资产目录中提供具有相同名称的备用图像。此处的其他答案已经涵盖了这种可能性,但请注意,背面 V 形已更改了几次,因此您可能需要确保所提供的图像在使用之前仍然是最新的。

【讨论】:

【参考方案7】:

我想回答这个问题:

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

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

这是一个肮脏的 hack,但话又说回来,尝试在 swiftui 中远程自定义任何事情现在都感觉很 hacky ...

【讨论】:

【参考方案8】:

这最好通过使用图像来实现。文本无法做到这一点,抱歉。

我找到了this image,它是.png

【讨论】:

以上是关于iOS 7后退按钮符号?的主要内容,如果未能解决你的问题,请参考以下文章

iOS 7后退按钮箭头垂直对齐

后退按钮的背景图像在触摸 iOS 7 之前不会出现

导航栏隐藏标题和后退按钮 iOS 7

iOS 7 NavigationBar 后退按钮自定义图像没有标签

在 iOS 7 中更改后退按钮会禁用滑动导航

iOS 7导航栏后退按钮标题在语言更改时更改