Избавьтесь от плоских цветов фона и используйте градиенты в своих представлениях
Я поклонник написания небольшого кода для выполнения множества задач. На днях я запустил новый проект 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, если вы столкнетесь с той же проблемой.
Исход!
Приведенные выше четыре строки кода создали следующий экран в моем приложении (за вычетом меток я добавил их через раскадровку).
Хотя существует множество других способов использования и настройки градиентов, я оставлю это вам, чтобы вы исследовали и выясняли. Для всех, кому требуется простой градиент для экрана / метки / кнопки и т. Д. Я надеюсь, что эта статья будет вам полезна, и спасибо за чтение!