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

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

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

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

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

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

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

//
// proSwift.ru
//

func setup () {
    imageView.frame = CGRectMake(0, 0, 240, 240)
    imageView.contentMode = .ScaleAspectFit
    addSubview(imageView)
        
    // Граница вокруг картинки
   imageView.layer.borderColor = UIColor.blackColor().CGColor
   imageView.layer.borderWidth = 4.0
}

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

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

//
// proSwift.ru
//

func setup () {
    imageView.frame = CGRectMake(0, 0, 240, 240)
    imageView.contentMode = .ScaleAspectFit
    addSubview(imageView)
        
    // Граница вокруг картинки
   imageView.layer.borderColor = UIColor.blackColor().CGColor
   imageView.layer.borderWidth = 4.0

   // Углы
   imageView.layer.cornerRadius = 30.0
}

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

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

//
// proSwift.ru
//

// первый вариант
func setup () {
    imageView.frame = CGRectMake(0, 0, 240, 240)
    imageView.contentMode = .ScaleAspectFit
    addSubview(imageView)
        
    // Граница вокруг картинки
   imageView.layer.borderColor = UIColor.blackColor().CGColor
   imageView.layer.borderWidth = 4.0

   // Углы
   imageView.layer.cornerRadius = 120
}

// второй вариант 

func setup () {
    imageView.frame = CGRectMake(0, 0, 240, 240)
    imageView.contentMode = .ScaleAspectFit
    addSubview(imageView)
        
    // Граница вокруг картинки
   imageView.layer.borderColor = UIColor.blackColor().CGColor
   imageView.layer.borderWidth = 4.0
}

override func layoutSubviews() {
    gradientLayer.frame = CGRectMake(0, 0, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds))

   // Углы
   imageView.layer.cornerRadius = CGRectGetWidth(imageView.bounds) / 2
}

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

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

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

//
// proSwift.ru
//

// первый вариант
func setup () {
    imageView.frame = CGRectMake(0, 0, 240, 240)
    imageView.contentMode = .ScaleAspectFit
    addSubview(imageView)
        
    // Граница вокруг картинки
   imageView.layer.borderColor = UIColor.blackColor().CGColor
   imageView.layer.borderWidth = 4.0

   // Углы
   imageView.layer.cornerRadius = 120

    // Поправим отображения слоя за его границами
    imageView.layer.masksToBounds = true
}

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

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

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

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

https://github.com/Ironrnd/CALayer_proSwift_ru