我非常喜欢 iOS 7 中返回按钮箭头的形状,并希望将其用于我的一个 UIButton 上,但要使用 > 而不是 <。是否有一种文本方式可以实现,或者我应该使用图片呢?
我非常喜欢 iOS 7 中返回按钮箭头的形状,并希望将其用于我的一个 UIButton 上,但要使用 > 而不是 <。是否有一种文本方式可以实现,或者我应该使用图片呢?
您可以在https://developer.apple.com/ios/human-interface-guidelines/resources/下载官方的苹果返回按钮符号艺术品。
我的解决方案是使用Unicode字符作为后退按钮图标:
‹
单个左指向角引号 Unicode:U+2039,UTF-8:E2 80 B9
HTML实体:‹
缺点:
优点:
说明:
也许还有更好的看起来像后退按钮图标的字符...
复制并粘贴。
将视图设置为 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) 一般来说,在界面构建器上固有大小都是不起作用的,所以为了方便起见,最好使用约束条件设置高度和宽度 :/
iOS 14 中,返回按钮的系统图片现在被称为 chevron.backward
。您可以在 Interface Builder 中的图像下拉菜单中选择它,或者使用 UIImage(named: "chevron.backward")
进行编程。
由于某些原因,在 iOS 13 中将此图像从 chevron.left
更名,因此如果需要向后兼容,请改用该图像。
令人讨厌的是,如果您希望实现更长时间的向后兼容性,则仍需在资产目录中提供具有相同名称的备用图像。其他答案已经涵盖了这种可能性,但请注意,返回按钮已经多次更改,因此在使用图像之前,您可能需要确保图像是最新的。
我本来是想回答这个问题的:
在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中尝试做任何自定义操作都感觉非常不专业...