CALayer — тень

Предыдущая часть CALayer — закругление углов, выделение границы

В этой части мы сделаем тень у кнопки и закруглим ее углы.

Тень

У нас остался последний элемент — кнопка. И у нее мы закруглим углы и сделаем от нее тень.  Доступ к кнопке у нас есть из  ViewController в котором мы делали outlet. Я к outlet добавил еще Action, чтобы обработать нажать на кнопку. По нажатия будет меняется форма тени.  Также для этого переключения я добавил свойство класса shadowSwitch, чтобы отслеживать текущее положение тени. Мой класс  ViewController выглядит следующим образом:

// proSwift.ru
//

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var blueView: BlueView!
    @IBOutlet weak var orangeButton: UIButton!
    @IBOutlet weak var logoView: LogoView!

    var shadowSwitch = true

    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    
    @IBAction func orangeButtonTapped(sender: UIButton) {
    }
}

С кнопкой мы также как и с LogoView будем работать с уже существующим слоем, к которому получим доступ через свойство .layer.

Добавьте код в метод  viewDidLoad()

//
// proSwift.ru
//


override func viewDidLoad() {
    super.viewDidLoad()
        
    // Закругленные углы
    orangeButton.layer.cornerRadius = CGRectGetHeight(orangeButton.bounds) / 2

}

Радиус закругления составил половину высоты кнопки. Это дало нам красивую кругленную оранжевую кнопку.

Добавим тень. Для этого нужно задать радиус тени — по сути размер тени относительно объекта, интенсивность тени — т.е. прозрачность, и сдвиг тени — ее направление относительно объекта. Кстати методом обработки нажатия кнопки я как раз и буду мнется это сдвиг и можно наглядно посмотреть как это значение влияет на положение тени.

//
// proSwift.ru
//

override func viewDidLoad() {
    super.viewDidLoad()
        
    // Закругленные углы
    orangeButton.layer.cornerRadius = CGRectGetHeight(orangeButton.bounds) / 2
        
    // Тень
    orangeButton.layer.shadowRadius = 4.0
    orangeButton.layer.shadowOpacity = 0.6
    orangeButton.layer.shadowOffset = CGSize.zero
}

Тень появилась вокруг кнопки со всех сторон, потому что свойству orangeButton.layer.shadowOffset, т.е. сдвигу тени  мы присвоили значение CGSize.zero. Т.е. тень не сдвигается относительно объекта. Добавим логики в обработку нажатия кнопки…

// 
// proSwift.ru
//

@IBAction func orangeButtonTapped(sender: UIButton) {
    if shadowSwitch {
        orangeButton.layer.shadowOffset = CGSize(width: 4.0, height: 4.0)
    } else {
        orangeButton.layer.shadowOffset = CGSize.zero
    }
    shadowSwitch = !shadowSwitch
}

… и получим следующий результат:

При нажатии меняется shadowOffset и тень сдвигается вправо-вниз на размеры переданные в это свойство CGSize(width: 4.0, height: 4.0)

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

https://github.com/Ironrnd/CALayer_proSwift_ru