Как создать вот такую штуку, как на картинках?
Везде ее замечаю, но даже не знаю, что гуглить.
-
Эм, стрелочку? Ну её можно через CoreGraphics нарисовать, к примеру. Создаёте кастомный UIView и переопределяете draw:.– Dmitry Serov9 мар 2018 в 13:15
-
Серьёзно? А я думал это какой-то элемент стандартной UI библиотеки :))– Миша Ландау9 мар 2018 в 13:37
-
1Насколько мне известно, нет таких стандартных элементов– Dmitry Serov9 мар 2018 в 14:24
1 ответ
Можно обычную картинку добавить, если не нужно выравнивать. Можно 2 полоски (UIView с цветом или картинки) и поворачивать их друг относительно друга.
Рассмотрим пример как отрисовать:
1 Создаем класс и наследуемся от CALayer
:
class TestViewLayer: CALayer {
override class func needsDisplay(forKey key: String) -> Bool {
if key == "multiplier" {
return true
}
return super.needsDisplay(forKey: key)
}
@objc dynamic var multiplier: CGFloat = 0
override func draw(in ctx: CGContext) {
super.draw(in: ctx)
UIGraphicsPushContext(ctx)
// Set line color
UIColor.gray.setStroke()
let path = UIBezierPath()
let lineWidth: CGFloat = min(bounds.height / 3, bounds.width / 3)
path.lineWidth = lineWidth
path.lineCapStyle = .round
path.lineJoinStyle = .round
path.move(to: .init(x: bounds.minX + lineWidth, y: bounds.minY + lineWidth))
path.addLine(to: .init(x: bounds.midX, y: (bounds.maxY - 2 * lineWidth) * multiplier + lineWidth))
path.addLine(to: .init(x: bounds.maxX - lineWidth, y: bounds.minY + lineWidth))
path.stroke()
UIGraphicsPopContext()
}
}
2 Создаем UIView с нашим layer:
class TestView: UIView {
@objc dynamic var multiplier: CGFloat = 0 {
didSet {
assert((0...1) ~= multiplier, "Multiplier must be in 0...1 range")
animateMultiplier()
}
}
var testLayer: TestViewLayer {
return self.layer as! TestViewLayer
}
var animationDuration: TimeInterval = 0.5
private func animateMultiplier() {
let animation = CABasicAnimation(keyPath: "multiplier")
animation.fromValue = testLayer.multiplier
animation.toValue = multiplier
animation.duration = animationDuration
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
self.layer.add(animation, forKey: "multiplier")
testLayer.multiplier = multiplier
}
override class var layerClass: AnyClass {
return TestViewLayer.self
}
}
3 Используем созданный класс. При установке multiplier = 0 будет прямая линия, при multiplier = 1 изогнутая.
Результат по примеру: