CALayer — закругление углов, выделение границы

Начало статьи и градиент: CALayer- градиент: CAGradientLayer

В этой части мы сделаем круглую картинку и выдели черным ее границу.

CALayer_proSwift_ru_1db8x

Картинка с границей

Для слоев LogoView все настройки включая размер и радиус закругления можно задавать в методе  setup(). связано это с тем, что мы установили фиксированный размер для ширины и высоты LogoView в первой строке метода  setup()

 И еще: мы не будем добавлять дополнительный слой как это делали в градиенте. Мы будем изменять тот слой, который уже есть, к которому можно получить доступ через свойство .layer UIView.

Для начала давайте нарисуем границу вокруг картинки.  Для этого нужно задать цвет границы и ее ширину. Измените метод setup():

Запустите проект — вы увидите черную границу вокруг. Кстати, в Interface Builder на сцене контроллера также будет видна граница.

CALayer_proSwift_ru_nbk2y

Теперь давайте немного закруглим углы.

Запустив скомпилированный проект мы увидим странную картину:

CALayer_proSwift_ru_c4hk1

Углы закруглялись, и граница тоже сгладилась, а вот картинка как была на месте так и осталась. Эта проблема легко решается, но до ее решения давайте сделаем картинку полностью круглой. Для этого нужно радиус закрепления (cornerRadius) установить в значение, равное половины ширины картинки. У нас фиксированная ширина поэтому мы можем написать первый вариант, но если в вашем проекте картинка будет изменять свой размер в зависимости от размера экрана, его ориентации и.т.д. то размер закругления нужно обрабатывать в том же методе, где мы обрабатывали размер градиента, а именно в layoutSubviews()

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

Что же у нас получилось? Круг видно, но картинка все равно выступает за его пределы.

CALayer_proSwift_ru_1cj9u

Чтобы это исправить нужно установить свойство слоя maskToBounds. Если передать в это свойство true, то слой не будет отображать ничего за пределами своих границ.

Скомпилируем и увидим нужный нам результат.

CALayer_proSwift_ru_1db8x

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

Следующая часть: CALayer — Тень

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

https://github.com/Ironrnd/CALayer_proSwift_ru

Опубликовано в Iron ribbon, Реальные примеры, Уроки, Элементы UI Метки:

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

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

*