Используйте UIBezierPath для рисования потрясающих фигур в приложениях iOS

Существует множество различных библиотек, которые могут помочь вам создать полный круг, полукруг или даже форму ломтика пиццы.

Но что, если бы процесс изготовления не был таким сложным? Вы все еще рассматривали бы возможность использования стороннего SDK? Преимущество создания своего собственного продукта - это гибкость, позволяющая делать все, что вы хотите.

Иногда сторонние SDK просто не предлагают то, что вам нужно, и вам приходится искать другой. Если это не соответствует требованиям вашего бизнеса, это будет потрачено впустую.

Что ж, я надеюсь, что этот даст вам то, что вам нужно.

Предпосылки

Чтобы следовать этому руководству, вам понадобятся:

  • Базовое знакомство со Swift.
  • По крайней мере, Xcode 11.

Создайте свой круг

Вы будете использовать UIBezierPath, чтобы нарисовать его форму. Вы можете поиграть с arcCenter, чтобы отрегулировать, где вы хотите, чтобы форма была. И вы можете отрегулировать radius в соответствии с желаемым размером:

Это всего лишь небольшое расширение, которое поможет вам в вашем путешествии:

extension CGFloat {
    func toRadians() -> CGFloat {
        return self * CGFloat(Double.pi) / 180.0
    }
}

Затем вы будете использовать CAShapeLayer для визуализации круга:

Если вам нужен полный круг, просто используйте 0 и 360 для startAngle и endAngle соответственно:

createCircle(startAngle: 0, endAngle: 360)

А как насчет полукруга? Это будет 0 и 180 соответственно:

А как насчет формы сектора (иначе говоря, формы ломтика пиццы)? Это будут соответственно 0 и 90:

Не стесняйтесь поиграть с числами и получить нужную форму. Давайте добавим веселья этому эксперименту и посмотрим, что еще мы можем сделать.

Анимируйте свой круг

Вы можете использовать для этой цели CABasicAnimation. Определенно не стесняйтесь изменять значение в соответствии со своими потребностями:

С помощью приведенного выше кода вам просто нужно добавить одну строку в createCircle:

addAnimation(to: segmentLayer)

Добавьте градиент в свой круг

Помимо анимации, иногда требования дизайнеров могут быть довольно неприятными со всевозможными шестнадцатеричными цветами. Не волнуйся! Ваш дизайнер получит то, что хочет.

С помощью приведенного ниже кода вы можете создать градиент на своем круге. Используемый здесь градиент - синий и желтый, но вы можете изменить цвета:

Добавьте приведенный ниже код внутрь createCircle.

addGradientLayer(to: segmentLayer)

Если у вас еще есть анимация, это будет комбинация анимации и градиента. Однако я хочу показать вам, как это выглядит с градиентом на изображении ниже:

Укладывая свой круг

Вы впечатлили своего дизайнера, но, похоже, он хочет большего. Они дали вам новый набор дизайнов. На этот раз вам нужно добавить внешний круг вокруг полного круга, так как текущая версия выглядит слишком простой.

Что ж, вы уже знаете, как создать круг. Вы можете просто сложить их, реплицируя один и тот же код:

И viewDidLoad должен содержать:

createInnerCircle(startAngle: 0, endAngle: 360)
createCircle(startAngle: 0, endAngle: 360)

Этим вы поразите своего дизайнера и официально станете его любимым инженером:

Теперь у вас есть гибкий круг, который вы можете время от времени настраивать.