обучающее приложение

При разработке приложения иногда нужно добавить 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.

Про урокцифры:  ДИМИЛЬ СТЕКЛО

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

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