Всем привет! Вы смотрите очередной видеоурок от школы мобильной разработки SwiftBook. Здесь мы рассказываем и показываем всё, что знаем о языке Swift и Kotlin: увлечённо, понятно и без воды.
Поехали! Ссылка на видео: здесь
Ай ла вью: создаём красивое
Сегодня будем наводить красоту: поговорим о том, как добавить во вью скруглённые углы, тени и выделяющиеся края - простые элементы, которые улучшат визуальную составляющую интерфейса.
Скруглённые углы
Начнём с cornerRadius.
Создаём проект с типом интерфейса Storyboard и на основном экране, размещаем и фиксируем UIView, протягивая от него соответствующий аутлет во viewController.
Первый способ скруглить углы у вью:
обращаемся к его свойству layer.cornerRadius и задаём желаемый радиус скругления углов.
mainView.layer.cornerRadius = 15
Второй способ, который касается и cornerRadius и всех других свойств:
переходим в Identity Inspector и здесь по ключу cornerRadius
добавляем нужное нам значение радиуса скругления углов для конкретного вью.
Третий способ, если перед вами стоит задача скруглить не все углы у вью, а лишь некоторые:
создаём отдельный приватный метод, который будем вызывать во viewDidLoad и передаём в параметры метода нужное вью.
Внутри метода через UIRectCorner определяем нужные углы, которые хотим скруглить. Допустим, это будет верхний левый и верхний правый угол:
private func setupCorners(for view: UIView) {
let corners = UIRectCorner(
arrayLiteral: [
UIRectCorner.topLeft,
UIRectCorner.topRight
]
)
Через CGSize обозначаем ширину и высоту желаемого угла:
let cornerSize = CGSize(
width: 20,
height: 10
)
При помощи кривых Безье рисуем маску со скруглёнными углами, создаём нужное свойство, обращаемся к UIBezierPath и выбираем инициализатор с параметрами «скруглённый прямоугольник», куда можно также передать необходимые углы и их размер
let maskPath = UIBezierPath(
roundedRect: view.bounds,
byRoundingCorners: corners,
cornerRadii: cornerSize
)
Далее создаём объект CAShapeLayer, в его свойство path передаём созданную фигуру, также указываем фрейм и накладываем на вью слой со скруглёнными углами:
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
maskLayer.frame = view.bounds
view.layer.mask = maskLayer
Вызовем во viewDidLoad этот метод для нашего вью и посмотрим, что получилось. Теперь закомментируем эту строчку кода.
Четвёртый способ настройки cornerRadius.
Делаем расширение к UIView и это будет IBDesignable extension, внутри которого мы обозначим cornerRadius, как IBInspectable свойство геттер и сеттер. При помощи этого расширения мы вынесем настройку свойств, помеченных при помощи атрибута IBInspectable, непосредственно в сториборд.
Также здесь мы обращаемся к свойству masksToBounds - булево значение, указывающее, должны ли слои изображения прикрепляться к краям вью или нет.
Если true, то мы обрезаем изображение по его границе.
И здесь мы указываем зависимость этого свойства от значения cornerRadius
import UIKit
@IBDesignable extension UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
layer.cornerRadius
}set {
layer.cornerRadius = newValue
layer.masksToBounds = (newValue > 0)
}
}
}
Теперь в самом сториборде в Attributes Inspector у вью появилось свойство cornerRadius и его можно задать прямо здесь.
Запустим симулятор и убедимся, что всё работает верно.
Закомментируем это расширение, чтобы убрать из интерфейс билдера корнер радиус и будем двигаться дальше.
Тени
Их можно задать для вью, обращаясь у свойства layer к таким параметрам, как
ShadowColor - цвет тени
shadowOpacity - прозрачность
shadowOffset - смещение относительно центра
и shadowRadius
mainView.layer.shadowColor = UIColor.black.cgColor
mainView.layer.shadowOpacity = 0.5
mainView.layer.shadowOffset = CGSize(width: 5, height: 3)
mainView.layer.shadowRadius = 12
Теперь посмотрим, как можно при помощи расширения IBDesignable вынести настройку тени в сториборд.
Закомментируем все эти строчки во viewDidLoad и перейдём в файл, где у нас находится расширение к UIView.
@IBDesignable extension UIView {
@IBInspectable var shadowRadius: CGFloat {
get {
layer.shadowRadius
} set {
layer.shadowRadius = newValue
}
}
@IBInspectable var shadowOpacity: CGFloat {
get {
CGFloat(layer.shadowOpacity)
} set {
layer.shadowOpacity = Float(newValue)
}
}
@IBInspectable var shadowOffset: CGSize {
get {
layer.shadowOffset
} set {
layer.shadowOffset = newValue
}
}
@IBInspectable var shadowColor: UIColor? {
get {
guard let cgColor = layer.shadowColor else {
return nil
}
return UIColor(cgColor: cgColor)
} set {
layer.shadowColor = newValue?.cgColor
}
}
}
Внутри расширения обозначим свойства, относящиеся к тени как IBInspecrsble, получим и установим значения через геттер и сеттер
Если мы перейдём в Attributes Inspector для вью, то увидим там все эти свойства. Запустим симулятор и посмотрим, что получилось.
Контрастный край
Этот элемент мы можем добавить, обращаясь к свойству borderColor и borderWidth.
Вернёмся во вью контроллер и здесь добавим цветной край у вью в методе viewDidLoad:
mainView.layer.borderColor = UIColor.blue.cgColor
mainView.layer.borderWidth = 10
Посмотрим, как это можно сделать через расширение
@IBDesignableextension UIView {
@IBInspectablevar borderColor: UIColor? {
get {
guardlet cgColor = layer.borderColor else {
returnnil
}
return UIColor(cgColor: cgColor)
} set {
layer.borderColor = newValue?.cgColor
}
}
@IBInspectablevar borderWidth: CGFloat {
get {
layer.borderWidth
} set {
layer.borderWidth = newValue
}
}
}
В этом расширении всё делается по аналогии с предыдущими и в сториборде также появляются дополнительные свойства для настройки края вью.
Запустим симулятор и посмотрим на результат.
На этом уроке мы рассмотрели несколько способов настройки свойств вью: тени, края и скруглённые углы. Выбирайте оптимальный и помните, совершенству нет предела.
За дело!
Подписывайтесь на наши соцсети:
Telegram
VKontakte
