Избавьтесь от плоских цветов фона и используйте градиенты в своих представлениях

Я поклонник написания небольшого кода для выполнения множества задач. На днях я запустил новый проект Xcode и хотел создать простой градиент, используя два цвета на целевом экране моего приложения. Я знал, что у Swift есть относительно простая в использовании система градиентов, так как я прочитал множество статей, в которых люди объясняли все тонкости градиентов Swift. Единственная проблема в том, что реализация градиентов Swift всеми была намного сложнее, чем мне хотелось. Поэтому после пары поисков в Google и 30 минут попыток выяснить досадную ошибку я наконец получил свой двухцветный экран посадки с градиентом, работающий в 4 строках кода.

Вот как я это сделал:

let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.bounds
gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]
self.view.layer.insertSublayer(gradientLayer, at: 0)

Итак, что касается сложного кода, он не стоит на первом месте в списке, но, тем не менее, давайте рассмотрим его построчно.

Строка 1 инициализирует вашу gradientLayer переменную. Это переменная, для которой вы установите все параметры градиента и в конечном итоге добавите ее в свой вид.

Строка 2 устанавливает размер рамки вашего gradientLayer, чтобы он соответствовал размеру вида, к которому вы добавляете градиент.

Строка 3 - забавная (по крайней мере, для меня). gradientLayer.colors принимает массив цветов, из которых состоит градиент. Вы можете добавить столько цветов к своему градиенту, сколько захотите, просто следите за синтаксисом массива при добавлении большего количества цветов.

Строка 4 - это место, где на самом деле происходит волшебство. Здесь все, что мы делаем, - это добавляем подслой к текущему виду и устанавливаем для этого подслоя значение gradientLayer , которое мы настраивали в строках 1–3.

Вот и все! Теперь просто скомпилируйте и запустите код в своем проекте Xcode, и на вашем экране должен появиться сексуальный желтый градиент.

Предупреждение об ошибке!

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

self.view.layer.insertSublayer(gradientLayer, at: 0)

Добавление at: 0 к функции insertSublayer сообщает Swift установить этот подслой в индексе 0 представления. Это подтолкнуло градиент за всем содержимым моего экрана и позволило мне увидеть все, что ранее было скрыто градиентом. Это заняло у меня больше времени, чем я хотел бы признать, но, надеюсь, я смогу сэкономить вам 30 минут поиска в Google, если вы столкнетесь с той же проблемой.

Исход!

Приведенные выше четыре строки кода создали следующий экран в моем приложении (за вычетом меток я добавил их через раскадровку).

Хотя существует множество других способов использования и настройки градиентов, я оставлю это вам, чтобы вы исследовали и выясняли. Для всех, кому требуется простой градиент для экрана / метки / кнопки и т. Д. Я надеюсь, что эта статья будет вам полезна, и спасибо за чтение!