Создание индикатора прогресса с закругленным прямоугольником - PullRequest
Новая
       9

Создание индикатора прогресса с закругленным прямоугольником

0 голосов
/ 25 сентября 2018

Я пытаюсь создать индикатор прогресса в виде прямоугольника с закругленными углами в моем приложении.Ранее я реализовал круговой индикатор, но не как эта форма.Я бы хотел, чтобы это выглядело примерно так (начальная точка находится сверху):

enter image description here

Но я получаю это с 0 в качестве .strokeStart свойство слоя:

enter image description here

Мой текущий код находится в viewDidLoad(): 

let queueShapeLayer = CAShapeLayer()
let queuePath = UIBezierPath(roundedRect: addToQueue.frame, cornerRadius: addToQueue.layer.cornerRadius)
queueShapeLayer.path = queuePath.cgPath
queueShapeLayer.lineWidth = 5
queueShapeLayer.strokeColor = UIColor.white.cgColor
queueShapeLayer.fillColor = UIColor.clear.cgColor
queueShapeLayer.strokeStart = 0
queueShapeLayer.strokeEnd = 0.5
view.layer.addSublayer(queueShapeLayer)

addToQueue - это кнопка с надписью «Upvote».

В отличие от создания кругового индикатора прогресса, я не могу установить начальный и конечный угол при инициализации пути Безье.

Какначать прогресс с верхней середины, как показано на первом изображении?

Редактировать - добавлено изображение без радиуса угла:

enter image description here

Кажется, что угловой радиус создает проблему.

Если у вас есть какие-либо вопросы, пожалуйста, задавайте!

1 Ответ

0 голосов
/ 25 сентября 2018

Я нашел решение, чтобы индикатор загрузки работал для круглых углов:

enter image description here

let queueShapeLayer = CAShapeLayer()

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    // Queue timer
    let radius = addToQueue.layer.cornerRadius
    let diameter = radius * 2
    let totalLength = (addToQueue.frame.width - diameter) * 2 + (CGFloat.pi * diameter)

    let queuePath = UIBezierPath(roundedRect: addToQueue.frame, cornerRadius: radius)
    queueShapeLayer.path = queuePath.cgPath
    queueShapeLayer.lineWidth = 5
    queueShapeLayer.strokeColor = UIColor.white.cgColor
    queueShapeLayer.fillColor = UIColor.clear.cgColor
    queueShapeLayer.strokeStart = 0.25 - CGFloat.pi * diameter / 3 / totalLength // Change the '0.25' to 0.5, 0.75 etc. wherever you want the bar to start
    queueShapeLayer.strokeEnd = queueShapeLayer.strokeStart + 0.5 // Change this to the value you want it to go to (in this case 0.5 or 50% loaded)
    view.layer.addSublayer(queueShapeLayer)
}

После того, как я это сделал, у меня былопроблемы, которые я не мог оживить весь путь вокруг.Чтобы обойти это, я создал вторую анимацию (установив strokeStart в 0), а затем поместил блоки завершения , чтобы я мог запускать анимации в нужное время.

Подсказка:

Добавьте animation.fillMode = CAMediaTimingFillMode.forwards & animation.isRemovedOnCompletion = false при использовании CABasicAnimation для анимации, чтобы подождать, пока вы ее не удалите.

Надеюсь, эта формула поможет любому вбудущее!

Если вам нужна помощь, вы всегда можете написать мне, и я готов помочь.:)

...