CALayer, или как закруглить углы, сделать тень и градиент на Swift

В данной статье мы рассмотрим свойство UIView — layer, то есть слой. Это класс CALayer, который в свою очередь имеет ряд весьма полезных свойств, регулируя которые можно изменить внешний вид любого UIView. Самое популярное применение свойств CALayer  — это закругление углов (cornerRadius) и тень (shadow), а также рисование градиента (gradient). Как Вы помните, UIView — это базовый класс для всего, что отображается на экране — кнопок, картинок, переключателей и т.д. А это означает, что все свойства, которые мы будем менять в данной статье можно изменить у любого элемента в интерфейсе пользователя

.CALayer_proSwift_ru_9nchz

 Мы создадим проект, в котором сделаем (сверху вниз по картинке): градиент, закругление углов с выделением границы, и закругление углов и тень вокруг кнопки.

Подготовка

Для начала создайте проект в Xcode Single View Application, перейдите в Storyboard и добавьте на контроллер три элемента: два View и одну кнопку. Добавьте цвета для фона контроллера, двух волов View и кнопки, что было удобно с ними работать и различать их. Далее создайте два файла с классами, которые будут наследниками класса UIView. Я назвал классы BlueView и LogoView.

Инстркуция @IBDesignable добавлена для того, чтобы просматривать изменения отрисовки для UIView и его подклассов прямо в Storyboard без компиляции приложения и запуска его на симуляторе или реальном устройстве.

Далее каждому из добавленных ранее View в Identity Inspector установите соответствующие классы.

CALayer_proSwift_ru_t1x8hCALayer_proSwift_ru_t1x8h

Далее создайте аутлеты для элементов интерфейса.

Для нашей задачи абсолютно не принципиально расположение элементов, но у меня после добавления констрейнтов получилось так:

CALayer_proSwift_ru_tthhj

Как вы заметили, у меня в  LogoView красуется картинка. У вас ее не будет. Я ниже напишу как добавить картину в LogoView. А пока можете приготовить любую квадратную картинку, над которой вы будете ставить эксперименты. Я приведу код файла LogoView, в котором я сделал возможность выбора картинки непосредственно в Interface Builder, т.е. в Storyboard. Именно поэтому в нем реализовано  такое количество методов. Однако если внимательно посмотреть, то все вполне логично:

Методы awakeFromNib() и prepareForInterfaceBuilder() запускаются единожды: первый при запуске приложения и загрузки UIView из Storybord, второй при переходе в Storyboard  для отрисовки изменений непосредственно на сцене Interface Builder. Для нашего LogoView я добавил свойство  imageView: UIImgeView для отображения картинки, и свойство image для выбора картинки, которое будет отображать imageView. Метод setup() запускает настройку для imageView.

Свойство image я пометил инструкцией @IBInspectable и установил наблюдателя свойства didSet. Тип @IBInspectable свойства должен быть явно указан, как в нашем случае  — мы сказали что оно будет опционалом UIImage (то есть явно указали тип после двоеточия). А при помощи наблюдателя свойства мы устанавливаем картинку в UIImageView.

Вы спросите — зачем все эти сложности? А я вам отвечу — для того, чтобы менять картинку прямо из Storyboard. После всех наших изменений в Storyboard можно обнаружить следующие изменения:

CALayer_proSwift_ru_gxoet

При выборе нашего LogoView в атрибут инспекторе появилась настройка Image в которой можно выбрать любую картинку, которую вы добавите в проект. Добавьте картинку или несколько в проект, и после этого выберите ее из выпадающего списка. Картинка отрисуется прямо на сцене  Interface Builder.

Давайте подобные настройки сделаем для blueView. В класс BluewView добавьте следующее:

Давайте разберем по пунктам, но для начала, также как и классу LogoView, установим директиву  @IBDesignable

  1. Для нашего класса BlueView мы добавали свойство gradienLayer типа CAGradientLayer и использовали стандартный инициализатор. Задавать свойства для градиенты мы будем именно этому слою, а потом добавим его в иерархию слоев BlueView
  2. Свойство, в котором мы будем задавать стартовый цвет для градиента.
  3. Свойство, в котором мы будем задавать средний цвет для градиента.
  4. Свойство, в котором мы будем задавать конечный цвет для градиента.
  5. Метод, который вызывается единожды при загрузке View из Storyboard
  6. Метод, который вызывается единожды для отрисовки непосредственно в  Storyboard
  7. В этом методе мы добавляем слой градиента в иерархию слоев BlueView и вызываем метод, в котором будем устанавливать настройки для градиента
  8. Непосредственно, метод, в котором мы и будем задавать настройки отображения градиента
  9. Как и в случае с LogoView . В нашем случае это удобнее всего в методе layoutSubviews(), т.к. размер frame у нас насчитывается из размеров BlueView, в котором он отображается. А при выполнении этого метода размеры BlueView уже известны.

Свойства 2-4 помечены директивой @IBInspectable для отображения в списке Attributes Inspector. Это дает нам возможность выбора цветов мышкой прямо в Interface Builder.

CALayer_proSwift_ru_9zyag

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

Следующая часть: CALayer- градиент: CAGradientLayer

 

Ссылка проекта на Github

https://github.com/Ironrnd/CALayer_proSwift_ru

Метки:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*