14

我真的很喜欢 iOS 7 中后退按钮箭头的形状，并且想在我的一个 UIButtons 上使用它，但喜欢 > 而不是 <。有没有文字的方法，还是我应该只使用图像？

4

8 回答 8

23

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

2倍：2x

3倍：3x

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

于 2017-07-21T00:44:36.773 回答
19

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

图片是UINavigationBarBackDefault.png。

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

于 2014-01-30T08:22:41.120 回答
17

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

‹</p>

单左点角引号 Unicode：U+2039，UTF-8：E2 80 B9

HTML 实体：&lsaquo;

退税：

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

好处：

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

指示：

  • 显示 OS X Character Viewer（在时钟旁边，也许你必须在 Preferences -> Keyboard 中激活它）
  • 在左侧列表中，单击“括号”
  • 在 Xcode 中，将文本光标放在定义为后退按钮文本的字符串内
  • 在 Character Viewer 中，单击第三行中的第一个条目（我不得不单击几次，直到它被插入到 Xcode 中）

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

于 2014-06-15T15:11:05.010 回答
17

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

于 2017-05-19T19:43:55.080 回答
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）一般来说，固有尺寸在界面构建器上只是被打破了，所以为了一个轻松的生活，你最好只输入带有约束的高度和宽度：/

于 2019-09-04T11:52:58.520 回答
1

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

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

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

于 2021-02-18T09:03:38.760 回答
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 中远程自定义任何东西现在都感觉非常黑客......

于 2019-10-22T06:12:59.800 回答
-1

这最好通过使用图像来实现。没有办法用文字做到这一点，对不起。

我能找到这张图片，这是一个 .png

于 2013-09-12T01:27:13.207 回答