1

Как создать вот такую штуку, как на картинках? Везде ее замечаю, но даже не знаю, что гуглить. введите сюда описание изображениявведите сюда описание изображения

3
  • Эм, стрелочку? Ну её можно через CoreGraphics нарисовать, к примеру. Создаёте кастомный UIView и переопределяете draw:. 9 мар 2018 в 13:15
  • Серьёзно? А я думал это какой-то элемент стандартной UI библиотеки :)) 9 мар 2018 в 13:37
  • 1
    Насколько мне известно, нет таких стандартных элементов 9 мар 2018 в 14:24

1 ответ 1

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 изогнутая.

Пример на GitHub.

Результат по примеру:

введите сюда описание изображения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.