Знакомство С Calayer

Добро пожаловать! В этой статье вы узнаете о ключевой теме операционной системы iOS: слоях.

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

Слои являются частью базовой платформы анимации.

Вы можете сказать: «Что имеет смысл? Я никогда раньше не использовал слои, так что, возможно, это не так важно».

Знаете вы это или нет, но ваше приложение активно использует слои.

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

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

Посмотрите на изображение ниже, чтобы наглядно представить, где находится базовая анимация в структуре iOS. иерархия.



Знакомство с CALayer



Почему слои? Немного теории.

От таких устройств, как смартфоны, пользователи ожидают большей скорости во всем, что они делают. Очень важно поддерживать постоянную частоту кадров, которую пользователи воспринимают как «плавную работу».

На устройствах iOS эта скорость составляет 60 кадров в секунду.

Чтобы поддерживать движение системы на такой скорости, был создан уровень графических функций, который работает непосредственно на графическом процессоре (графическом процессоре): OpenGL. OpenGL обеспечивает самый низкий уровень (и самый быстрый) доступ к графическим устройствам iOS. Однако есть компромисс: OpenGL очень примитивен, и даже самые простые задачи требуют написания большого количества кода.

Для решения этой проблемы была создана Core Graphics, обеспечивающая чуть более высокий уровень функциональности при меньшем количестве кода.

Чтобы упростить работу с Core Graphics, была создана Core Animation. Он предоставляет класс CALayer и обеспечивает базовый низкоуровневый доступ к графическим возможностям.

После того, как Apple решила, что более продвинутая функциональность Core Animation не всегда необходима в обычных приложениях, был создан UIKit, обеспечивающий высочайший уровень доступа к графике.

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

Обратной стороной является то, что более высокие уровни API предлагают меньшую функциональность.

Мораль этой истории такова: CALayer существует для того, чтобы iOS могла быстро и легко создавать растровую информацию об иерархии представлений вашего приложения, которая затем будет передаваться в Core Graphics и, в конечном итоге, в OpenGL, а затем отображаться на экранных устройствах с помощью графического процессора.

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



Доступ к CALayer

Достаточно поговорить о том, почему существуют слои.

Давай приступим к работе! Как я упоминал выше, каждое представление поддерживается слоем, доступ к которому можно получить через свойство Layer UIView. Предполагая, что у вас есть объект MyView, вы можете получить доступ к его слою следующим образом:

  
  
  
  
  
   

myView.layer

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

В оставшейся части статьи я расскажу о некоторых из них.



Демо-проект

Во-первых, скачайте стартап-проект и начнем! Лучший способ научиться что-то делать — это практиковаться, поэтому в этом приложении мы будем добавлять к слоям собственные эффекты.

Открыв проект, вы увидите, что это относительно простое приложение.

Это пустой белый вид с черным квадратом в центре.

Давайте немного наведем порядок.

Перейдите в ViewController.swift и приступим.



Знакомство с CALayer



Создание закругленных углов

Вы можете использовать свойство angularRadius из CALayer, чтобы скруглить углы.

Давайте попробуем это сделать.

Внутри viewDidLoad() добавьте следующую строку:

box.layer.cornerRadius = 5

Как и следовало ожидать, эта строка кода добавит к слою поля угловой радиус 5. Это выглядит так:

Знакомство с CALayer

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

По умолчанию все слои имеют угловой радиус 0.

Знакомство с CALayer



Добавляем эффект тени

Тень помогает создать ощущение глубины нашего приложения и очень полезна при проектировании интерфейсов.

Используя эффект тени, мы можем создать эффект «плавной» презентации на экране устройства.

Давайте посмотрим, как создать эффект тени с помощью CALayer. Вставьте следующий код в метод viewDidLoad ViewController:

box.layer.shadowOffset = CGSizeMake(5, 5) // 1 box.layer.shadowOpacity = 0.7 // 2 box.layer.shadowRadius = 5 // 3 box.layer.shadowColor = UIColor(red: 44.0/255.0, green: 62.0/255.0, blue: 80.0/255.0, alpha: 1.0).

CGColor // 4

Линия 1: Устанавливает смещение тени слоя на (5, 5).

Установка (5, 5) в качестве значения Layer.shadowOffset означает, что тень слоя должна быть смещена на 5 единиц вправо и на 5 единиц ниже box.layer. Строка 2: Эта строка устанавливает непрозрачность тени слоя на 0,7. Это означает, что тень не должна превышать непрозрачность более чем на 70%.

Строка 3: Эта строка устанавливает радиус тени слоя равным 5. Радиус тени — это радиус размытия, который применяется к тени, созданной box.layer. Больший радиус делает тень более размытой, но менее заметной.

Меньший радиус делает тень более заметной и сфокусированной.

Радиус тени, равный 0, приводит к полному размытию.

Другими словами, посредством описанных выше операций можно точно определить форму и размер слоя.

Строка 4: Эта строка устанавливает темно-серый цвет тени слоя.

Обратите внимание, что это свойство имеет тип CGColor, а не UIColor. Преобразовать эти два типа очень легко.

Вы просто пишете myUIColor.CGColor. Давайте посмотрим, что у нас получилось!

Знакомство с CALayer



Использование границ

CALayer также позволяет легко применять границы.

Давайте добавим границу к полю.



box.layer.borderColor = UIColor.blueColor().

CGColor // 1 box.layer.borderWidth = 3 // 2

Линия 1: Эта строка устанавливает темно-синий цвет границы поля.

Это установит темно-синий цвет для любой границы отображаемого поля.

Строка 2: Эта строка устанавливает ширину границы поля равной 3. Это означает, что граница, нарисованная вокруг поля, будет иметь толщину 3 единицы.

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



Знакомство с CALayer



Отображение изображения

Вы также можете назначить изображение слою, и именно так слой отображает изображение.

Благодаря этому у нас в проекте появилась чудесная картинка дерева.

Веб-сайт .

Давайте заставим наш слой отображать изображение.

Вставьте следующий код в viewDidLoad:

box.layer.contents = UIImage(named: "Tree.jpg")?.

CGImage // 1 box.layer.contentsGravity = kCAGravityResize // 2 box.layer.masksToBounds = true // 3

Линия 1: Он создает новый UIImage с именем файла Tree.jpg и присваивает его свойству слоя содержимого.

Строка 2: Он устанавливает размер содержимого слоя для изменения размера, что означает, что все содержимое слоя будет изменено в соответствии с размерами слоя.

Строка 3: Мы изменяем MasksToBounds на true, чтобы любые подслои слоя, выходящие за его границы, были обрезаны до этих границ.

Если вы не понимаете, что это значит, вы можете установить значение false, чтобы увидеть различия.

Вот результат.

Знакомство с CALayer



Цвет фона и непрозрачность

Мы говорили о добавлении специальных эффектов CALayer, которые невозможно использовать с помощью UIKit, но нам также следует обсудить, как можно изменить большинство свойств UIKit, влияющих на UIView, через CALayer. Например, вы можете изменить цвет фона и прозрачность представления, как показано ниже:

box.layer.backgroundColor = UIColor.blueColor().

CGColor box.layer.opacity = 0.5



Характеристики CALayer

Добавление множества пользовательских эффектов к слоям может повлиять на его производительность.

Сейчас мы поговорим о двух свойствах CALayer, которые могут помочь нам значительно улучшить производительность приложения.

Во-первых, давайте поговорим об асинхронной отрисовке.

Это свойство CALayer определяет, требует ли процессор отрисовки слоя в фоновом потоке.

Если установлено значение true, слой будет выглядеть точно так же, как обычный, но для отображения этих вычислений в фоновом потоке потребуются вычисления ЦП.

Вам следует установить значение true, если у вас есть представление, которое необходимо часто перерисовывать, например карта или таблица.

Далее давайте посмотрим на mustRasterize. Это свойство CALayer, которое определяет, следует ли растрировать слой.

Если это свойство имеет значение true, слой рисуется один раз.

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

Для этого свойства следует установить значение true, если у вас есть представление, которое не нужно часто перерисовывать.

Обратите внимание, что если вы установите параметр mustRasterize, отображение слоя на устройствах Retina может измениться.

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

Чтобы предотвратить это, установите для rasterizationScale значение UIScreen.mainScreen().

scale, чтобы слой растеризовался в том же масштабе, что и отображаемый экран.

Следует отметить, что в 99% случаев вам не следует использовать какое-либо из этих свойств самостоятельно.

Установка их вручную может привести к снижению производительности.

Установите только одно из этих двух свойств по своему усмотрению, если вы определите, что изображение или слой влияет на производительность приложения.



Давайте подведем итоги

Теперь вы знаете, что такое CALayer! Имея некоторые знания низкоуровневой графики, вы сможете создать несколько интересных эффектов.

Надеюсь, статья будет полезна новичкам.

Для справки вы можете скачать готовый проект .

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

Теги: #calayer #iOS #Swift #coreanimation #разработка iOS #Swift

Вместе с данным постом часто просматривают: