При разработке приложения иногда нужно добавить tutorial, чтобы пользователь быстро разобрался как использовать ваше приложение. В данной статье я расскажу как сделать простой и адаптивный tutorial для iOS приложения. За пример возьму небольшое приложение с контактами.
Цель tutorial показать функционал приложения. На этом экране это добавление нового контакта, просмотр контакта и переключение между списком контактов и настройками приложения.
Предположим что нам надо сделать вот такой tutorial:
Для этого нужно:
– картинка черного цвета с alpha равной 0.9
– сделать прозрачные прямоугольники под нужные элементы UI
– картинки стрелок
– текст к стрелкам
– добавить необходимые constraints для layout
Нарисуем картинку черного цвета и выставим alpha для UIImageView равной 0.9 :
Для того чтобы вырезать из картинки прямоугольники воспользуемся возможностями Core Image. Применим к картинке фильтр CIMaskToAlpha, но для этого нам сначала нужно подготовить нашу картинку. Фильтр CIMaskToAlpha черные пиксели картинки делает прозрачными, а белые пиксели оставляет без изменений. Поэтому нам нужно сделать картинку белого цвета и добавить на нее необходимые прямоугольники черного цвета.
Картинка с белым фоном и черными прямоугольниками:
Применяем фильтр CIMaskToAlpha:
Перекрасим картинку в черный цвет с помощью фильтра CIFalseColor:
Теперь нам нужна функция для рисования стрелки. Рисовать будем с помощью Core Graphics.
Рассчитаем 7 координат, соединим их и закрасим:
Еще одна картинка для понимания как считаются координаты стрелки:
Параметры для рисования стрелок в моем примере:
let size = CGSize(width: 50, height: 250)
let startPoint = CGPoint(x: 0, y: size.height)
let endPoint = CGPoint(x: size.width – 10, y: 0)
let arrowImage = DrawHelper.drawArrow(size: size,
color: .white,
startPoint: startPoint,
endPoint: endPoint)
let size = CGSize(width: 40, height: 100)
let startPoint = CGPoint(x: size.width, y: size.height)
let endPoint = CGPoint(x: size.width / 2, y: 0)
let arrowImage = DrawHelper.drawArrow(size: size,
color: .white,
startPoint: startPoint,
endPoint: endPoint)
let size = CGSize(width: 40, height: 50)
let startPoint = CGPoint(x: size.width, y: size.height)
let endPoint = CGPoint(x: size.width / 2, y: 0)
let arrowImage = DrawHelper.drawArrow(size: size,
color: .white,
startPoint: startPoint,
endPoint: endPoint)
Стрелки для элементов UITabBar имеют одни параметры, но разные constraints.
let size = CGSize(width: 20, height: 100)
let startPoint = CGPoint(x: size.width / 2, y: 0)
let endPoint = CGPoint(x: size.width / 2, y: size.height)
let arrowImage = DrawHelper.drawArrow(size: size,
color: .white,
startPoint: startPoint,
endPoint: endPoint)
Остается добавить constrains для UImageView, установить значение image для UIImageView и добавить UILabel с описанием.
Так как все делается по аналогии приведу пример только avatar.
Пример для аватара:
На скриншотах можно посмотреть что layout не поехал на разных девайсах с разным разрешением.
Screenshot 5. iPhone 8 Plus
Screenshot 6. iPhone 11
Screenshot 7. iPhone 11 Pro Max
Screenshot 8. iPhone SE 2020
Это простой пример что можно сделать с помощью Core Image и Core Graphics.